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>

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:**

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) {

public/index.html

@@ -288,7 +288,9 @@ <h2>Multiple select input</h2>
         <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 @@ <h2>Single select input</h2>
           >
         </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 @@ <h2>Form interaction</h2>
         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 });

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.
      *