Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

toast: needs to support non-visual & keyboard users #349

Closed
marcysutton opened this issue Oct 1, 2014 · 7 comments · Fixed by #11424
Closed

toast: needs to support non-visual & keyboard users #349

marcysutton opened this issue Oct 1, 2014 · 7 comments · Fixed by #11424
Assignees
@Splaktar
Labels
a11y This issue is related to accessibility g3: reported The issue was reported by an internal or external product team. has: Pull Request A PR has been created to address this issue P1: urgent Urgent issues that should be addressed in the next minor or patch release. resolution: fixed
Milestone
1.1.11

Comments

@marcysutton
Copy link
Contributor

To be accessible, material-toast needs to be exposed to users who cannot see it appear. It must also be operable without a mouse and be discoverable with touch. There are a few things involved:

  1. Toast contents can be read aloud in an ARIA live region (recommended setting: "polite"). Region must be bootstrapped on page load and be part of the page's render flow (meaning it cannot be hidden with display: none). Offscreen CSS works fine for this.
  2. The escape key should operate in a "stack" to close actions in the order they were triggered.
  3. Any actions inside of the Toast need to be discoverable and operable from the keyboard or touch (Undo, etc.).

Escape stack tool idea from @ajoslin: https://gist.github.com/ajoslin/498892d942e4fc5c552c
@marcysutton marcysutton added the a11y This issue is related to accessibility label Oct 1, 2014
@marcysutton marcysutton added this to the 0.5 milestone Oct 1, 2014
@marcysutton marcysutton mentioned this issue Nov 19, 2014
Closed
@ThomasBurleson ThomasBurleson modified the milestones: 0.7.0-rc1, 0.5 Dec 5, 2014
@rschmukler rschmukler modified the milestones: 0.7.1, 0.7.0 Jan 7, 2015
@naomiblack naomiblack modified the milestones: 0.7.1, 0.8.0 Jan 26, 2015
@rschmukler rschmukler modified the milestones: 0.9.0, 0.8.0-rc1 Feb 8, 2015
@rschmukler rschmukler modified the milestones: 1.0-beta1, 0.9.0 Apr 2, 2015
@naomiblack naomiblack assigned marcysutton and unassigned rschmukler Aug 14, 2015
@naomiblack
Copy link
Contributor

@marcysutton is this still an issue...? If so, can you update with status and assign to @jelbourn if more work needed.

@naomiblack naomiblack modified the milestones: 0.12.0, 1.0-beta1 Aug 14, 2015
@calebegg
Copy link
Member

calebegg commented Sep 1, 2015

This is still an issue. Toasts are not read out loud or keyboard accessible, at least on the demo page.

@marcysutton marcysutton assigned jelbourn and unassigned marcysutton Sep 29, 2015
@marcysutton
Copy link
Contributor Author

I have reassigned it to @jelbourn, sorry for the delay!

@jelbourn jelbourn modified the milestones: 0.12, 0.13 Oct 15, 2015
@ThomasBurleson ThomasBurleson removed this from the 1.0-rc2 milestone Oct 30, 2015
@ThomasBurleson ThomasBurleson modified the milestones: Deprecated, Backlog Apr 20, 2016
@NilsAtGoogle
Copy link

NilsAtGoogle commented Apr 4, 2018 •
edited
Loading

I think there are still a11y issues. I have an internal bug filed saying it's not possible to reach a toast action via accessible navigation before the toast disappears.

EDITED: Another issue is that the default configurations (e.g. simple) do not wrap the action in the role="alert", so no actions are mentioned when the toast displays.

@Splaktar Splaktar added P2: required Issues that must be fixed. and removed P4: minor Minor issues. May not be fixed without community contributions. labels Apr 5, 2018
@Splaktar Splaktar reopened this Apr 5, 2018
@Splaktar Splaktar modified the milestones: Deprecated, 1.1.10 Apr 5, 2018
@Splaktar Splaktar assigned Splaktar and unassigned jelbourn Apr 5, 2018
@Splaktar Splaktar changed the title Toast needs to support non-visual & keyboard users toast: needs to support non-visual & keyboard users Apr 5, 2018
@Splaktar Splaktar added needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community g3: reported The issue was reported by an internal or external product team. P1: urgent Urgent issues that should be addressed in the next minor or patch release. and removed P2: required Issues that must be fixed. labels Apr 5, 2018
@NilsAtGoogle
Copy link

Adding role="alert" the wrapping container provides a signifier that there is an action, so that helps a bit. It's still challenging to get to that button. It'd be great to be able to configure a keyboard shortcut via an additional parameter to the .action() method, such that the button's label could be generated so the reader could say "Press {shortcut} to {action}".

@Splaktar Splaktar modified the milestones: 1.1.10, 1.1.11 Jun 19, 2018
Splaktar added a commit that referenced this issue Aug 24, 2018
@Splaktar
fix(toast): improve a11y support for $mdToast.simple(). improve docs
fa51cec 
move the role="alert" up a level
 - makes action button visible to screen readers
add support for defining an actionKey to assign a hot key to an action
- this enables Control-actionKey to activate the action
add support for defining a dismissHint for screen readers
add support for defining an actionHint for screen readers
align custom toast demo with Material Design guidelines
enhance custom toast demo to demonstrate an accessible custom toast

Fixes #349
@Splaktar Splaktar added has: Pull Request A PR has been created to address this issue and removed needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community labels Aug 24, 2018
@Splaktar Splaktar mentioned this issue Aug 24, 2018
Merged
3 tasks
@Splaktar
Copy link
Member

Splaktar commented Aug 24, 2018 •
edited
Loading

I posted PR #11424 to address these issues. I would appreciate review feedback.

Splaktar added a commit that referenced this issue Aug 25, 2018
@Splaktar
fix(toast): improve a11y support for $mdToast.simple(). improve docs
a5b5ef7 
move the role="alert" up a level
 - makes action button visible to screen readers
add support for defining an actionKey to assign a hot key to an action
- this enables Control-actionKey to activate the action
add support for defining a dismissHint for screen readers
add support for defining an actionHint for screen readers
align custom toast demo with Material Design guidelines
enhance custom toast demo to demonstrate an accessible custom toast

Fixes #349
mmalerba pushed a commit that referenced this issue Sep 18, 2018
@Splaktar @mmalerba
fix(toast): improve a11y support for $mdToast.simple(). improve docs (#…
fedb9a3 
…11424)

move the role="alert" up a level
 - makes action button visible to screen readers
add support for defining an actionKey to assign a hot key to an action
- this enables Control-actionKey to activate the action
add support for defining a dismissHint for screen readers
add support for defining an actionHint for screen readers
align custom toast demo with Material Design guidelines
enhance custom toast demo to demonstrate an accessible custom toast

Fixes #349
nobitagit pushed a commit to nobitagit/material that referenced this issue Sep 24, 2018
@Splaktar @nobitagit
fix(toast): improve a11y support for $mdToast.simple(). improve docs (a…
bbac8a3 
…ngular#11424)

move the role="alert" up a level
 - makes action button visible to screen readers
add support for defining an actionKey to assign a hot key to an action
- this enables Control-actionKey to activate the action
add support for defining a dismissHint for screen readers
add support for defining an actionHint for screen readers
align custom toast demo with Material Design guidelines
enhance custom toast demo to demonstrate an accessible custom toast

Fixes angular#349
marosoft pushed a commit to marosoft/material that referenced this issue Nov 11, 2018
@Splaktar @marosoft
fix(toast): improve a11y support for $mdToast.simple(). improve docs (a…
4646f2e 
…ngular#11424)

move the role="alert" up a level
 - makes action button visible to screen readers
add support for defining an actionKey to assign a hot key to an action
- this enables Control-actionKey to activate the action
add support for defining a dismissHint for screen readers
add support for defining an actionHint for screen readers
align custom toast demo with Material Design guidelines
enhance custom toast demo to demonstrate an accessible custom toast

Fixes angular#349
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Splaktar Splaktar

Labels
a11y This issue is related to accessibility g3: reported The issue was reported by an internal or external product team. has: Pull Request A PR has been created to address this issue P1: urgent Urgent issues that should be addressed in the next minor or patch release. resolution: fixed
Projects
None yet
Milestone
1.1.11
Development

Successfully merging a pull request may close this issue.

fix(toast): improve a11y support for $mdToast.simple(). improve docs angular/material
8 participants
@ThomasBurleson @rschmukler @calebegg @jelbourn @marcysutton @naomiblack @Splaktar @NilsAtGoogle