Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#1730, #1773, #1820, #1849]Added screen reader alerts for various actions throughout the app. #1873

Merged
merged 1 commit into from
Sep 19, 2019
Merged

[#1730, #1773, #1820, #1849]Added screen reader alerts for various actions throughout the app. #1873

merged 1 commit into from
Sep 19, 2019

Conversation

tonyanziano
Copy link
Contributor

#1730, #1773, #1820, #1849

===

  • Added ariaAlertService.ts in packages/app/client
    • creates an invisible <span> with role="alert" that will be read by any screen reader technologies and then removed after 5 seconds

image

  • Added screen reader alerts for the following actions:
    • saving app settings
    • bot URL validation messages in Open Bot dialog
    • hiding, showing, and copying bot secret in Create Bot dialog
    • navigating to previous and next bot states in the inspector
    • toggling diff mode in the inspector
    • copying JSON in the inspector
  • Fixed accessibility around bot secret input in Create Bot dialog
    • previously, secret input was always disabled, so it was invisible to screen readers
    • secret input is now read-only
    • fixed label on secret input (was not being narrated before)

@coveralls
Copy link

coveralls commented Sep 17, 2019 •
edited
Loading

Coverage Status

Coverage remained the same at ?% when pulling 58afba4 on toanzian/sr-toast into e8b9ede on master.

corinagum
corinagum reviewed Sep 18, 2019
View reviewed changes
Copy link
Contributor

@corinagum corinagum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some questions/suggestions before approval :)

packages/app/client/src/ui/a11y/ariaAlertService.ts Outdated
const alert = document.createElement('span');
alert.innerText = msg;
alert.setAttribute('role', 'alert');
alert.setAttribute('style', 'position: absolute; top: -9999px;');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we also make it a 0x0px <div> so in the unlikely chance it gets on screen, it's still invisible?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried this and you can't hide an element with text content: Example

I could give it an opacity of 0, but some screen readers do not read content with an opacity of 0.

Copy link
Contributor

@corinagum corinagum Sep 19, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yeah, I meant should we change it from <span> to <div> so that it is adjustable to 0px by 0px. Fiddler shows that as working with overflow: hidden
https://jsfiddle.net/sxygke3n/1/

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(also good to know about the opacity 0 thing, I didn't know that)

packages/app/client/src/ui/a11y/ariaAlertService.ts Outdated Show resolved Hide resolved
@tonyanziano
Copy link
Contributor Author

Addressed feedback

corinagum
corinagum previously approved these changes Sep 19, 2019
View reviewed changes
Copy link
Contributor

@corinagum corinagum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Up to you on whether you want to implement <span> to <div> with overflow hidden. I still think it's a good idea.

@tonyanziano
Copy link
Contributor Author

@corinagum oh duh, overflow. I'll add that to the CSS. Good call

corinagum
corinagum approved these changes Sep 19, 2019
View reviewed changes
Copy link
Contributor

@corinagum corinagum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! :D

@tonyanziano tonyanziano merged commit 97d88a1 into master Sep 19, 2019
@tonyanziano tonyanziano deleted the toanzian/sr-toast branch September 19, 2019 17:14
@tonyanziano tonyanziano mentioned this pull request Oct 18, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@corinagum corinagum corinagum approved these changes

@a-b-r-o-w-n a-b-r-o-w-n Awaiting requested review from a-b-r-o-w-n

@compulim compulim Awaiting requested review from compulim

@cwhitten cwhitten Awaiting requested review from cwhitten

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@tonyanziano @coveralls @corinagum