fix(react-examples): Add narrator cue for cleaning action in Date Picker examples #16463
Conversation
…ker examples (microsoftdesign/fluentui#10254)
Perf AnalysisNo significant results to display. All results
Perf Analysis (Fluent)Perf comparison
Perf tests with no regressions
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 0eeb71e:
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 21e7c948365236acc497fb981d6605337db11bef (build) |
|
This is yet another of these example accessibility issues where I'm not convinced that the original complaint is valid. I can see the need for confirming operation completion for more significant and possibly slower tasks, such as deleting items from a list, but this is an extremely simple action. I wonder if either updating the button text to be more descriptive, or adding an aria-label would be adequate? @JustSlone what do you think? |
|
@ecraig12345 I could go either way. However, in this case I think the suggested fix is reasonable and demonstrates a more general pattern for how to announce changes being made by the clear button. If we do go with a more descriptive button I would recommend using aria-label rather than the button text as it's unlikely to have a verbose clear button in an actual application. If you want to pursue the simpler path I'd recommend following up with @smhigley or our trusted tester internally to confirm the aria-label approach is sufficient here. If we do choose to go this path, let's follow up quickly and not let such a simple PR drag on and consume a lot of time. |
| @@ -14,9 +15,11 @@ const onFormatDate = (date?: Date): string => { | |||
|
|
|||
| export const DatePickerFormatExample: React.FunctionComponent = () => { | |||
| const [value, setValue] = React.useState<Date | undefined>(); | |||
| const [clearedAnnounced, setClearedAnnounced] = React.useState<JSX.Element | undefined>(); | |||
There was a problem hiding this comment.
For this to work properly if the clear button is used multiple times, you'll also need to remove the announced message when a new date is set. Basically instead of passing setDate directly to DatePicker's onSelectDate, add a wrapper which clears the message too.
|
@JustSlone Thanks for the input! Let's go with the announced solution, though adding an aria-label (like "Clear start date") also wouldn't hurt. |
|
For what it's worth, I think a clearer label + no announcement is a better pattern for this use case, and for clear buttons in general. The exception would be if there's a delay between the user pressing the button and the action completing, or maybe if the button and the thing it acts on are separated. Otherwise, heavy use of live regions in cases like these end up making the UI somewhat chatty, which isn't awful but also isn't ideal. |
Cool, just having a good label (or aria-label? since the field association is pretty obvious visually) sounds better to me as well. |
|
I went with @smhigley's approach as it avoids the need for a more complicated implementation. |
#### Pull request checklist - [x] Include a change request file using `$ yarn change` #### Description of changes Aggregate cherry-picking for all my contributions for the `react-examples` package #### Focus areas to test - [x] #16497 - [x] #16496 - [x] #16494 - [x] #16479 - [x] #16430 - [x] #16475 - [x] #16463 - [x] #16495 - [x] #16481
Pull request checklist
$ yarn change: No change files are neededDescription of changes
Added an
Announcedcomponent for when the user presses theClearbutton on theDate Picker InputandDate Picker Requiredexamples