Updat aria attributes

grrr-amsterdam · Jul 29, 2024 · bba5f4b · bba5f4b
1 parent 7499634
commit bba5f4b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/src/cookie-consent.mjs b/src/cookie-consent.mjs
@@ -71,8 +71,7 @@ export default class Dialog extends HTMLElement {
       saveButtonText: Config().get("labels.aria.button"),
       defaultButtonLabel: Config().get("labels.button.default"),
       acceptAllButton:
-        Config().get("acceptAllButton")
-        && !Preferences().hasPreferences(),
+        Config().get("acceptAllButton") && !Preferences().hasPreferences(),
     };
     // custom content from data-attributes
     const customContent = {
@@ -122,10 +121,10 @@ export default class Dialog extends HTMLElement {
     this.tabList.init();
 
     const template = `
-    <aside part="${this.config.prefix}" id="${this.config.prefix}" class="${this.config.prefix} js-cookie-bar" role="dialog" aria-label="dialog" aria-live="polite" aria-describedby="${this.config.prefix}-description" aria-hidden="true" tabindex="0">
+    <aside part="${this.config.prefix}" id="${this.config.prefix}" class="${this.config.prefix} js-cookie-bar" aria-role="dialog" aria-live="polite" aria-labelledby="${this.config.prefix}__title" aria-describedby="${this.config.prefix}-description" aria-hidden="true" tabindex="0">
       <!--googleoff: all-->
         <header part="${this.config.prefix}__header" class="${this.config.prefix}__header" id="${this.config.prefix}-description">
-          <h1 part="${this.config.prefix}__title">${this.data.title}</h1>
+          <h1 part="${this.config.prefix}__title" id="${this.config.prefix}__title">${this.data.title}</h1>
           ${this.data.description}
         </header>
         <form part="${this.config.prefix}__form">
@@ -186,9 +185,7 @@ export default class Dialog extends HTMLElement {
     const checkedCount = values.filter((v) => v.accepted).length;
     const userOptionsChecked = checkedCount >= requiredCount;
     if (
-      this.data.acceptAllButton
-      && this.config.type === "checkbox"
-      && !userOptionsChecked
+      this.data.acceptAllButton && this.config.type === "checkbox" && !userOptionsChecked
     ) {
       return values.map((value) => ({
         ...value,

diff --git a/src/dialog-tablist.mjs b/src/dialog-tablist.mjs
@@ -42,7 +42,7 @@ const DialogTabList = (cookieInformation) => {
           transform: scaleY(-1);
         }
       </style>
-      <li part="${PREFIX}__tab-list-item" role="listitem">
+      <li part="${PREFIX}__tab-list-item" role="tab">
         <header part="${PREFIX}__tab" class="${PREFIX}__tab">
           <label part="${PREFIX}__option" class="${PREFIX}__option" data-required="${required}">
             <input
@@ -57,9 +57,10 @@ const DialogTabList = (cookieInformation) => {
             part="${PREFIX}__tab-toggle"
             class="${PREFIX}__tab-toggle"
             role="tab"
-            id="${PREFIX}-tab-${index}"
+            id="${PREFIX}-tab"
             href="#${PREFIX}-tabpanel-${index}"
             aria-controls="${PREFIX}-tabpanel-${index}"
+            aria-owns="${PREFIX}__tab-list"
             aria-selected="false"
             aria-label="${Config().get("labels.aria.tabToggle")}">
             <svg part="${PREFIX}__tab-toggle-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 16"><path d="M21.5.5l3 3.057-12 11.943L.5 3.557 3.5.5l9 9z"/></svg>
@@ -95,7 +96,7 @@ const DialogTabList = (cookieInformation) => {
         : undefined,
     }));
     return `
-      <ul part="${PREFIX}__tab-list" class="${PREFIX}__tab-list" role="list" aria-label="${Config().get("labels.aria.tabList")}">
+      <ul part="${PREFIX}__tab-list" id="${PREFIX}__tab-list" class="${PREFIX}__tab-list" role="tablist" aria-owns="${PREFIX}-tab" aria-label="${Config().get("labels.aria.tabList")}">
         ${cookiesWithState.map(renderTab).join("")}
       </ul>
     `;