Skip to content

feat(ui5-multicombobox): Implement latest accessibility spec #1564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 4, 2020
Merged

feat(ui5-multicombobox): Implement latest accessibility spec #1564

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d88e247
feat(ui5-multicombobox): Implement latest accessibility spec
ivoplashkov Apr 29, 2020
c872f87
fix token selection
ivoplashkov Apr 29, 2020
62b543e
fix aria-describedby
ivoplashkov Apr 30, 2020
352eb6c
Merge branch 'master' of github.com:SAP/ui5-webcomponents into multic…
ivoplashkov May 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/main/src/ComboBox.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
?pressed="{{_iconPressed}}"
@click="{{_arrowClick}}"
dir="{{dir}}"
accessibleName="{{_iconAccessibleNameText}}"
accessible-name="{{_iconAccessibleNameText}}"
></ui5-icon>
{{/unless}}
</div>
11 changes: 6 additions & 5 deletions packages/main/src/MultiComboBox.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
<div class="ui5-multi-combobox-root"
@focusin={{rootFocusIn}}
@focusout={{rootFocusOut}}
role="combobox"
aria-haspopup="listbox"
aria-expanded="{{open}}"
>
<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{nMoreCountText}}</span>

{{#if hasValueState}}
<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
{{/if}}

<ui5-tokenizer slot="_beginContent"
show-more
class="ui5-multi-combobox-tokenizer"
Expand Down Expand Up @@ -50,6 +47,9 @@
@focusin="{{_focusin}}"
@focusout="{{_focusout}}"
@click={{_click}}
role="combobox"
aria-haspopup="listbox"
aria-expanded="{{open}}"
aria-autocomplete="both"
aria-labelledby="{{_id}}-hiddenText-nMore"
aria-describedby="{{_id}}-valueStateDesc"
Expand All @@ -63,6 +63,7 @@
@click={{_showAllItemsPopover}}
?pressed="{{_iconPressed}}"
dir="{{dir}}"
accessible-name="{{_iconAccessibleNameText}}"
></ui5-icon>
{{/unless}}
</div>
5 changes: 5 additions & 0 deletions packages/main/src/MultiComboBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
TOKENIZER_ARIA_CONTAIN_ONE_TOKEN,
TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS,
INPUT_SUGGESTIONS_TITLE,
ICON_ACCESSIBLE_NAME,
} from "./generated/i18n/i18n-defaults.js";

// Templates
Expand Down Expand Up @@ -695,6 +696,10 @@ class MultiComboBox extends UI5Element {
return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
}

get _iconAccessibleNameText() {
return this.i18nBundle.getText(ICON_ACCESSIBLE_NAME);
}

static async onDefine() {
await Promise.all([
MultiComboBoxItem.define(),
Expand Down
2 changes: 2 additions & 0 deletions packages/main/src/Token.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ class Token extends UI5Element {

_select() {
this.fireEvent("select");
this.selected = true;
}

_delete() {
Expand All @@ -152,6 +153,7 @@ class Token extends UI5Element {

if (isEnter(event) || isSpace(event)) {
this.fireEvent("select", {});
this.selected = true;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When is this set to false?

}
}

Expand Down
4 changes: 4 additions & 0 deletions packages/main/src/themes/Token.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,10 @@
white-space: nowrap;
}

:host([selected]) .ui5-token--icon {
color: var(--sapButton_Selected_TextColor);
}

.ui5-token--icon {
color: inherit;
cursor: pointer;
Expand Down