test(*): a11y testing with chai axe core that penetrates shadow dom [run-chromatic][skip-cd] (#655)

Author: clukhei

rollup.test.config.js

@@ -28,7 +28,11 @@ function getFilesInDirectorySync(directoryPath) {
 
 export default [
   {
-    input: [...getFilesInDirectorySync("./test"), ...getFilesInDirectorySync("./test/utils")],
+    input: [
+      ...getFilesInDirectorySync("./test"),
+      ...getFilesInDirectorySync("./test/utils"),
+      ...getFilesInDirectorySync("./test/a11y")
+    ],
     output: [
       {
         dir: "test-outdir",

src/components/Datepicker/sgds-datepicker.ts

@@ -443,7 +443,6 @@ export class SgdsDatepicker extends SgdsFormValidatorMixin(DropdownElement) impl
         </sgds-datepicker-input>
         <sgds-icon-button
           ${ref(this.myDropdown)}
-          role="button"
           tone="neutral"
           class=${classMap({
             "calendar-btn": true,

src/components/Drawer/sgds-drawer.ts

@@ -1,4 +1,4 @@
-import { html, PropertyValueMap } from "lit";
+import { html, nothing, PropertyValueMap } from "lit";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import SgdsElement from "../../base/sgds-element";
@@ -63,6 +63,11 @@ export class SgdsDrawer extends SgdsElement {
   /** The direction from which the drawer will open. */
   @property({ type: String, reflect: true }) placement: "top" | "end" | "bottom" | "start" = "end";
 
+  /**
+   * The accessible label for the drawer dialog. This is required for assistive technology.
+   */
+  @property({ type: String, reflect: true }) ariaLabel = "";
+
   /**
    * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
    * its parent element, set this attribute and add `position: relative` to the parent.
@@ -270,6 +275,7 @@ export class SgdsDrawer extends SgdsElement {
           class="drawer-panel"
           role="dialog"
           aria-modal="true"
+          aria-label=${this.ariaLabel || nothing}
           aria-hidden=${this.open ? "false" : "true"}
           tabindex="0"
         >

src/components/Dropdown/sgds-dropdown.ts

@@ -92,6 +92,24 @@ export class SgdsDropdown extends DropdownListElement {
     this._handleDisabled();
   }
 
+  private _handleTogglerSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    const elements = slot.assignedElements({ flatten: true });
+    const button = elements[0];
+    if (button) {
+      button.setAttribute("aria-haspopup", "menu");
+      button.setAttribute("aria-expanded", String(this.menuIsOpen));
+    }
+  }
+
+  @watch("menuIsOpen")
+  _handleMenuIsOpenChange() {
+    const button = this._toggler[0];
+    if (button) {
+      button.setAttribute("aria-expanded", String(this.menuIsOpen));
+    }
+  }
+
   @watch("disabled", { waitUntilFirstUpdate: true })
   _handleDisabled() {
     const button = this._toggler[0];
@@ -107,8 +125,8 @@ export class SgdsDropdown extends DropdownListElement {
   render() {
     return html`
       <div class="dropdown" @click=${this._handleClick}>
-        <div class="toggler-container" ${ref(this.myDropdown)} aria-expanded="${this.menuIsOpen}" aria-haspopup="menu">
-          <slot name="toggler"></slot>
+        <div class="toggler-container" ${ref(this.myDropdown)}>
+          <slot name="toggler" @slotchange=${this._handleTogglerSlotChange}></slot>
         </div>
         <div class="dropdown-menu" role="menu" ${ref(this.menuRef)}>
           <slot id="default" @click=${this.handleSelectSlot}></slot>

src/components/Mainnav/sgds-mainnav.ts

@@ -324,7 +324,7 @@ export class SgdsMainnav extends SgdsElement {
             @click=${this._handleSummaryClick}
             aria-controls="${this.collapseId}"
             aria-expanded="${this.expanded}"
-            aria-label="Toggle navigation"
+            .ariaLabel=${"Toggle navigation"}
           ></sgds-icon-button>
         </div>
       </nav>

src/components/OverflowMenu/sgds-overflow-menu.ts

@@ -23,7 +23,7 @@ export class SgdsOverflowMenu extends SgdsElement {
   render() {
     return html`
       <sgds-dropdown>
-        <button slot="toggler" class="overflow-btn">
+        <button slot="toggler" class="overflow-btn" aria-label="More options">
           <sgds-icon name="three-dots" size=${this.size}></sgds-icon>
         </button>
         <slot></slot>

src/components/Pagination/sgds-pagination.ts

@@ -78,11 +78,11 @@ export class SgdsPagination extends SgdsElement {
   }
 
   private _handlePageClick(event: MouseEvent) {
-    const liTarget = event.target as HTMLElement;
-    const clickedLi = liTarget.closest("li");
+    const target = event.target as HTMLElement;
+    const clickedItem = target.closest(".page-item");
 
-    if (clickedLi) {
-      const clickedPage = Number(clickedLi.getAttribute("key"));
+    if (clickedItem) {
+      const clickedPage = Number(clickedItem.getAttribute("key"));
       if (clickedPage !== this.currentPage) {
         this.currentPage = clickedPage;
       }
@@ -124,7 +124,7 @@ export class SgdsPagination extends SgdsElement {
 
   private _renderFirstPage() {
     return html`
-      <li key=${1} class="page-item ${this.currentPage === 1 ? "active" : ""}">
+      <div key=${1} class="page-item ${this.currentPage === 1 ? "active" : ""}">
         <span
           role="button"
           class="page-link"
@@ -135,7 +135,7 @@ export class SgdsPagination extends SgdsElement {
           @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, "pageNumber", 1)}
           >1</span
         >
-      </li>
+      </div>
     `;
   }
 
@@ -184,7 +184,7 @@ export class SgdsPagination extends SgdsElement {
   private _renderPgNumbers(pagesToShow: number[]) {
     return pagesToShow.map(
       number => html`
-        <li key=${number} class="page-item ${this.currentPage === number ? "active" : ""}">
+        <div key=${number} class="page-item ${this.currentPage === number ? "active" : ""}">
           <span
             role="button"
             class="page-link"
@@ -195,7 +195,7 @@ export class SgdsPagination extends SgdsElement {
             @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, "pageNumber", number)}
             >${number}</span
           >
-        </li>
+        </div>
       `
     );
   }
@@ -214,9 +214,9 @@ export class SgdsPagination extends SgdsElement {
     }
 
     return html`
-      <li class="page-item ">
+      <div class="page-item">
         <span class="page-link ellipsis">${this.ellipsisContent}</span>
-      </li>
+      </div>
     `;
   };
 
@@ -233,15 +233,15 @@ export class SgdsPagination extends SgdsElement {
       return null;
     }
     return html`
-      <li class="page-item">
+      <div class="page-item">
         <span class="page-link ellipsis ">${this.ellipsisContent}</span>
-      </li>
+      </div>
     `;
   }
 
   private _renderLastPage() {
     return html`
-      <li key=${this.pages.length} class="page-item ${this.currentPage === this.pages.length ? "active" : ""}">
+      <div key=${this.pages.length} class="page-item ${this.currentPage === this.pages.length ? "active" : ""}">
         <span
           role="button"
           class="page-link"
@@ -254,7 +254,7 @@ export class SgdsPagination extends SgdsElement {
           @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, "pageNumber", this.pages.length)}
           >${this.pages.length}</span
         >
-      </li>
+      </div>
     `;
   }
 
@@ -338,12 +338,12 @@ export class SgdsPagination extends SgdsElement {
   render() {
     return html`
       <nav aria-label="pagination" role="navigation">
-        <ul class="pagination pagination-${this.size}">
+        <div class="pagination pagination-${this.size}">
           ${this.variant === "description" ? this._renderDescriptionPagination() : nothing}
           ${this.variant === "default" ? this._renderDefaultPagination() : nothing}
           ${this.variant === "number" ? this._renderNumberPagination() : nothing}
           ${this.variant === "button" ? this._renderButtonPagination() : nothing}
-        </ul>
+        </div>
       </nav>
     `;
   }

src/components/ProgressBar/sgds-progress-bar.ts

@@ -32,6 +32,11 @@ export class SgdsProgressBar extends SgdsElement {
   /**
    * Sets the aria label for assistive devices.
    */
+  @property({ type: String, reflect: true }) ariaLabel = "";
+
+  /**
+   * @deprecated Use `ariaLabel` instead.
+   */
   @property({ type: String, reflect: true }) arialabel = "";
 
   /** Add label on top of progress bar */
@@ -45,10 +50,10 @@ export class SgdsProgressBar extends SgdsElement {
             class="progress-bar"
             role="progressbar"
             style=${styleMap({ width: `${this.value}%` })}
-            aria-label=${this.arialabel}
+            aria-label=${this.ariaLabel || this.arialabel || nothing}
             aria-valuenow=${this.value}
-            aria-valuemin=${this.ariamin}
-            aria-valuemax=${this.ariamax}
+            aria-valuemin=${this.ariamin ?? nothing}
+            aria-valuemax=${this.ariamax ?? nothing}
           ></div>
         </div>
         ${this.label ? html`<span class="label">${this.label}</span>` : nothing}

src/components/Radio/sgds-radio.ts

@@ -51,7 +51,6 @@ export class SgdsRadio extends SgdsElement {
     if (this.checked && this.autofocus) {
       this.input?.focus();
     }
-    this.setAttribute("aria-checked", this.checked ? "true" : "false");
     this.setAttribute("tabindex", this.checked ? "0" : "-1");
   }
 
@@ -81,7 +80,6 @@ export class SgdsRadio extends SgdsElement {
   }
 
   private setInitialAttributes() {
-    this.setAttribute("role", "radio");
     this.setAttribute("tabindex", "-1");
     this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
   }

src/components/Sidebar/sgds-sidebar-item.ts

@@ -1,5 +1,6 @@
 import { html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import SgdsElement from "../../base/sgds-element";
 import sidebarOptionStyle from "./sidebar-item.css";
 
@@ -28,7 +29,7 @@ export class SgdsSidebarItem extends SidebarElement {
           active: this._selected
         })}
         @click=${() => this._handleClick()}
-        aria-label=${this.title || this.name}
+        aria-label=${ifDefined(this.title || this.name || undefined)}
         name=${this.name}
         tabindex=${this._hidden ? -1 : 0}
         role="button"