a11y: update the aria-label and placeholder in search box

[lei9444]

Description

test in narrator and nvda
Previously, the reader would say 'Filter dialog. Filter dialog'
Now, the reader says 'Type dialog name, Filter Dialog'

Task Item

refs #2054

Screenshots

[github-actions]

Coverage remained the same at 41.458% when pulling 58e4839ccce10852eabc8aac68f200d589778e26 on lei9444:fixa11y1 into a056f53 on microsoft:master.

[corinagum]

@DesignPolice could you take a look?

[DesignPolice]

Hi @corinagum and @lei9444

Ya looks like this one slipped into the production path - @mareekuh didn't want to swap to a ComboBox on this one as it does not match expected interaction pattern for either combo or filter control.

We have an alternative in mind to use the Global Search with some limitations to search only in the app.

The new figma design flow is here:
https://www.figma.com/file/LlTlh5vXwq91zjGnFtrUUR6l/Composer-master-design-spec-UI-library?node-id=1123%3A20058

Happy to start a conversation on how best or when best to implement this, in regard to the a11y timeframes

Thanks a bunch

[corinagum]

Thanks DesignPolice. it looks like this will need further discussion.

@lei9444, I think your previous PR was very close to a working intermediary fix that we can use until the decision on dialog filter has been completed. If I recall correctly, I believe you changed the ariaLabel from 'Filter dialog' to 'Search box', but since there were repeats, maybe you can remove the ariaLabel and see if that produces 'Search box. Filter dialog' instead. What do you think? Let me know if you have any questions.

@mareekuh and @cwhitten I think the above paragraph should be sufficient to fix this a11y bug without changing surface area until the UX change (if any) is finalized. During design, I recommend involving the a11y audit team so they can chime in before the spec is finalized.

[corinagum]

For now, let's continue working on the fix you had in the previous PR.

[mareekuh]

@cwhitten - Apologies for the misunderstanding. The design to address the accessibility issues and keep the desired behavior is located here: https://www.figma.com/file/LlTlh5vXwq91zjGnFtrUUR6l/Composer-master-design-spec-%2F-UI-library?node-id=1123%3A19432. It's been up there for a while but we have had areas of higher priority to review in our meetings (publish, skills manifest etc).

Expected look & feel + behavior:

1. the search box is located at the top of the frame, centered in the header/chrome.
2. the scope of the search/filter is set to the current view, in this case the design view/dialog list. Since we do not yet have a larger scale search enabled, we can use the 'search box with custom icon' and use the filter instead of the search icon + include the following as placeholder text "Filter dialog and trigger list"

More information about the Fluent control can be found here:
(https://developer.microsoft.com/en-us/fluentui#/controls/web/searchbox).

We cannot use a combo-box for this functionality. I won't get us the behavior intended and sets the wrong expectations to our users about how to use this.
Sooner rather than later we'll want to enable search in Composer, especially when the Bot responses and User input pages will get more content which quickly is the case for more substantial bots (vs samples). We don't want to have 2 search boxes in different locations so we'll have to replace the current filter box with the regular Fluent Search control in the near future.

Please let me know if you have any questions.

Marieke

Regarding the combo box, this is the prescribed functionality/behavior:
Combo box :
A ComboBox is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button or by typing in the input (unless allowFreeform and autoComplete are both false). They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value. When collapsed if autoComplete and/or allowFreeform are true, the user can select a new value by typing.

[cwhitten]

@mareekuh we're not going to implement global search to address the filter box accessibility issues. @corinagum 's guidance is right. global search needs more than some static screens and placeholder data before we build it.

[mareekuh]

I am not asking for a global search box.
I am asking for placing a search box that acts as a filter control, and with a filter icon in the place prescribed by Fluent vs in the left nav.
Same behavior, same scope, same look and feel, different location (see below). But a standard control that is accessible and meets fluent guidelines. A combo box does not filter.

[cwhitten]

Oh, sorry I'm confused. We use <SearchBox /> today in this control. <SearchBox placeholder={formatMessage('Filter Dialogs')} styles={searchBox} onChange={onFilter} iconProps={{ iconName: 'Filter' }} />

…

On Wed, Apr 15, 2020 at 2:01 PM mareekuh ***@***.***> wrote: I am not asking for a global search box. I am asking for placing a search box with filter icon and control in the place prescribed by Fluent. Same behavior, same scope, same look and feel different location (see below). But a standard control that is accessible and meets fluent guidelines. A combo box does not filter. [image: Screen Shot 2020-04-15 at 1 39 55 PM] <https://user-images.githubusercontent.com/48503434/79388058-8b8ad000-7f21-11ea-8a41-3524a5bbb417.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2653 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAI2MYG2PDFXL3A4W7SIARDRMYODLANCNFSM4MIIY73A> .

[lei9444]

Hi, @cwhitten @mareekuh @sangwoohaan @corinagum, I have removed the combobox and reverted the code. I have add a aria-label for reader.
I use narrator and NVDA to test. It works and says 'Type dialog name, Filter Dialog' only once now

[DesignPolice]

Thanks @lei9444 - appreciate all the help.

[lei9444]

Hi @corinagum #2055 can't be fixed in this PR, I have updated the description. Could you help to move it to Todo again. I will fix it in next PR

[corinagum]

Thanks @lei9444!