add labelledby for a11y

baloise · Mar 19, 2024 · c74233d · c74233d
1 parent 76ed820
commit c74233d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -2169,6 +2169,10 @@ export namespace Components {
           * Returns a list of option values
          */
         "getSelectedOptions": () => Promise<string[]>;
+        /**
+          * Id of the label element to describe this option list
+         */
+        "labelledby"?: string;
         /**
           * If `true` the list supports multiple selections
          */
@@ -2189,6 +2193,7 @@ export namespace Components {
           * Selects the option with the current focus
          */
         "selectByFocus": () => Promise<void>;
+        "setAriaForm": (ariaForm: BalAriaForm) => Promise<void>;
     }
     interface BalPagination {
         /**
@@ -7098,6 +7103,10 @@ declare namespace LocalJSX {
           * Defines the focused option with his index value
          */
         "focusIndex"?: number;
+        /**
+          * Id of the label element to describe this option list
+         */
+        "labelledby"?: string;
         /**
           * If `true` the list supports multiple selections
          */

diff --git a/packages/core/src/components/bal-option-list/bal-option-list.tsx b/packages/core/src/components/bal-option-list/bal-option-list.tsx
@@ -1,10 +1,11 @@
-import { Component, h, ComponentInterface, Host, Element, Prop, Watch, Method, Listen } from '@stencil/core'
+import { Component, h, ComponentInterface, Host, Element, Prop, Watch, Method, Listen, State } from '@stencil/core'
 import isNil from 'lodash.isnil'
 import { Attributes, inheritAttributes } from '../../utils/attributes'
 import { BEM } from '../../utils/bem'
 import { raf, waitAfterFramePaint } from '../../utils/helpers'
 import { Loggable, Logger, LogInstance } from '../../utils/log'
 import { includes, startsWith } from '../bal-select/utils/utils'
+import { BalAriaForm, defaultBalAriaForm } from '../../utils/form'
 
 @Component({
   tag: 'bal-option-list',
@@ -20,6 +21,8 @@ export class OptionList implements ComponentInterface, Loggable {
 
   log!: LogInstance
 
+  @State() ariaForm: BalAriaForm = defaultBalAriaForm
+
   @Logger('bal-option-list')
   createLogger(log: LogInstance) {
     this.log = log
@@ -40,6 +43,11 @@ export class OptionList implements ComponentInterface, Loggable {
    */
   @Prop({ mutable: true }) focusIndex = -1
 
+  /**
+   * Id of the label element to describe this option list
+   */
+  @Prop() labelledby?: string
+
   /**
    * Defines the filter logic of the list
    */
@@ -240,6 +248,14 @@ export class OptionList implements ComponentInterface, Loggable {
     }
   }
 
+  /**
+   * @internal
+   */
+  @Method()
+  async setAriaForm(ariaForm: BalAriaForm): Promise<void> {
+    this.ariaForm = { ...ariaForm }
+  }
+
   /**
    * GETTERS
    * ------------------------------------------------------
@@ -437,6 +453,8 @@ export class OptionList implements ComponentInterface, Loggable {
   render() {
     const block = BEM.block('option-list')
 
+    const labelledby = this.labelledby || this.ariaForm.labelId
+
     return (
       <Host
         class={{
@@ -447,6 +465,7 @@ export class OptionList implements ComponentInterface, Loggable {
       >
         <div
           role="listbox"
+          aria-labelledby={labelledby}
           class={{
             ...block.element('container').class(),
           }}

diff --git a/packages/core/src/components/bal-option-list/test/bal-option-list.a11y.html b/packages/core/src/components/bal-option-list/test/bal-option-list.a11y.html
@@ -13,7 +13,8 @@
     <bal-doc-app>
       <main class="container py-medium">
         <section data-testid="basic">
-          <bal-option-list id="list" multiple>
+          <bal-label id="label">Year list</bal-label>
+          <bal-option-list id="list" multiple labelledby="label">
             <bal-option value="v1991" label="1991">1991</bal-option>
             <bal-option value="v1992" label="1992">1992</bal-option>
             <bal-option value="v1993" label="1993">1993</bal-option>