Skip to content

Commit

Permalink
fix(ui5-input): Suggestions count is read out when expected (#3127)
Browse files Browse the repository at this point in the history
On accessing the ui5-input web component, the suggestions count should not be read out.
It is expected to be read out, once the suggestions are opened or after entering a value.

FIXES: #3051
  • Loading branch information
niyap authored Apr 9, 2021
1 parent a2c8fce commit 76ec379
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 9 deletions.
8 changes: 2 additions & 6 deletions packages/main/src/Input.js
Original file line number Diff line number Diff line change
Expand Up @@ -1080,14 +1080,10 @@ class Input extends UI5Element {
return this.hasValueState ? `${this._id}-valueStateDesc` : "";
}

get suggestionsCount() {
return this.showSuggestions ? `${this._id}-suggestionsCount` : "";
}

get accInfo() {
const ariaHasPopupDefault = this.showSuggestions ? "true" : undefined;
const ariaAutoCompleteDefault = this.showSuggestions ? "list" : undefined;
const ariaDescribedBy = this._inputAccInfo.ariaDescribedBy ? `${this.suggestionsTextId} ${this.valueStateTextId} ${this.suggestionsCount} ${this._inputAccInfo.ariaDescribedBy}`.trim() : `${this.suggestionsTextId} ${this.valueStateTextId} ${this.suggestionsCount}`.trim();
const ariaDescribedBy = this._inputAccInfo.ariaDescribedBy ? `${this.suggestionsTextId} ${this.valueStateTextId} ${this._inputAccInfo.ariaDescribedBy}`.trim() : `${this.suggestionsTextId} ${this.valueStateTextId}`.trim();

return {
"input": {
Expand Down Expand Up @@ -1200,7 +1196,7 @@ class Input extends UI5Element {
}

get availableSuggestionsCount() {
if (this.showSuggestions) {
if (this.showSuggestions && (this.value || this.Suggestions.isOpened())) {
switch (this.suggestionsTexts.length) {
case 0:
return this.i18nBundle.getText(INPUT_SUGGESTIONS_NO_HIT);
Expand Down
2 changes: 1 addition & 1 deletion packages/main/src/MultiInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -280,7 +280,7 @@ class MultiInput extends Input {
}

get accInfo() {
const ariaDescribedBy = `${this._tokensCountTextId} ${this.suggestionsTextId} ${this.valueStateTextId} ${this.suggestionsCount}`.trim();
const ariaDescribedBy = `${this._tokensCountTextId} ${this.suggestionsTextId} ${this.valueStateTextId}`.trim();
return {
"input": {
...super.accInfo.input,
Expand Down
28 changes: 28 additions & 0 deletions packages/main/test/specs/Input.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -458,4 +458,32 @@ describe("Input general interaction", () => {
assert.notOk(popover.isDisplayedInViewport(), "The popover is not visible");
assert.ok(dialog.isDisplayedInViewport(), "The dialog is opened.");
});

it("Suggestions count should be read out when necessary", () => {
browser.url(`http://localhost:${PORT}/test-resources/pages/Input.html`);

const inputDynamicSuggestions = $("#inputCompact");
const inputSuggestions = $("#myInput2");
const dynamicSuggestionsInnerInput = inputDynamicSuggestions.shadow$("input");
const dynamicSuggestionsCount = inputDynamicSuggestions.shadow$(`#${inputDynamicSuggestions.getProperty("_id")}-suggestionsCount`);
const suggestionsCount = inputSuggestions.shadow$(`#${inputSuggestions.getProperty("_id")}-suggestionsCount`);

//act
dynamicSuggestionsInnerInput.click();

//assert
assert.strictEqual(dynamicSuggestionsCount.getText(), "", "Suggestions count is not available");

//act
dynamicSuggestionsInnerInput.keys("c");

//assert
assert.strictEqual(dynamicSuggestionsCount.getText(), "4 results are available", "Suggestions count is available since value is entered");
dynamicSuggestionsInnerInput.keys("Backspace");
//act
inputSuggestions.click();

//assert
assert.strictEqual(suggestionsCount.getText(), "5 results are available", "Suggestions count is available since the suggestions popover is opened");
});
});
3 changes: 1 addition & 2 deletions packages/main/test/specs/MultiInput.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -175,8 +175,7 @@ describe("ARIA attributes", () => {
const innerInput = mi.shadow$("input");
const tokensCountITextId = `${mi.getProperty("_id")}-hiddenText-nMore`;
const suggestionsITextId = `${mi.getProperty("_id")}-suggestionsText`;
const suggestionsCountITextId = `${mi.getProperty("_id")}-suggestionsCount`;
const ariaDescribedBy = `${tokensCountITextId} ${suggestionsITextId} ${suggestionsCountITextId}`;
const ariaDescribedBy = `${tokensCountITextId} ${suggestionsITextId}`;

$("#suggestion-token").scrollIntoView();
innerInput.click();
Expand Down

0 comments on commit 76ec379

Please sign in to comment.