fix(ui5-input): Announce selected item #1578
Conversation
…/ui5-webcomponents into input-announce-selected-item
| @@ -831,6 +833,14 @@ class Input extends UI5Element { | |||
| }; | |||
| } | |||
|
|
|||
| get itemSelectionAnnounce() { | |||
There was a problem hiding this comment.
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
packages/main/src/Input.js
Outdated
| @@ -831,6 +831,10 @@ class Input extends UI5Element { | |||
| }; | |||
| } | |||
|
|
|||
| get itemSelectionAnnounce() { | |||
| return this.Suggestions.selectedItemIndex !== null ? this.Suggestions.itemSelectionAnnounce : undefined; | |||
There was a problem hiding this comment.
I think you have to check if this.Suggestions is present, because it is undefined if "showSuggestions" is false.
|
With the current implementation, when we try to close the popover using "Escape" key, the "_showListAnnouncement" property is removed, which triggers the control's re-rendering and the "shouldOpenSuggestions" method returns "true" which leads to re-opening of the popover. Either we need to extend the "shouldOpenSuggestions" logic or think of a different approach. |
…announce-selected-item
|
@ivoplashkov The state of a component should be completely deterministic. This means that whenever all values are the same (state is the same), the component should look exactly the same way too. If something differs, depending on open/closed popup, then there is "hidden" state that is not accounted for, therefore you get problems when you invalidate the component. Introduce new state, if necessary, so that each invalidation is non-breaking. |
|
Approved from ACC side. |
| @@ -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> | |||
There was a problem hiding this comment.
bind a new private metadata state property here,inside the span, f.e. {{_announcementText}}
don't forget to declare it in metadata
| @@ -798,6 +801,16 @@ class Input extends UI5Element { | |||
| }; | |||
| } | |||
|
|
|||
| _announceSelectedItem() { | |||
There was a problem hiding this comment.
In this function change the value of the new property. This will invalidate and set it. Don't manipulate DOM directly.
FIXES:#1306