Merge branch 'accessibility/combo-box' of https://github.com/Refiniti…

…v/refinitiv-ui into accessibility/combo-box
Refinitiv · Dec 14, 2021 · 22a3ecc · 22a3ecc
2 parents 27987c8 + 5b30826
commit 22a3ecc
Show file tree

Hide file tree

Showing 13 changed files with 34 additions and 40 deletions.
diff --git a/packages/elemental-theme/src/custom-elements/ef-combo-box.less b/packages/elemental-theme/src/custom-elements/ef-combo-box.less
@@ -35,10 +35,6 @@
     justify-content: center;
     align-items: center;
     flex: none;
-    &:focus-visible {
-      outline: none;
-      color: @input-focused-border-color;
-    }
   }
 
   [part=list] {

diff --git a/packages/elements/src/combo-box/__snapshots__/AsyncFilter.md b/packages/elements/src/combo-box/__snapshots__/AsyncFilter.md
@@ -11,6 +11,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -54,6 +55,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"

diff --git a/packages/elements/src/combo-box/__snapshots__/Filter.md b/packages/elements/src/combo-box/__snapshots__/Filter.md
@@ -12,6 +12,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -77,6 +78,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"

diff --git a/packages/elements/src/combo-box/__snapshots__/Selected.md b/packages/elements/src/combo-box/__snapshots__/Selected.md
@@ -12,6 +12,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -85,6 +86,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -158,6 +160,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -232,6 +235,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <ef-counter
     max="999"
@@ -316,6 +320,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -393,6 +398,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"

diff --git a/packages/elements/src/combo-box/__snapshots__/Template.md b/packages/elements/src/combo-box/__snapshots__/Template.md
@@ -11,6 +11,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -36,6 +37,7 @@
     part="input"
     placeholder="Placeholder"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -59,6 +61,7 @@
     part="input"
     placeholder="New Placeholder"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -81,6 +84,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -106,6 +110,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -177,6 +182,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -247,6 +253,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -319,6 +326,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -391,6 +399,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"

diff --git a/packages/elements/src/combo-box/__snapshots__/Value.md b/packages/elements/src/combo-box/__snapshots__/Value.md
@@ -12,6 +12,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -85,6 +86,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -158,6 +160,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -232,6 +235,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -307,6 +311,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <ef-counter
     max="999"
@@ -391,6 +396,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"
@@ -468,6 +474,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"

diff --git a/packages/elements/src/combo-box/index.ts b/packages/elements/src/combo-box/index.ts
@@ -411,7 +411,7 @@ export class ComboBox<T extends DataItem = ItemData> extends FormFieldElement {
    * Value of the list item that being highlight.
    * Using for defined aria-activedescendant for accessibility
    */
-  private highlightedItemValue: string | null = null
+  private highlightedItemValue: string | null = null;
 
   /**
    * Use to call request update when CC changes its value
@@ -1017,27 +1017,6 @@ export class ComboBox<T extends DataItem = ItemData> extends FormFieldElement {
     this.onInputWrapperTap();
   }
 
-  /**
-   * Handles keydown on clear button
-   * @param event Key down event object
-   * @returns {void}
-   */
-  protected onClearButtonKeydown (event: KeyboardEvent): void {
-    if (this.readonly) {
-      return;
-    }
-    switch (event.key) {
-      case ' ':
-      case 'Enter':
-      case 'Spacebar':
-        this.onClearsButtonTap();
-        break;
-      default:
-        return;
-    }
-    event.preventDefault();
-  }
-
   /**
    * Run when tap event happens on toggle button
    * @returns {void}
@@ -1226,10 +1205,6 @@ export class ComboBox<T extends DataItem = ItemData> extends FormFieldElement {
         <div
           id="clears-button"
           part="button button-clear"
-          tabindex="0"
-          role="button"
-          aria-label="${this.t('CLEAR')}"
-          @keydown=${this.onClearButtonKeydown}
           ?hidden=${!this.label && !this.query && !this.freeTextValue && !this.inputText}><ef-icon part="icon icon-clear" icon="cross"></ef-icon>
         </div>
       `;
@@ -1312,6 +1287,7 @@ export class ComboBox<T extends DataItem = ItemData> extends FormFieldElement {
     return {
       ...super.decorateInputMap,
       'part': 'input',
+      'type': 'text',
       'role': 'combobox',
       '.value': this.focused ? this.inputText : this.freeTextValue || this.label,
       'aria-expanded': this.opened ? 'true' : 'false',

diff --git a/packages/elements/src/tree-select/__snapshots__/TreeSelect.md b/packages/elements/src/tree-select/__snapshots__/TreeSelect.md
@@ -11,6 +11,7 @@
     autocomplete="off"
     part="input"
     role="combobox"
+    type="text"
   >
   <div
     id="toggle-button"

diff --git a/packages/phrasebook/src/locale/de/combo-box.ts b/packages/phrasebook/src/locale/de/combo-box.ts
@@ -3,8 +3,7 @@ import './shared.js';
 
 const translations = {
   MULTIPLE_ITEMS: 'Mehrere Objekte',
-  NO_OPTIONS: 'Keine Ergebnisse',
-  CLEAR: 'Clear'
+  NO_OPTIONS: 'Keine Ergebnisse'
 };
 
 Phrasebook.define('de', 'ef-combo-box', translations);

diff --git a/packages/phrasebook/src/locale/en/combo-box.ts b/packages/phrasebook/src/locale/en/combo-box.ts
@@ -3,8 +3,7 @@ import './shared.js';
 
 const translations = {
   MULTIPLE_ITEMS: 'Multiple items',
-  NO_OPTIONS: 'No results found.',
-  CLEAR: 'Clear'
+  NO_OPTIONS: 'No results found.'
 };
 
 Phrasebook.define('en', 'ef-combo-box', translations);

diff --git a/packages/phrasebook/src/locale/ja/combo-box.ts b/packages/phrasebook/src/locale/ja/combo-box.ts
@@ -3,8 +3,7 @@ import './shared.js';
 
 const translations = {
   MULTIPLE_ITEMS: '複数項目',
-  NO_OPTIONS: '該当する結果はありません。',
-  CLEAR: 'Clear'
+  NO_OPTIONS: '該当する結果はありません。'
 };
 
 Phrasebook.define('ja', 'ef-combo-box', translations);

diff --git a/packages/phrasebook/src/locale/zh-hant/combo-box.ts b/packages/phrasebook/src/locale/zh-hant/combo-box.ts
@@ -3,8 +3,7 @@ import './shared.js';
 
 const translations = {
   MULTIPLE_ITEMS: '多項',
-  NO_OPTIONS: '未找到結果。',
-  CLEAR: 'Clear'
+  NO_OPTIONS: '未找到結果。'
 };
 
 Phrasebook.define('zh-Hant', 'ef-combo-box', translations);

diff --git a/packages/phrasebook/src/locale/zh/combo-box.ts b/packages/phrasebook/src/locale/zh/combo-box.ts
@@ -3,8 +3,7 @@ import './shared.js';
 
 const translations = {
   MULTIPLE_ITEMS: '多项',
-  NO_OPTIONS: '未找到结果。',
-  CLEAR: 'Clear'
+  NO_OPTIONS: '未找到结果。'
 };
 
 Phrasebook.define('zh', 'ef-combo-box', translations);