fix a11y bug of aria-expanded

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.46.0",
+  "version": "4.47.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.47.0
+  features:
+    - component: Search and filter bar
+      url: /docs/patterns/search-and-filter
+      status: Updated
+      notes: Changed the <code>aria-expanded</code>> attribute to <code>data-expanded</code> to comply with a11y standards. This change may require updates to any custom JavaScript that interacts with the search and filter bar's expanded state.
 - version: 4.46.0
   features:
     - component: CTA section

scss/_patterns_search-and-filter.scss

@@ -42,7 +42,7 @@
       }
 
       &[data-empty='false'],
-      &[aria-expanded='false'] {
+      &[data-expanded='false'] {
         height: $input-height;
       }
 
@@ -59,7 +59,7 @@
         top: 0.3rem;
       }
 
-      &[aria-expanded='true'] {
+      &[data-expanded='true'] {
         height: auto;
         max-height: 100%;
 

templates/docs/examples/patterns/search-and-filter/_default-script.js

@@ -9,10 +9,10 @@ function togglePanel(container, panel, collapse) {
   if (panel && container) {
     if (collapse) {
       panel.setAttribute('aria-hidden', 'true');
-      container.setAttribute('aria-expanded', 'false');
+      container.setAttribute('data-expanded', 'false');
     } else {
       panel.setAttribute('aria-hidden', 'false');
-      container.setAttribute('aria-expanded', 'true');
+      container.setAttribute('data-expanded', 'true');
     }
   }
 }

templates/docs/examples/patterns/search-and-filter/_overflow-script.js

@@ -7,6 +7,6 @@
   overflowCount.addEventListener('click', function (event) {
     searchBox.dataset.overflowing = 'true';
     panel.setAttribute('aria-hidden', 'false');
-    container.setAttribute('aria-expanded', 'true');
+    container.setAttribute('data-expanded', 'true');
   });
 });

templates/docs/examples/patterns/search-and-filter/_search-prompt-script.js

@@ -51,12 +51,12 @@ function createChip(value) {
     input.addEventListener('blur', function (event) {
       var targetPanel = searchAndFilterComponent.querySelector('.p-search-and-filter__panel');
       targetPanel.setAttribute('aria-hidden', 'true');
-      container.setAttribute('aria-expanded', 'false');
+      container.setAttribute('data-expanded', 'false');
     });
 
     input.addEventListener('focus', function (event) {
       var targetPanel = searchAndFilterComponent.querySelector('.p-search-and-filter__panel');
       targetPanel.setAttribute('aria-hidden', 'false');
-      container.setAttribute('aria-expanded', 'true');
+      container.setAttribute('data-expanded', 'true');
     });
   });

templates/docs/examples/patterns/search-and-filter/chip-overflow.html

@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="p-search-and-filter">
-  <div class="p-search-and-filter__search-container" aria-expanded="false" data-active="true" data-empty="false">
+  <div class="p-search-and-filter__search-container" data-expanded="false" data-active="true" data-empty="false">
     <span class="p-chip">
       <span class="p-chip__lead">CLOUD</span><span class="p-chip__value">Google</span>
       <button class="p-chip__dismiss">Dismiss</button>

templates/docs/examples/patterns/search-and-filter/default.html

@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="p-search-and-filter">
-  <div class="p-search-and-filter__search-container" aria-expanded="false" data-active="true" data-empty="true">
+  <div class="p-search-and-filter__search-container" data-expanded="false" data-active="true" data-empty="true">
     <form class="p-search-and-filter__box" data-overflowing="false">
       <label class="u-off-screen" for="search">Search and filter</label>
       <input autocomplete="off" class="p-search-and-filter__input" id="search" name="search" placeholder="Search and filter" type="search" value="">

templates/docs/examples/patterns/search-and-filter/expanded.html

@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="p-search-and-filter">
-  <div class="p-search-and-filter__search-container" aria-expanded="true" data-active="true" data-empty="true">
+  <div class="p-search-and-filter__search-container" data-expanded="true" data-active="true" data-empty="true">
     <form class="p-search-and-filter__box" data-overflowing="false">
       <label class="u-off-screen" for="search">Search and filter</label>
       <input autocomplete="off" class="p-search-and-filter__input" id="search" name="search" placeholder="Search and filter" type="search" value="">

templates/docs/examples/patterns/search-and-filter/with-chips.html

@@ -5,7 +5,7 @@
 
 {% block content %}
 <div class="p-search-and-filter">
-  <div class="p-search-and-filter__search-container" aria-expanded="false" data-active="true" data-empty="false">
+  <div class="p-search-and-filter__search-container" data-expanded="false" data-active="true" data-empty="false">
     <span class="p-chip">
       <span class="p-chip__lead">CLOUD</span><span class="p-chip__value">Google</span>
       <button class="p-chip__dismiss">Dismiss</button>

templates/docs/examples/patterns/search-and-filter/with-search-prompt.html

@@ -6,7 +6,7 @@
 {% block content %}
 <div class="p-search-and-filter">
   <button class="p-search-and-filter__clear"><i class="p-icon--close"></i></button>
-  <div class="p-search-and-filter__search-container" aria-expanded="false" data-active="true" data-empty="false">
+  <div class="p-search-and-filter__search-container" data-expanded="false" data-active="true" data-empty="false">
     <form class="p-search-and-filter__box" data-overflowing="false">
       <label class="u-off-screen" for="search">Search and filter</label>
       <input autocomplete="off" class="p-search-and-filter__input" id="search" name="search" placeholder="Search and filter" type="search" value="vanilla">