feat: add tabIndex option to button.ms-choice (#467)

Author: ghiscoding

packages/demo/src/app-routing.ts

@@ -73,6 +73,7 @@ import Options40 from './options/options40.js';
 import Options41 from './options/options41.js';
 import Options42 from './options/options42.js';
 import Options43 from './options/options43.js';
+import Options44 from './options/options44.js';
 
 export const navbarRouting = [
   { name: 'getting-started', view: '/src/getting-started.html', viewModel: GettingStarted, title: 'Getting Started' },
@@ -147,6 +148,7 @@ export const exampleRouting = [
       { name: 'options41', view: '/src/options/options41.html', viewModel: Options41, title: 'Pre-Sort Data' },
       { name: 'options42', view: '/src/options/options42.html', viewModel: Options42, title: 'Lazy Load Data' },
       { name: 'options43', view: '/src/options/options43.html', viewModel: Options43, title: 'Close on Tab' },
+      { name: 'options44', view: '/src/options/options44.html', viewModel: Options44, title: 'tabIndex' },
     ],
   },
   {

packages/demo/src/options/options44.html

@@ -0,0 +1,36 @@
+<div class="row mb-2">
+  <div class="col-md-12 title-desc">
+    <h2 class="bd-title">
+      tabindex <small>(for accessibility)</small>
+      <span class="float-end links">
+        Code <span class="fa fa-link"></span>
+        <span class="small">
+          <a target="_blank" href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/demo/src/options/options39.html"
+            >html</a
+          >
+          |
+          <a target="_blank" href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/packages/demo/src/options/options39.ts"
+            >ts</a
+          >
+        </span>
+      </span>
+    </h2>
+    <div class="demo-subtitle">
+      For accessibility reason we could add a <code>tabIndex</code>option to the button with the <code>.ms-choice</code>select button.
+    </div>
+  </div>
+</div>
+
+<div>
+  <div class="mb-10">
+    <label class="mb-2" for="custom-label">tabIndex = 0</label>
+  </div>
+  <div class="mb-10">
+    <select class="col-sm-8">
+      <option value="1">First</option>
+      <option value="2">Second</option>
+      <option value="3">Third</option>
+      <option value="4">Fourth</option>
+    </select>
+  </div>
+</div>

packages/demo/src/options/options44.ts

@@ -0,0 +1,17 @@
+import { type MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla';
+
+export default class Example {
+  ms1?: MultipleSelectInstance;
+
+  mount() {
+    this.ms1 = multipleSelect('select', {
+      tabIndex: 0,
+    }) as MultipleSelectInstance;
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms1?.destroy();
+    this.ms1 = undefined;
+  }
+}

packages/multiple-select-vanilla/src/MultipleSelectInstance.ts

@@ -214,6 +214,10 @@ export class MultipleSelectInstance {
       this.choiceElm.setAttribute('aria-labelledby', this.options.labelId);
     }
 
+    if (this.options.tabIndex !== undefined) {
+      this.choiceElm.tabIndex = this.options.tabIndex;
+    }
+
     this.choiceElm.appendChild(createDomElement('span', { className: 'ms-placeholder', textContent: this.options.placeholder }));
 
     if (this.options.showClear) {

packages/multiple-select-vanilla/src/models/multipleSelectOption.interface.ts

@@ -247,6 +247,9 @@ export interface MultipleSelectOption extends MultipleSelectLocale {
   /** Display the OK button at bottom of the list when using multiple selection to easily close the drop, defaults to false. */
   showOkButton?: boolean;
 
+  /** add a tabIndex to the "ms-choice" button, no default */
+  tabIndex?: number;
+
   /** Defaults to False, when set to True it will use the <option label=""> (from select option value) that can be used to display selected options. */
   useSelectOptionLabel?: boolean;
 

playwright/e2e/options44.spec.ts

@@ -0,0 +1,10 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Options 44 - tabIndex', () => {
+  test('adding a tabindex to the select button', async ({ page }) => {
+    await page.goto('#/options44');
+
+    const msChoice = await page.locator('.ms-choice');
+    await expect(msChoice).toHaveAttribute('tabindex', '0');
+  });
+});