Skip to content

fix(ui5-input): Announce selected item #1578

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 13 commits into from
May 26, 2020
Merged

fix(ui5-input): Announce selected item #1578

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
a845713
fix(ui5-input): Announce selected item
ivoplashkov May 5, 2020
ed72225
fix(ui5-input): Announce selected item
ivoplashkov May 5, 2020
96f0f9f
Merge branch 'input-announce-selected-item' of github.com:ivoplashkov…
ivoplashkov May 5, 2020
e0dac3c
fix eslint errors
ivoplashkov May 5, 2020
87bd0f2
move logic to suggestions
ivoplashkov May 6, 2020
10e5b3c
remove onDefine
ivoplashkov May 7, 2020
9b8609a
announce when navigating through items
ivoplashkov May 8, 2020
0c84432
Merge branch 'master' of github.com:SAP/ui5-webcomponents into input-…
ivoplashkov May 8, 2020
d66a868
invisible text is now cleared when the popover is closed
ivoplashkov May 12, 2020
c9599a7
Merge branch 'master' of github.com:SAP/ui5-webcomponents into input-…
ivoplashkov May 12, 2020
42d267f
fix issue
ivoplashkov May 18, 2020
5f6a3b3
Merge branch 'master' of github.com:SAP/ui5-webcomponents into input-…
ivoplashkov May 18, 2020
6f72620
fix eslint error
ivoplashkov May 18, 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
1 change: 1 addition & 0 deletions packages/main/src/Input.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@

{{#if showSuggestions}}
<span id="{{_id}}-suggestionsText" class="ui5-hidden-text">{{suggestionsText}}</span>
<span id="{{_id}}-selectionText" class="ui5-hidden-text" aria-live="polite" role="status"></span>
Copy link
Contributor

Choose a reason for hiding this comment

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

bind a new private metadata state property here,inside the span, f.e. {{_announcementText}}
don't forget to declare it in metadata

{{/if}}

{{#if accInfo.input.ariaDescription}}
Expand Down
17 changes: 17 additions & 0 deletions packages/main/src/Input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -623,6 +623,8 @@ class Input extends UI5Element {
}

_afterClosePopover() {
this._announceSelectedItem();

// close device's keyboard and prevent further typing
if (isPhone()) {
this.blur();
Expand Down Expand Up @@ -707,6 +709,7 @@ class Input extends UI5Element {
previewSuggestion(item) {
this.valueBeforeItemSelection = this.value;
this.value = item.group ? "" : item.textContent;
this._announceSelectedItem();
}

async fireEventByAction(action) {
Expand Down Expand Up @@ -798,6 +801,16 @@ class Input extends UI5Element {
};
}

_announceSelectedItem() {
Copy link
Contributor

Choose a reason for hiding this comment

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

In this function change the value of the new property. This will invalidate and set it. Don't manipulate DOM directly.

const invisibleText = this.shadowRoot.querySelector(`#${this._id}-selectionText`);

if (this.Suggestions && this.Suggestions._isItemOnTarget()) {
invisibleText.textContent = this.itemSelectionAnnounce;
} else {
invisibleText.textContent = "";
}
}

get _readonly() {
return this.readonly && !this.disabled;
}
Expand Down Expand Up @@ -837,6 +850,10 @@ class Input extends UI5Element {
};
}

get itemSelectionAnnounce() {
Copy link
Contributor

Choose a reason for hiding this comment

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

This code logically belongs to InputSuggestions.js. The clue to this is that you don't actually use the state of Input.js, but refer to this.Suggestions for everything inside. Move it there, and in this method, if suggestions are imported by the user, just return a method call to suggestions

return this.Suggestions ? this.Suggestions.itemSelectionAnnounce : undefined;
}

get classes() {
return {
popoverValueState: {
Expand Down
29 changes: 29 additions & 0 deletions packages/main/src/features/InputSuggestions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";

import List from "../List.js";
import ResponsivePopover from "../ResponsivePopover.js";
import "../SuggestionItem.js";

import {
LIST_ITEM_POSITION,
LIST_ITEM_SELECTED,
} from "../generated/i18n/i18n-defaults.js";
/**
* A class to manage the <code>Input</code suggestion items.
*
Expand All @@ -29,6 +34,10 @@ class Suggestions {
// An integer value to store the currently selected item position,
// that changes due to user interaction.
this.selectedItemIndex = null;

this.i18nBundle = getI18nBundle("@ui5/webcomponents");

this.accInfo = {};
}

/* Public methods */
Expand Down Expand Up @@ -115,6 +124,12 @@ class Suggestions {

this.selectedItemIndex = this._getItems().indexOf(item);

this.accInfo = {
currentPos: this.selectedItemIndex + 1,
listSize: this._getItems().length,
itemText: item.textContent,
};

this._getComponent().onItemSelected(this._getRealItems()[this.selectedItemIndex], keyboardUsed);
item.selected = false;
this.close();
Expand Down Expand Up @@ -220,6 +235,12 @@ class Suggestions {
const currentItem = items[nextIdx];
const previousItem = items[previousIdx];

this.accInfo = {
currentPos: nextIdx + 1,
listSize: items.length,
itemText: currentItem.textContent,
};

if (previousItem) {
previousItem.selected = false;
}
Expand Down Expand Up @@ -292,6 +313,14 @@ class Suggestions {
this.responsivePopover = staticAreaItem.querySelector("ui5-responsive-popover");
return this.responsivePopover;
}

get itemSelectionAnnounce() {
const i18nBundle = this.i18nBundle,
itemPositionText = i18nBundle.getText(LIST_ITEM_POSITION, [this.accInfo.currentPos], [this.accInfo.listSize]),
itemSelectionText = i18nBundle.getText(LIST_ITEM_SELECTED);

return `${itemPositionText} ${this.accInfo.itemText} ${itemSelectionText}`;
}
}

Suggestions.SCROLL_STEP = 48;
Expand Down
6 changes: 6 additions & 0 deletions packages/main/src/i18n/messagebundle.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,12 @@ LINK_SUBTLE=Subtle
#XFLD: Emphasized link description label
LINK_EMPHASIZED=Emphasized

#XACT: ARIA announcement for the position of the list items in an entire list
LIST_ITEM_POSITION=List item {0} of {1}

#XACT: ARIA announcement for the list item selection.
LIST_ITEM_SELECTED=Is Selected

#XTOL: Tooltip of messgae strip close button
MESSAGE_STRIP_CLOSE_BUTTON=Message Strip Close

Expand Down