[A11Y] amp-lightbox should be a modal dialog

[garcialo]

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.

• amp-lightbox has no semantics.
• Screen reader users are given no indication of whether a lightbox is open or closed
• Screen reader users are given no indication of whether or not they are inside a lightbox (i.e. child window of the parent window)
• The lightbox can take over the entire screen, but users can interact with content behind it

  Examples of amp-lightbox

• https://cdn.ampproject.org/c/m.ebay.com/sch/amp/Drones-with-Camera/179697/bn_89954/i.html
  • See Information icon buttons next to "Save on Drones with Camera" and "Top Selling"
• https://ampbyexample.com/components/amp-lightbox/

  Suggestions

Implement pattern for a modal dialog

• amp-lightbox should have role=“dialog”
• developers should be able to specify an id for an interactive element that will receive focus when an amp-lighthouse is opened
• user should not be able to move focus/virtual cursor outside of the lightbox
• when closed, focus/virtual cursor should be moved back to the item that opened it
• …and other features of a dialog (see links below)
  • ARIA Design Pattern for Dialog (Modal)
  • eBay MIND Pattern for Dialog

[dvoytenko]

/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.

[ericlindley-g]

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>

[aghassemi]

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.

[adelinamart]

@ericlindley-g to see if we can prioritize this.

[JocelynWordSmith]

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?

[aghassemi]

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.

[catherinehoule]

@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 !

[stale[bot]]

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.

[conwaydev]

This is still an issue

[stale[bot]]

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.