a11y: add announcement region to app and announce copy/deletion#2643
a11y: add announcement region to app and announce copy/deletion#2643
Conversation
|
I think I see the problem. The aria-live region, since it's inside a subpage that gets dynamically loaded, isn't being seen by the screen reader. That means it has to be somewhere outside the table, but the table has to be able to stick announcements into it. |
| _async.setTimeout(() => { | ||
| setMessage(undefined); | ||
| }, 2000); |
There was a problem hiding this comment.
How this setTimeout works?
There was a problem hiding this comment.
This will reset the message to "undefined" after two seconds. Because the "aria-live" region is only read when it changes, we need to clear the message out after a pause. Otherwise doing the same action multiple times in a row (like deleting two rows from the table) will only be read once.
…/BotFramework-Composer into beyackle/tableAnnounce
…/BotFramework-Composer into beyackle/tableAnnounce
beyackle
requested review from
a-b-r-o-w-n,
boydc2014,
corinagum and
cwhitten
as code owners
beyackle
changed the title
Composer/packages/client/src/App.tsx
Outdated
| aria-live="assertive" | ||
| style={{ | ||
| position: 'absolute', | ||
| left: '-9999px', |
There was a problem hiding this comment.
speaking from past experience, hiding the div way off to one side of the screen will cause scrollbar problems if/when RTL is brought into the mix. My suggestion would be to put it above the screen and/or change the div to 1x1 with no overflow to avoid the possibility.
There was a problem hiding this comment.
Thanks for the suggestion. I figured there'd be a better way to do that.
…/BotFramework-Composer into beyackle/tableAnnounce
…osoft#2643) * add announcements to table view * linter stuff * use global context for announcement state * add announcements to table view * linter stuff * use global context for announcement state * add announcements to table view * linter stuff * use global context for announcement state * Update table-view.tsx * Update App.tsx
3 participants
Description
This creates an aria-live region that should be reading off announcements when an item in the Bot Responses table is duplicated or deleted. For some reason, though, it isn't.
Task Item
closes #2050
Screenshots
The new div, present in the page DOM:
