markteekman / accessible-astro-starter

An Accessible Starter Theme for Astro 4.0 including accessibility features such as landmarks, better focus-outline and skip-links navigation. Ships with Tailwind, Prettier and ESLint support.

Accessible Astro Starter

Accessible Astro Starter is a ready to use, SEO and a11y friendly blogging theme. It contains plenty of accessible components to build several page types, Tailwind CSS to help you build faster and example pages such as a dynamic Blog, 404, Markdown and MDX. This theme is designed to help you build your project faster and provide a solid base for accessibility!

🚀 Live Preview

♿ (Accessibility) Features

• Astro 4.0
• Tailwind CSS support
• Prettier integration with prettier-plugin-astro and prettier-plugin-tailwind
• ESLint integration with strict accessibility settings for eslint-plugin-jsx-a11y
• Markdown and MDX support with examples included in the theme
• Uses the awesome astro-icon package for the icons
• Excellent Lighthouse/PageSpeed scores
• Accessible landmarks such as header, main, footer, section and nav
• Outline focus indicator which works on dark and light backgrounds
• Several aria attributes which provide a better experience for screen reader users
• [...page].astro and [post].astro demonstrate the use of dynamic routes and provide a basic blog with breadcrumbs and pagination
• 404.astro provides a custom 404 error page which you can adjust to your needs
• Header.astro component included in the DefaultLayout.astro layout
• Footer.astro component included in the DefaultLayout.astro layout
• SkipLinks.astro component to skip to either the main menu or the main content
• Navigation.astro component with keyboard accessible (dropdown) navigation (arrow keys, escape key)
• ResponsiveToggle.astro component with an accessible responsive toggle button for the mobile navigation
• DarkMode.astro component toggle with accessible button and a user system preferred color scheme setting
• SiteMeta.astro SEO component for setting custom meta data on different pages
• .sr-only utility class for screen reader only text content (hides text visually)
• prefers-reduced-motion disables animations for users that have this preference turned on
• Ships with many components such as Accordions, Breadcrumbs, Modals, Pagination and many more
• A collection of utility classes such as breakpoints, button classes, font settings, resets and outlines in src/assets/scss/base
• View Transitions (⚠️ see astro-docs for accessibility considerations)

🚀 Getting started

Clone this theme locally and run any of the following commands in your terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying

📦 Other Accessible Astro projects

• Accessible Astro Dashboard
• Accessible Astro Components

❤️ Helping out

If you find that something isn't working right then I'm always happy to hear it to improve this starter! You can contribute in many ways and forms. Let me know by either:

1. Filing an issue
2. Submitting a pull request
3. Starting a discussion
4. Buying me a coffee!

☕ Thank you!

A big thank you to the creators of the awesome Astro static site generator and to all using this starter to make the web a bit more accessible for all people around the world :)

accessible-astro-starter's Issues

Modals aren't working in demo

you might wanna check on that, but clicking on buttons to display modals doesnt do anything.

Page layout appears zoomed

Hello Mark,
I have an issue where the page layout appears zoomed (compared to the demo website). I have attached screenshots. The space around the page is less in the local run.

I am cloning the repo and run it without any modifications at the moment (I am exploring if it would fit my use case).
I compared a few things and everything is stock, such as padding, grid layout and spacing etc.

It may be something very basic, hence I appreciate your time for this.

Demo Website Screenshot 1



Local Run Screenshot 1



Demo Website Screenshot 2



Local Run Screenshot 2

Feature: Dynamically apply aria-current to active page

Currently, aria-current is hardcoded and is only applied to the Home page link. The navigation would need retooling so aria-current is applied to the currently viewed page.

Upgrade Astro to 3.0.0 and update other devDependencies

Take note of some of the breaking changes and whether they apply: https://docs.astro.build/en/guides/upgrade-to/v3/

Main navigation accessibility improvement

• Openend dropdown menu should close when the users tabs out of it (on desktop)
• The mobile menu should trap the focus when it's openend
• Optional: open menu items on hover (with a slight closing delay)
• Optional: provide an extra menu item which is a link and as well has a dropdown

Examples:

• https://codepen.io/markteekman/pen/vYvbpmE
• https://codepen.io/markteekman/pen/OJrdQZw

astro build fails with memory allocation error

Trying the new version 3.1.2, which unfortunately fails on me every time I am running npm run build:

> [email protected] build
> astro build

21:53:52 [build] output: "static"
21:53:52 [build] directory: <dir>
21:53:52 [build] Collecting build info...
21:53:52 [build] ✓ Completed in 1.11s.
21:53:52 [build] Building static entrypoints...
21:53:59 [astro-icon] Loaded icons from ion, mdi
memory allocation of 86603180 bytes failed

I did not touch anything, simply cloned the repo and ran the build command.

The previous version, 3.1.1, builds without issues for me.

I am running Windows 11 22H2, npm version 10.3.0, node version v20.11.0.

dark mode default

How can I make sure that dark mode is set as default?

Active navigation menu styling and astro-i18next

Hi!

It seems that the bold styling is not applied to an active navigation menu when astro-i18next is used.

It seems the localizePath function maybe an issue:

<li class="menu-item">
  <a href={localizePath("/about/")}>About</a>
</li>

Or at least this is what I think why it may not be working in my case.

Would you please kindly look into this / assist with this — source and preview.

Thank you very much!

Add new Forms & Inputs components for basic contact page form

Forms can be very complex, not just accessibility wise. We can make a small start by adding some default components / wrappers with some accessibility standards baked in like custom validation and error handeling.

Notes

• Vanilla example: https://codepen.io/markteekman/pen/Yzdovxo

Dependency issue when deploying with Netlify after upgrade to Astro 3.0

With the latest updates in #76 there have been some issues with the deployment on Netlify:

7:30:20 PM: build-image version: 73f16e520fdddf409be6f578c8c2c8941bdf32d3 (focal)
7:30:20 PM: buildbot version: a11acbb405af91d225b392f15bc00822dbffb366
7:30:20 PM: Fetching cached dependencies
7:30:20 PM: Starting to download cache of 177.4MB
7:30:24 PM: Finished downloading cache in 3.8s
7:30:24 PM: Starting to extract cache
7:30:26 PM: Finished extracting cache in 2.414s
7:30:26 PM: Finished fetching cache in 6.264s
7:30:26 PM: Starting to prepare the repo for build
7:30:27 PM: Preparing Git Reference refs/heads/main
7:30:28 PM: Starting to install dependencies
7:30:28 PM: Python version set to 3.8
7:30:28 PM: Attempting Ruby version 2.7.2, read from environment
7:30:29 PM: Using Ruby version 2.7.2
7:30:29 PM: Started restoring cached go cache
7:30:29 PM: Finished restoring cached go cache
7:30:29 PM: go version go1.19.12 linux/amd64
7:30:30 PM: Using PHP version 8.0
7:30:31 PM: Started restoring cached Node.js version
7:30:31 PM: Finished restoring cached Node.js version
7:30:31 PM: Attempting Node.js version 'v20.5.1' from .nvmrc
7:30:32 PM: Downloading and installing node v20.5.1...
7:30:32 PM: Downloading https://nodejs.org/dist/v20.5.1/node-v20.5.1-linux-x64.tar.xz...
7:30:32 PM: Computing checksum with sha256sum
7:30:32 PM: Checksums matched!
7:30:34 PM: Now using node v20.5.1 (npm v9.8.0)
7:30:35 PM: Enabling Node.js Corepack
7:30:35 PM: Started restoring cached build plugins
7:30:35 PM: Finished restoring cached build plugins
7:30:35 PM: Started restoring cached corepack dependencies
7:30:35 PM: Finished restoring cached corepack dependencies
7:30:35 PM: No npm workspaces detected
7:30:35 PM: Started restoring cached node modules
7:30:35 PM: Finished restoring cached node modules
7:30:35 PM: Installing npm packages using npm version 9.8.0
7:30:38 PM: npm ERR! code ERESOLVE
7:30:38 PM: npm ERR! ERESOLVE could not resolve
7:30:38 PM: npm ERR!
7:30:38 PM: npm ERR! While resolving: [email protected]
7:30:38 PM: npm ERR! Found: @astrojs/[email protected]
7:30:38 PM: npm ERR! node_modules/@astrojs/mdx
7:30:38 PM: npm ERR!   dev @astrojs/mdx@^1.0.2 from the root project
7:30:38 PM: npm ERR!
7:30:38 PM: npm ERR! Could not resolve dependency:
7:30:38 PM: npm ERR! dev @astrojs/mdx@^1.0.2 from the root project
7:30:38 PM: npm ERR!
7:30:38 PM: npm ERR! Conflicting peer dependency: [email protected]
7:30:38 PM: npm ERR! node_modules/astro
7:30:38 PM: npm ERR!   peer astro@^3.0.11 from @astrojs/[email protected]
7:30:38 PM: npm ERR!   node_modules/@astrojs/mdx
7:30:38 PM: npm ERR!     dev @astrojs/mdx@^1.0.2 from the root project
7:30:38 PM: npm ERR!
7:30:38 PM: npm ERR! Fix the upstream dependency conflict, or retry
7:30:38 PM: npm ERR! this command with --force or --legacy-peer-deps
7:30:38 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
7:30:38 PM: npm ERR!
7:30:38 PM: npm ERR!
7:30:38 PM: npm ERR! For a full report see:
7:30:38 PM: npm ERR! /opt/buildhome/.npm/_logs/2023-09-09T17_30_35_533Z-eresolve-report.txt
7:30:38 PM: npm ERR! A complete log of this run can be found in: /opt/buildhome/.npm/_logs/2023-09-09T17_30_35_533Z-debug-0.log
7:30:38 PM: Error during npm install
7:30:38 PM: Build was terminated: dependency_installation script returned non-zero exit code: 1
7:30:38 PM: Failing build: Failed to install dependencies
7:30:38 PM: Finished processing build request in 17.78s

Sub Menu Z-Index on Desktop

The sub menu z-index is set to 0 on desktop so it doesn't inherit the menu z-index of 100 and displays underneath components like the cards.

In the chrome developer tools it can be debugged by switching off the z-index: 0:

#main-navigation.is-desktop .desktop-menu {
visibility: visible;
z-index: 0;
position: static;
}

Blog post tags?

Any chance for this features? Liked it in the hello-astro theme.

i18n support

Hi!

Would love to see the internationalization support, please.

Example implementation in Astro:

https://docs.astro.build

https://github.com/withastro/astro/tree/main/examples/docs

Thank you!

View Transition scroll position not restored.

When ViewTransitions are enabled the scroll position is meant to be restored after the browser back button is pressed. Something here seems to be preventing the scroll event handler setting its co-ordinate history in state, so the ViewTransitions component returns the user to 0,0 instead.

Is there anything you know of that could be preventing this? Another dev has had the issue with the AlpineJS package but that's not in use here.

Support for Astro 2?

Hey, I'm a new user to Astro, which just recently had its v2 release.

Wondering if it would be possible to update this theme to support v2?

A simple install and run, does not work

mgarg@pylarpc MINGW64 /d/gh/Astro0/accessible-astro-starter (main)
$ npm install
 WARN  deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
Packages: +745
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
Content-addressable store is at: D:.pnpm-store\v3
Virtual store is at: node_modules/.pnpm
Progress: resolved 767, reused 630, downloaded 115, added 745, done
node_modules/.pnpm/[email protected]/node_modules/sharp: Running install scnode_modules/.pnpm/[email protected]/node_modules/sharp: Running install script, done in 2.3s

devDependencies:

• @astrojs/mdx 0.19.7
• @astrojs/partytown 1.0.3 (1.2.3 is available)
• @astrojs/tailwind 3.0.0 (4.0.0 is available)
• @typescript-eslint/eslint-plugin 5.50.0 (6.4.0 is available)
• @typescript-eslint/parser 5.50.0 (6.4.0 is available)
• accessible-astro-components 2.1.0 (2.1.3 is available)
• astro 2.0.1 (2.10.13 is available)
• astro-compress 2.0.6 (2.0.14 is available)
• astro-icon 0.7.3 (0.8.1 is available)
• eslint 8.33.0 (8.47.0 is available)
• eslint-plugin-astro 0.23.0 (0.29.0 is available)
• eslint-plugin-jsx-a11y 6.7.1
• prettier 2.8.3 (3.0.2 is available)
• prettier-plugin-astro 0.8.0 (0.12.0 is available)
• prettier-plugin-tailwindcss 0.2.2 (0.4.1 is available)
• sass 1.49.9 (1.64.2 is available)
• svgo 2.8.0 (3.0.2 is available)
• tailwindcss 3.2.7 (3.3.3 is available)

 WARN  Issues with peer dependencies found
.
└─┬ @astrojs/mdx 0.19.7
└─┬ @astrojs/markdown-remark 2.2.1
└── ✕ unmet peer astro@^2.5.0: found 2.0.1

The integrity of 2679 files was checked. This might have caused installation to take longer.
Done in 13.4s

mgarg@pylarpc MINGW64 /d/gh/Astro0/accessible-astro-starter (main)
$ npm run dev

[email protected] dev D:\gh\Astro0\accessible-astro-starter
astro dev

error addContentEntryType is not a function
File:
D:\gh\Astro0\accessible-astro-starter\node_modules.pnpm@[email protected][email protected]\node_modules@astrojs\mdx\dist\index.js:18:9
Code:
17 | addPageExtension(".mdx");
> 18 | addContentEntryType({
| ^
19 | extensions: [".mdx"],
20 | async getEntryInfo({ fileUrl, contents }) {
21 | const parsed = parseFrontmatter(contents, fileURLToPath(fileUrl));
Stacktrace:
TypeError: addContentEntryType is not a function
at astro:config:setup (file:///D:/gh/Astro0/accessible-astro-starter/node_modules/.pnpm/@astrojs[email protected][email protected]/node_modules/@astrojs/mdx/dist/index.js:18:9)
at async withTakingALongTimeMsg (file:///D:/gh/Astro0/accessible-astro-starter/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/integrations/index.js:15:18)
at async runHookConfigSetup (file:///D:/gh/Astro0/accessible-astro-starter/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/integrations/index.js:69:7)
at async createContainer (file:///D:/gh/Astro0/accessible-astro-starter/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/core/dev/container.js:31:14)
at async createContainerWithAutomaticRestart (file:///D:/gh/Astro0/accessible-astro-starter/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/core/dev/restart.js:90:28)
at async dev (file:///D:/gh/Astro0/accessible-astro-starter/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/core/dev/dev.js:10:19)
at async runCommand (file:///D:/gh/Astro0/accessible-astro-starter/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/cli/index.js:141:7)
at async cli (file:///D:/gh/Astro0/accessible-astro-starter/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/cli/index.js:180:5)

 ELIFECYCLE  Command failed with exit code 1.

Theme is visually borked on small screens

@markteekman After opening the mobile menu toggle, something visually happens. The icon for the mobile toggle has visually vanished although the button is still there and functional. In general, the layout looks off even when returning to the collapsed menu.

Screencast: https://cloudup.com/czmmaH5b-kA

Can't build the theme

I am trying to build this theme and I get the error:

Error:
Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp-darwin-arm64v8.node'
Require stack:

• /Users/elizabeth/Development/accessible-astro-starter/node_modules/sharp/lib/sharp.js
• /Users/elizabeth/Development/accessible-astro-starter/node_modules/sharp/lib/constructor.js
• /Users/elizabeth/Development/accessible-astro-starter/node_modules/sharp/lib/index.js

Possible solutions:

• Install with verbose logging and look for errors: "npm install --ignore-scripts=false --foreground-scripts --verbose sharp"
• Install for the current darwin-arm64v8 runtime: "npm install --platform=darwin --arch=arm64v8 sharp"
• Consult the installation documentation: https://sharp.pixelplumbing.com/install
  at Object. (/Users/elizabeth/Development/accessible-astro-starter/node_modules/sharp/lib/sharp.js:34:9)
  at Module._compile (node:internal/modules/cjs/loader:1275:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
  at Module.load (node:internal/modules/cjs/loader:1133:32)
  at Module._load (node:internal/modules/cjs/loader:972:12)
  at Module.require (node:internal/modules/cjs/loader:1157:19)
  at require (node:internal/modules/helpers:119:18)
  at Object. (/Users/elizabeth/Development/accessible-astro-starter/node_modules/sharp/lib/constructor.js:8:1)
  at Module._compile (node:internal/modules/cjs/loader:1275:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)

Node.js v19.7.0

I am using the latest version of node.js.

When I do npm install, there are loads of vulnerabilities including 7 critical:

npm install

up to date, audited 1595 packages in 13s

306 packages are looking for funding
run npm fund for details

49 vulnerabilities (3 low, 39 high, 7 critical)

To address issues that do not require attention, run:
npm audit fix

To address all issues (including breaking changes), run:
npm audit fix --force

Run npm audit for details.

Mobile navigation missing current page attribute

I wasn't sure if there was a reason, but aria-current=page is not being applied to the applicable mobile navigation links.

Accordion component looks weird when in use

I followed the same instructions to install and use the components, however; the Accordion and AccordionItem components look a bit weird when I use them on my page:

Any idea how this could be fixed?

what is svgo in the adtro config?

The inclusion of svgo in the vite config doesn't seem to be needed and I can find no documentation on what it might be.

Use MatchMedia API instead of resize event listener

I’m noticing that the MatchMedia API provides better performance compared to the resize event. The MatchMedia API triggers only when the screen size matches the specified media query. In contrast, the resize event triggers every time the screen size changes, which might not be necessary in all cases. Could we consider switching to the MatchMedia API for improved performance?

Update navigation bar reference during window resize

This issue pertains to the navigation bar’s unordered list (ul) reference not being updated in the code when the window size is reduced and the view switches to mobile.

Currently, the ul reference of the navigation bar is stored when the page is loaded. However, when the window size is decreased and the view changes to mobile, this ul reference is not updated in the code. This could lead to inconsistencies in the navigation bar’s behavior and appearance between desktop and mobile views. Solving this would help to solve another open issue, about trapping the focus on mobile view