Merge pull request #188 from incluud/fix/astro-a11y-eslint-config

Fix Astro accessibility ESLint config and newly surfaces ESLint issues

Author: markteekman

eslint.config.js

@@ -4,7 +4,6 @@ import astro from 'eslint-plugin-astro'
 import jsxA11y from 'eslint-plugin-jsx-a11y'
 import tseslint from '@typescript-eslint/eslint-plugin'
 import tsParser from '@typescript-eslint/parser'
-import astroParser from 'astro-eslint-parser'
 
 export default [
   // Ignore patterns
@@ -32,6 +31,10 @@ export default [
   // ESLint recommended rules
   js.configs.recommended,
 
+  // Astro recommended and strict accessibility rules
+  ...astro.configs['flat/recommended'],
+  ...astro.configs['flat/jsx-a11y-strict'],
+
   // JavaScript files
   {
     files: ['**/*.js'],
@@ -43,19 +46,7 @@ export default [
   // Astro files
   {
     files: ['**/*.astro'],
-    plugins: {
-      astro,
-    },
-    languageOptions: {
-      parser: astroParser,
-      parserOptions: {
-        parser: '@typescript-eslint/parser',
-        extraFileExtensions: ['.astro'],
-      },
-    },
     rules: {
-      ...astro.configs.recommended.rules,
-      ...astro.configs['jsx-a11y-strict'].rules,
       'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'],
     },
   },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "accessible-astro-starter",
   "description": "An Accessible Starter Theme for Astro including several accessibility features and tools to help you build faster.",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "author": "Incluud",
   "license": "MIT",
   "type": "module",

src/components/ColorContrast.astro

@@ -216,7 +216,7 @@ const themes: Theme[] = [
 
     // Process all color items
     function processColorItems(): void {
-      const colorItems: NodeListOf<Element> = document.querySelectorAll('.color-item')
+      const colorItems = document.querySelectorAll('.color-item')
 
       colorItems.forEach((item) => {
         // Get the background color

src/components/Navigation.astro

@@ -97,7 +97,7 @@ import { LauncherTrigger } from 'accessible-astro-launcher'
     }
 
     // execution
-    mainMenu &&
+    if (mainMenu) {
       mainMenu.addEventListener('keydown', (event: KeyboardEvent) => {
         const element = event.target as Element
         const currentMenuItem = element.closest('li')
@@ -198,11 +198,13 @@ import { LauncherTrigger } from 'accessible-astro-launcher'
           }
         }
       })
+    }
 
-    dropdownMenus &&
+    if (dropdownMenus) {
       dropdownMenus.forEach((dropdownMenu) => {
-        dropdownMenu.addEventListener('click', toggleDropdownMenu as EventListener)
+        dropdownMenu.addEventListener('click', toggleDropdownMenu)
       })
+    }
 
     setActiveMenuItem()
     window.addEventListener('click', (event: MouseEvent) => {

src/components/ResponsiveToggle.astro

@@ -61,7 +61,11 @@ const { class: className } = Astro.props
       if (!mobileNavigation) return
 
       mobileNavigation.classList.toggle('show')
-      mobileNavigation.classList.contains('show') ? openMenu(responsiveToggle) : closeMenu(responsiveToggle)
+      if (mobileNavigation.classList.contains('show')) {
+        openMenu(responsiveToggle)
+      } else {
+        closeMenu(responsiveToggle)
+      }
     })
   })
 </script>

src/pages/accessible-components.astro

@@ -80,10 +80,10 @@ const components = [
           <AccordionItem title="First Item">
             <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
-              accusantium debitis <a href="#">sapiente obcaecati</a> magnam incidunt sit. Molestiae exercitationem quibusdam
-              quod veritatis laboriosam est tenetur.
+              accusantium debitis <a href="#accordion">sapiente obcaecati</a> magnam incidunt sit. Molestiae
+              exercitationem quibusdam quod veritatis laboriosam est tenetur.
             </p>
-            <a href="#">Tab to me!</a>
+            <a href="#accordion">Tab to me!</a>
           </AccordionItem>
           <AccordionItem title="Second Item">
             <p>
@@ -120,10 +120,10 @@ const components = [
           <AccordionItem name="exclusive" title="First Item" variant="chevron">
             <p>
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi nobis optio? Qui in quo
-              accusantium debitis <a href="#">sapiente obcaecati</a> magnam incidunt sit. Molestiae exercitationem quibusdam
-              quod veritatis laboriosam est tenetur.
+              accusantium debitis <a href="#accordion">sapiente obcaecati</a> magnam incidunt sit. Molestiae
+              exercitationem quibusdam quod veritatis laboriosam est tenetur.
             </p>
-            <a href="#">Tab to me!</a>
+            <a href="#accordion">Tab to me!</a>
           </AccordionItem>
           <AccordionItem name="exclusive" title="Second Item" variant="chevron">
             <p>
@@ -542,7 +542,7 @@ const components = [
               veritatis laboriosam est tenetur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed eveniet
               quidem earum at nobis enim.
             </p>
-            <a href="#">Tab to me!</a>
+            <a href="#tabs">Tab to me!</a>
           </TabsPanel>
           <TabsPanel id="panel-2" labelledby="tab-2">
             <Heading level="h3">Second Panel</Heading>
@@ -562,7 +562,7 @@ const components = [
               veritatis laboriosam est tenetur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed eveniet
               quidem earum at nobis enim.
             </p>
-            <a href="#">Tab to me!</a>
+            <a href="#tabs">Tab to me!</a>
           </TabsPanel>
           <TabsPanel id="panel-3" labelledby="tab-3">
             <Heading level="h3">Third Panel</Heading>
@@ -576,7 +576,7 @@ const components = [
               veritatis optio nulla officia quos cum at ea hic numquam perferendis molestiae! Aperiam quia veritatis
               earum tempora.
             </p>
-            <a href="#">Tab to me!</a>
+            <a href="#tabs">Tab to me!</a>
           </TabsPanel>
         </Tabs>
 

src/pages/thank-you.astro

@@ -1,7 +1,7 @@
 ---
 import DefaultLayout from '@layouts/DefaultLayout.astro'
 import PageHeader from '@components/PageHeader.astro'
-import { Heading, Link, Notification } from 'accessible-astro-components'
+import { Link, Notification } from 'accessible-astro-components'
 import { Icon } from 'astro-icon/components'
 ---