Improve aria accessibility roles

Author: parlough

src/content/assets/js/linter-rules.js

@@ -51,8 +51,8 @@ function _setupFiltering() {
     chip.addEventListener('click', () => {
       _closeMenusAndToggle();
       chip.classList.toggle('selected');
-      const checked = chip.getAttribute('aria-checked');
-      chip.setAttribute('aria-checked', checked === 'true' ? 'false' : 'true');
+      const checked = chip.ariaChecked;
+      chip.ariaChecked = checked === 'true' ? 'false' : 'true';
       filterRules();
     });
   });
@@ -67,7 +67,10 @@ function _setupFiltering() {
     const options = chip.parentElement.querySelectorAll('.select-menu button');
 
     function unselectOptions() {
-      options.forEach(option => option.classList.remove('selected'));
+      options.forEach(option => {
+        option.classList.remove('selected');
+        option.ariaSelected = 'false';
+      });
     }
 
     options.forEach(option => {
@@ -77,6 +80,7 @@ function _setupFiltering() {
         } else {
           unselectOptions();
           option.classList.add('selected');
+          option.ariaSelected = 'true';
           chip.classList.add('selected');
           chip.querySelector('.label').textContent = option.querySelector('.label').textContent;
           chip.dataset.filter = option.dataset.filter;
@@ -132,23 +136,35 @@ function _setupFiltering() {
 }
 
 function _closeMenusAndToggle(menuToToggle = '') {
-  document.querySelectorAll('.select-menu').forEach(menu => {
+  document.querySelectorAll('.select-chip').forEach(chip => {
+    const menu = chip.parentElement.querySelector('.select-menu');
     if (menu.id === menuToToggle) {
-      menu.classList.toggle('show-menu');
+      if (menu.classList.contains('show-menu')) {
+        menu.classList.remove('show-menu');
+        chip.ariaExpanded = 'false';
+      } else {
+        menu.classList.add('show-menu');
+        chip.ariaExpanded = 'true';
+      }
     } else {
       // Close all other menus.
       menu.classList.remove('show-menu');
+      chip.ariaExpanded = 'false';
     }
   });
 }
 
 function _resetChip(chip) {
   chip.classList.remove('selected');
   if (chip.classList.contains('filter-chip')) {
-    chip.setAttribute('aria-checked', 'false');
+    chip.ariaChecked = 'false';
   } else if (chip.classList.contains('select-chip')) {
     chip.parentElement.querySelectorAll('.select-menu button')
-        .forEach(option => option.classList.remove('selected'));
+        .forEach(option => {
+          option.classList.remove('selected');
+          option.ariaSelected = 'false';
+        });
+    chip.ariaExpanded = 'false';
     chip.querySelector('.label').textContent = chip.dataset.title;
   }
 }

src/content/tools/linter-rules/index.md

@@ -133,36 +133,36 @@ check out [All linter rules](/tools/linter-rules/all).
 
   <div class="chip-set">
     {%- comment %}<div class="button-menu-wrapper">
-      <button class="chip select-chip" data-menu="category-menu" data-title="Category">
+      <button class="chip select-chip" data-menu="category-menu" data-title="Category" aria-controls="category-menu" aria-expanded="false">
         <span class="label">Category</span>
         <svg class="chip-icon trailing-icon" width="24" height="24" viewBox="0 0 24 24">
           <path d="M7 10l5 5 5-5H7z"></path>
         </svg>
       </button>
       <div id="category-menu" class="select-menu">
-        <ul>
-          <li><button><span class="label">Effective Dart</span></button></li>
+        <ul role="listbox">
+          <li><button role="option" aria-selected="false"><span class="label">Effective Dart</span></button></li>
         </ul>
       </div>
     </div>{% endcomment -%}
     <div class="button-menu-wrapper">
-      <button class="chip select-chip" data-menu="rule-set-menu" data-title="Rule set">
+      <button class="chip select-chip" data-menu="rule-set-menu" data-title="Rule set" aria-controls="rule-set-menu" aria-expanded="false">
         <span class="label">Rule set</span>
         <svg class="chip-icon trailing-icon" width="24" height="24" viewBox="0 0 24 24">
           <path d="M7 10l5 5 5-5H7z"></path>
         </svg>
       </button>
       <div id="rule-set-menu" class="select-menu">
-      <ul>
-      <li><button data-filter="inFlutter">
+      <ul role="listbox">
+      <li><button data-filter="inFlutter" role="option" aria-selected="false">
         <span class="material-symbols" aria-hidden="true">flutter</span>
         <span class="label">Flutter</span>
       </button></li>
-      <li><button data-filter="inRecommended">
+      <li><button data-filter="inRecommended" role="option" aria-selected="false">
         <span class="material-symbols" aria-hidden="true">thumb_up</span>
         <span class="label">Recommended</span>
       </button></li>
-      <li><button data-filter="inCore">
+      <li><button data-filter="inCore" role="option" aria-selected="false">
         <span class="material-symbols" aria-hidden="true">circles</span>
         <span class="label">Core</span>
       </button></li>