Add option labelId to improve a11y (#971)

* Add option labelId to improve a11y * Console.log entfernt * Add test case for aria-labeledby Co-authored-by: Josua Vogel <josua.vogel@t-systems.com>
2024-04-27 03:31:53 +02:00 · 2022-01-18 23:07:07 +01:00 · 2022-01-18 23:07:07 +01:00 · eb22895f00
parent 06d4435c82
commit eb22895f00
15 changed files with 89 additions and 10 deletions
--- a/README.md
+++ b/README.md
@ -186,6 +186,7 @@ Or include Choices directly:
    fuseOptions: {
      includeScore: true
    },
+    labelId: '',
    callbackOnInit: null,
    callbackOnCreateTemplates: null
  });
@ -601,6 +602,14 @@ const example = new Choices(element, {
 };
 ```

+### labelId
+
+**Type:** `String` **Default:** ``
+
+**Input types affected:** `select-one`, `select-multiple`
+
+**Usage:** The labelId improves accessibility. If set, it will add aria-labeledby to the choices element.
+
 ### classNames

 **Type:** `Object` **Default:**
--- a/public/assets/scripts/choices.js
+++ b/public/assets/scripts/choices.js
@ -2222,7 +2222,7 @@ function () {

  Choices.prototype._createElements = function () {
    this.containerOuter = new components_1.Container({
-      element: this._getTemplate('containerOuter', this._direction, this._isSelectElement, this._isSelectOneElement, this.config.searchEnabled, this.passedElement.element.type),
+      element: this._getTemplate('containerOuter', this._direction, this._isSelectElement, this._isSelectOneElement, this.config.searchEnabled, this.passedElement.element.type, this.config.labelId),
      classNames: this.config.classNames,
      type: this.passedElement.element.type,
      position: this.config.position
@ -3514,6 +3514,7 @@ exports.DEFAULT_CONFIG = {
  fuseOptions: {
    includeScore: true
  },
+  labelId: '',
  callbackOnInit: null,
  callbackOnCreateTemplates: null,
  classNames: exports.DEFAULT_CLASSNAMES
@ -4586,7 +4587,7 @@ Object.defineProperty(exports, "__esModule", ({
  value: true
 }));
 var templates = {
-  containerOuter: function (_a, dir, isSelectElement, isSelectOneElement, searchEnabled, passedElementType) {
+  containerOuter: function (_a, dir, isSelectElement, isSelectOneElement, searchEnabled, passedElementType, labelId) {
    var containerOuter = _a.classNames.containerOuter;
    var div = Object.assign(document.createElement('div'), {
      className: containerOuter
@ -4611,6 +4612,11 @@ var templates = {

    div.setAttribute('aria-haspopup', 'true');
    div.setAttribute('aria-expanded', 'false');
+
+    if (labelId) {
+      div.setAttribute('aria-labeledby', labelId);
+    }
+
    return div;
  },
  containerInner: function (_a) {
--- a/public/assets/scripts/choices.min.js
+++ b/public/assets/scripts/choices.min.js
--- a/public/index.html
+++ b/public/index.html
@ -288,7 +288,9 @@
        <hr />

        <h2>Single select input</h2>
-        <label for="choices-single-default">Default</label>
+        <label id="choices-single-default-label" for="choices-single-default"
+          >Default</label
+        >
        <select
          class="form-control"
          data-trigger
@ -433,7 +435,11 @@
          >
        </select>

-        <label for="choices-single-no-sorting">Options without sorting</label>
+        <label
+          id="choices-single-no-sorting-label"
+          for="choices-single-no-sorting"
+          >Options without sorting</label
+        >
        <select
          class="form-control"
          name="choices-single-no-sorting"
@ -802,6 +808,7 @@
        var singleNoSorting = new Choices('#choices-single-no-sorting', {
          allowHTML: true,
          shouldSort: false,
+          labelId: 'choices-single-no-sorting-label',
        });

        var cities = new Choices(document.getElementById('cities'), { allowHTML: true });
--- a/public/types/src/scripts/choices.d.ts.map
+++ b/public/types/src/scripts/choices.d.ts.map
--- a/public/types/src/scripts/defaults.d.ts.map
+++ b/public/types/src/scripts/defaults.d.ts.map
@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/scripts/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,eAAO,MAAM,kBAAkB,EAAE,UA2BhC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OA8C5B,CAAC"}
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/scripts/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,eAAO,MAAM,kBAAkB,EAAE,UA2BhC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OA+C5B,CAAC"}
--- a/public/types/src/scripts/interfaces/options.d.ts
+++ b/public/types/src/scripts/interfaces/options.d.ts
@ -411,6 +411,10 @@ export interface Options {
     * Choices uses the great Fuse library for searching. You can find more options here: https://fusejs.io/api/options.html
     */
    fuseOptions: Fuse.IFuseOptions<Choices>;
+    /**
+     * ID of the connected label to improve a11y. If set, aria-labeledby will be added.
+     */
+    labelId: string;
    /**
     * Function to run once Choices initialises.
     *
--- a/public/types/src/scripts/interfaces/options.d.ts.map
+++ b/public/types/src/scripts/interfaces/options.d.ts.map
@ -1 +1 @@
-{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/interfaces/options.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../../../src/scripts/interfaces/options.ts"],"names":[],"mappings":"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"}
--- a/public/types/src/scripts/templates.d.ts
+++ b/public/types/src/scripts/templates.d.ts
@ -8,7 +8,7 @@ import { Item } from './interfaces/item';
 import { PassedElementType } from './interfaces/passed-element-type';
 declare type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
 declare const templates: {
-    containerOuter({ classNames: { containerOuter } }: TemplateOptions, dir: HTMLElement['dir'], isSelectElement: boolean, isSelectOneElement: boolean, searchEnabled: boolean, passedElementType: PassedElementType): HTMLDivElement;
+    containerOuter({ classNames: { containerOuter } }: TemplateOptions, dir: HTMLElement['dir'], isSelectElement: boolean, isSelectOneElement: boolean, searchEnabled: boolean, passedElementType: PassedElementType, labelId: string): HTMLDivElement;
    containerInner({ classNames: { containerInner }, }: TemplateOptions): HTMLDivElement;
    itemList({ classNames: { list, listSingle, listItems } }: TemplateOptions, isSelectOneElement: boolean): HTMLDivElement;
    placeholder({ allowHTML, classNames: { placeholder } }: TemplateOptions, value: string): HTMLDivElement;
--- a/public/types/src/scripts/templates.d.ts.map
+++ b/public/types/src/scripts/templates.d.ts.map
@ -1 +1 @@
-{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../../../src/scripts/templates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,aAAK,eAAe,GAAG,MAAM,CAAC,YAAY,GAAG,WAAW,EAAE,GAAG,CAAC,CAAC;AAE/D,QAAA,MAAM,SAAS;uDAEyB,eAAe,OAC9C,WAAW,CAAC,KAAK,CAAC,mBACN,OAAO,sBACJ,OAAO,iBACZ,OAAO,qBACH,iBAAiB,GACnC,cAAc;wDA8Bd,eAAe,GAAG,cAAc;8DAOgB,eAAe,sBAC5C,OAAO,GAC1B,cAAc;4DAO6B,eAAe,SACpD,MAAM,GACZ,cAAc;uGAiBZ,eAAe,sGAUf,IAAI,oBACW,OAAO,GACxB,cAAc;yCAmDW,eAAe,sBACrB,OAAO,GAC1B,cAAc;mFAiBZ,eAAe,2BACO,KAAK,GAC7B,cAAc;wHAsCZ,eAAe,qHAUf,MAAM,cACG,MAAM,GACjB,cAAc;kDAqCyB,eAAe,oBACrC,MAAM,GACvB,gBAAgB;sDAmBhB,eAAe,GAAG,cAAc;mFAa9B,eAAe,aACP,MAAM,SACX,YAAY,GAAG,YAAY,GAAG,EAAE,GACrC,cAAc;kEAqBd,IAAI,GAAG,iBAAiB;CAW5B,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../../../../src/scripts/templates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,aAAK,eAAe,GAAG,MAAM,CAAC,YAAY,GAAG,WAAW,EAAE,GAAG,CAAC,CAAC;AAE/D,QAAA,MAAM,SAAS;uDAEyB,eAAe,OAC9C,WAAW,CAAC,KAAK,CAAC,mBACN,OAAO,sBACJ,OAAO,iBACZ,OAAO,qBACH,iBAAiB,WAC3B,MAAM,GACd,cAAc;wDAiCd,eAAe,GAAG,cAAc;8DAOgB,eAAe,sBAC5C,OAAO,GAC1B,cAAc;4DAO6B,eAAe,SACpD,MAAM,GACZ,cAAc;uGAiBZ,eAAe,sGAUf,IAAI,oBACW,OAAO,GACxB,cAAc;yCAmDW,eAAe,sBACrB,OAAO,GAC1B,cAAc;mFAiBZ,eAAe,2BACO,KAAK,GAC7B,cAAc;wHAsCZ,eAAe,qHAUf,MAAM,cACG,MAAM,GACjB,cAAc;kDAqCyB,eAAe,oBACrC,MAAM,GACvB,gBAAgB;sDAmBhB,eAAe,GAAG,cAAc;mFAa9B,eAAe,aACP,MAAM,SACX,YAAY,GAAG,YAAY,GAAG,EAAE,GACrC,cAAc;kEAqBd,IAAI,GAAG,iBAAiB;CAW5B,CAAC;AAEF,eAAe,SAAS,CAAC"}
--- a/src/scripts/choices.ts
+++ b/src/scripts/choices.ts
@ -2140,6 +2140,7 @@ class Choices implements Choices {
        this._isSelectOneElement,
        this.config.searchEnabled,
        this.passedElement.element.type,
+        this.config.labelId,
      ),
      classNames: this.config.classNames,
      type: this.passedElement.element.type as PassedElement['type'],
--- a/src/scripts/defaults.ts
+++ b/src/scripts/defaults.ts
@ -74,6 +74,7 @@ export const DEFAULT_CONFIG: Options = {
  fuseOptions: {
    includeScore: true,
  },
+  labelId: '',
  callbackOnInit: null,
  callbackOnCreateTemplates: null,
  classNames: DEFAULT_CLASSNAMES,
--- a/src/scripts/interfaces/options.ts
+++ b/src/scripts/interfaces/options.ts
@ -453,6 +453,11 @@ export interface Options {
   */
  fuseOptions: Fuse.IFuseOptions<Choices>;

+  /**
+   * ID of the connected label to improve a11y. If set, aria-labeledby will be added.
+   */
+  labelId: string;
+
  /**
   * Function to run once Choices initialises.
   *
--- a/src/scripts/templates.test.ts
+++ b/src/scripts/templates.test.ts
@ -52,6 +52,7 @@ describe('templates', () => {
          const isSelectOneElement = false;
          const searchEnabled = true;
          const passedElementType = 'select-multiple';
+          const labelId = '';

          const expectedOutput = strToEl(`
            <div
@ -72,6 +73,41 @@ describe('templates', () => {
            isSelectOneElement,
            searchEnabled,
            passedElementType,
+            labelId,
+          );
+          expectEqualElements(actualOutput, expectedOutput);
+        });
+      });
+
+      describe('with label id for a11y', () => {
+        it('returns expected html', () => {
+          const isSelectElement = true;
+          const isSelectOneElement = true;
+          const searchEnabled = false;
+          const passedElementType = 'select-one';
+          const labelId = 'testLabelId';
+
+          const expectedOutput = strToEl(`
+            <div
+              class="${options.classNames.containerOuter}"
+              data-type="${passedElementType}"
+              role="listbox"
+              tabindex="0"
+              aria-haspopup="true"
+              aria-expanded="false"
+              aria-labeledby="${labelId}"
+              dir="${direction}"
+              >
+            </div>
+          `);
+          const actualOutput = templates.containerOuter(
+            options,
+            direction,
+            isSelectElement,
+            isSelectOneElement,
+            searchEnabled,
+            passedElementType,
+            labelId,
          );
          expectEqualElements(actualOutput, expectedOutput);
        });
@ -83,6 +119,7 @@ describe('templates', () => {
          const isSelectOneElement = false;
          const searchEnabled = false;
          const passedElementType = 'select-multiple';
+          const labelId = '';

          const expectedOutput = strToEl(`
            <div
@ -102,6 +139,7 @@ describe('templates', () => {
            isSelectOneElement,
            searchEnabled,
            passedElementType,
+            labelId,
          );

          expectEqualElements(actualOutput, expectedOutput);
@ -114,6 +152,7 @@ describe('templates', () => {
          const isSelectOneElement = true;
          const searchEnabled = false;
          const passedElementType = 'select-one';
+          const labelId = '';

          const expectedOutput = strToEl(`
            <div
@ -134,6 +173,7 @@ describe('templates', () => {
            isSelectOneElement,
            searchEnabled,
            passedElementType,
+            labelId,
          );

          expectEqualElements(actualOutput, expectedOutput);
@ -147,6 +187,7 @@ describe('templates', () => {
        const isSelectOneElement = false;
        const searchEnabled = false;
        const passedElementType = 'text';
+        const labelId = '';

        const expectedOutput = strToEl(`
          <div
@ -165,6 +206,7 @@ describe('templates', () => {
          isSelectOneElement,
          searchEnabled,
          passedElementType,
+          labelId,
        );

        expectEqualElements(actualOutput, expectedOutput);
--- a/src/scripts/templates.ts
+++ b/src/scripts/templates.ts
@ -19,6 +19,7 @@ const templates = {
    isSelectOneElement: boolean,
    searchEnabled: boolean,
    passedElementType: PassedElementType,
+    labelId: string,
  ): HTMLDivElement {
    const div = Object.assign(document.createElement('div'), {
      className: containerOuter,
@ -43,6 +44,9 @@ const templates = {

    div.setAttribute('aria-haspopup', 'true');
    div.setAttribute('aria-expanded', 'false');
+    if (labelId) {
+      div.setAttribute('aria-labeledby', labelId);
+    }

    return div;
  },