Open garcialo opened 8 years ago
/cc @ericlindley-g @aghassemi
Agree that we need a dedicated amp-modal
component. But we need to also apply a lot/most of these to the lightbox as well.
Agreed—will dig into the accessibility needs here. For <amp-modal>
we'll need to make sure it works seamlessly inside AMP viewer context (would also be good to do for <amp-lightbox>
I think we should rename (in a backward compatible way) <amp-lightbox>
to <amp-modal>
and add modal like behaviour to it (including a11y like focus loops, and new features like support for header and action buttons). The new lightbox 2.0 viewer will become our lightbox component. They can share some base code of course.
@ericlindley-g to see if we can prioritize this.
I'm not sure if this is the appropriate place to ask, but are there currently any possible workarounds to mitigate a11y issues with lightboxes/modals? specifically focus management and aria attributes?
https://github.com/ampproject/amphtml/issues/13420 that is being worked on currently will allow you to run AMP actions when lightbox opens and closes which means you can focus (using .focus()
) action on a particular element as lightbox opens and closes. This will also allow you you to run setState()
which can be used as part of amp-bind
to change any aria-*
attributes.
What's currently not possible is a focus trap within the lightbox.
@aghassemi We have a modal that is triggered by more then one button in the page. The action on close doesn't allow me to use amp-bind to sent the focus to the good opening button as [on]
is not allowed on amp-lightbox. Would you have a workaround that other then duplicating the lightbox ?
Also, when the focus is set outside, is there a way to close it ? I don't want to trap it but I'd like for it to close like on escape...
Thank you !
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.
This is still an issue
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.
Issues
There doesn’t appear to be any other type of dialog in AMP. Developers are going to be using lightbox as a modal dialog; this will lead to accessibility issues whenever one is created. Without JavaScript, developers have no way to address these issues.
Examples of amp-lightbox
Suggestions
Implement pattern for a modal dialog