From 42be8fab3bed05c9fdb6580ead3c65324ef0fbc3 Mon Sep 17 00:00:00 2001 From: Jidapa-Pai Date: Tue, 14 Dec 2021 17:38:37 +0700 Subject: [PATCH 1/2] fix(combo-box): remove focusable clear button --- .../src/custom-elements/ef-combo-box.less | 4 --- packages/elements/src/combo-box/index.ts | 29 ++----------------- .../phrasebook/src/locale/de/combo-box.ts | 3 +- .../phrasebook/src/locale/en/combo-box.ts | 3 +- .../phrasebook/src/locale/ja/combo-box.ts | 3 +- .../src/locale/zh-hant/combo-box.ts | 3 +- .../phrasebook/src/locale/zh/combo-box.ts | 3 +- 7 files changed, 7 insertions(+), 41 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 index b3a1afc010..3a4edefe19 100644 --- 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/index.ts b/packages/elements/src/combo-box/index.ts index bf7d0069cc..9b88e78667 100644 --- a/packages/elements/src/combo-box/index.ts +++ b/packages/elements/src/combo-box/index.ts @@ -410,7 +410,7 @@ export class ComboBox 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,28 +1017,6 @@ export class ComboBox 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} @@ -1227,10 +1205,6 @@ export class ComboBox extends FormFieldElement {
`; @@ -1313,6 +1287,7 @@ export class ComboBox 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/phrasebook/src/locale/de/combo-box.ts b/packages/phrasebook/src/locale/de/combo-box.ts index e37dee3c13..fbf1daea29 100644 --- 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 index 2d01d74586..515df1abaa 100644 --- 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 index 71ec5c62c2..d7c2b7afc1 100644 --- 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 index adec475e7f..0194ef15a7 100644 --- 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 index 8c33ddf876..8f81cf7621 100644 --- 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); From 5b30826852fea86e3e41005bd342d5b52a48d23d Mon Sep 17 00:00:00 2001 From: Jidapa-Pai Date: Tue, 14 Dec 2021 17:57:54 +0700 Subject: [PATCH 2/2] test(combo-box): update snapshots --- .../elements/src/combo-box/__snapshots__/AsyncFilter.md | 2 ++ packages/elements/src/combo-box/__snapshots__/Filter.md | 2 ++ .../elements/src/combo-box/__snapshots__/Selected.md | 6 ++++++ .../elements/src/combo-box/__snapshots__/Template.md | 9 +++++++++ packages/elements/src/combo-box/__snapshots__/Value.md | 7 +++++++ .../elements/src/tree-select/__snapshots__/TreeSelect.md | 1 + 6 files changed, 27 insertions(+) diff --git a/packages/elements/src/combo-box/__snapshots__/AsyncFilter.md b/packages/elements/src/combo-box/__snapshots__/AsyncFilter.md index 4e8eff8d0d..790bb893eb 100644 --- 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" >