Add option labelId to improve a11y

README.md

@@ -178,6 +178,7 @@ Or include Choices directly:
     fuseOptions: {
       include: 'score'
     },
+    labelId: '',
     callbackOnInit: null,
     callbackOnCreateTemplates: null
   });
@@ -573,6 +574,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

@@ -1,4 +1,4 @@
-/*! choices.js v9.0.1 | © 2019 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
+/*! choices.js v9.0.1 | © 2021 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();
@@ -184,6 +184,7 @@ exports.DEFAULT_CONFIG = {
   fuseOptions: {
     includeScore: true
   },
+  labelId: '',
   callbackOnInit: null,
   callbackOnCreateTemplates: null,
   classNames: exports.DEFAULT_CLASSNAMES
@@ -3318,7 +3319,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
@@ -3577,7 +3578,7 @@ function () {
   };
 
   Choices.prototype._generatePlaceholderValue = function () {
-    if (this._isSelectElement) {
+    if (this._isSelectElement && this.passedElement.placeholderOption) {
       var placeholderOption = this.passedElement.placeholderOption;
       return placeholderOption ? placeholderOption.text : null;
     }
@@ -5122,7 +5123,7 @@ Object.defineProperty(exports, "__esModule", {
  */
 
 var templates = {
-  containerOuter: function containerOuter(_a, dir, isSelectElement, isSelectOneElement, searchEnabled, passedElementType) {
+  containerOuter: function containerOuter(_a, dir, isSelectElement, isSelectOneElement, searchEnabled, passedElementType, labelId) {
     var containerOuter = _a.containerOuter;
     var div = Object.assign(document.createElement('div'), {
       className: containerOuter
@@ -5147,6 +5148,11 @@ var templates = {
 
     div.setAttribute('aria-haspopup', 'true');
     div.setAttribute('aria-expanded', 'false');
+
+    if (labelId) {
+      div.setAttribute('aria-labeledby', labelId);
+    }
+
     return div;
   },
   containerInner: function containerInner(_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"
@@ -783,6 +789,7 @@ <h2>Form interaction</h2>
 
         var singleNoSorting = new Choices('#choices-single-no-sorting', {
           shouldSort: false,
+          labelId: 'choices-single-no-sorting-label',
         });
 
         var cities = new Choices(document.getElementById('cities'));

src/scripts/choices.ts

@@ -2107,6 +2107,7 @@ class 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'],

src/scripts/constants.ts

@@ -78,6 +78,7 @@ export const DEFAULT_CONFIG: Options = {
   fuseOptions: {
     includeScore: true,
   },
+  labelId: '',
   callbackOnInit: null,
   callbackOnCreateTemplates: null,
   classNames: DEFAULT_CLASSNAMES,

src/scripts/interfaces.ts

@@ -692,6 +692,11 @@ export interface Options {
    */
   fuseOptions: FuseOptions<Choice>;
 
+  /**
+   * ID of the connected label to improve a11y. If set, aria-labeledby will be added.
+   */
+  labelId: string;
+
   /**
    * Function to run once Choices initialises.
    *

src/scripts/templates.test.ts

@@ -35,6 +35,7 @@ describe('templates', () => {
           const isSelectOneElement = false;
           const searchEnabled = true;
           const passedElementType = 'select-multiple';
+          const labelId = '';
 
           const expectedOutput = strToEl(`
             <div
@@ -55,6 +56,7 @@ describe('templates', () => {
             isSelectOneElement,
             searchEnabled,
             passedElementType,
+            labelId,
           );
           expectEqualElements(actualOutput, expectedOutput);
         });
@@ -66,6 +68,7 @@ describe('templates', () => {
           const isSelectOneElement = false;
           const searchEnabled = false;
           const passedElementType = 'select-multiple';
+          const labelId = '';
 
           const expectedOutput = strToEl(`
             <div
@@ -85,6 +88,7 @@ describe('templates', () => {
             isSelectOneElement,
             searchEnabled,
             passedElementType,
+            labelId,
           );
 
           expectEqualElements(actualOutput, expectedOutput);
@@ -97,6 +101,7 @@ describe('templates', () => {
           const isSelectOneElement = true;
           const searchEnabled = false;
           const passedElementType = 'select-one';
+          const labelId = '';
 
           const expectedOutput = strToEl(`
             <div
@@ -117,6 +122,7 @@ describe('templates', () => {
             isSelectOneElement,
             searchEnabled,
             passedElementType,
+            labelId,
           );
 
           expectEqualElements(actualOutput, expectedOutput);
@@ -130,6 +136,7 @@ describe('templates', () => {
         const isSelectOneElement = false;
         const searchEnabled = false;
         const passedElementType = 'text';
+        const labelId = '';
 
         const expectedOutput = strToEl(`
           <div
@@ -148,6 +155,7 @@ describe('templates', () => {
           isSelectOneElement,
           searchEnabled,
           passedElementType,
+          labelId,
         );
 
         expectEqualElements(actualOutput, expectedOutput);

src/scripts/templates.ts

@@ -13,6 +13,7 @@ const templates = {
     isSelectOneElement: boolean,
     searchEnabled: boolean,
     passedElementType: PassedElement['type'],
+    labelId: string,
   ): HTMLDivElement {
     const div = Object.assign(document.createElement('div'), {
       className: containerOuter,
@@ -37,6 +38,9 @@ const templates = {
 
     div.setAttribute('aria-haspopup', 'true');
     div.setAttribute('aria-expanded', 'false');
+    if (labelId) {
+      div.setAttribute('aria-labeledby', labelId);
+    }
 
     return div;
   },