amp-story: Content behind dialogs is available to screen readers

# Content behind dialogs is available to screen readers

## WCAG Level
Level A

## Priority
High

## Pages/screens/components affected
* [Navigation](https://www.gstatic.com/amphtml/stamp/qa/navigation.html)
* [RTL](https://www.gstatic.com/amphtml/stamp/qa/rtl.html)
* [Video](https://www.gstatic.com/amphtml/stamp/qa/video.html)
* [Audio - amp-story background audio](https://www.gstatic.com/amphtml/stamp/qa/audio-story.html)
* [Audio - amp-story-page background audio](https://www.gstatic.com/amphtml/stamp/qa/audio-page.html)
* [Audio - amp-story using amp-audio](https://www.gstatic.com/amphtml/stamp/qa/amp-audio.html)
* [Animation](https://www.gstatic.com/amphtml/stamp/qa/animation.html)
* [Sharing](https://www.gstatic.com/amphtml/stamp/qa/sharing.html)
* [Tooltip](https://www.gstatic.com/amphtml/stamp/qa/tooltip.html)
* [Page attachment](https://www.gstatic.com/amphtml/stamp/qa/page-attachment.html)
* [Branching](https://www.gstatic.com/amphtml/stamp/qa/branching.html#page=page2)
* [Consent](https://www.gstatic.com/amphtml/stamp/qa/consent.html)
* [Prerender - Image](https://www.gstatic.com/amphtml/stamp/qa/prerender-img.html?amp_js_v=0.1#origin=https://www.google.com&prerenderSize=1&visibilityState=prerender&paddingTop=0&p2r=0&horizontalScrolling=0&csi=1&aoh=15526927198732&viewerUrl=https://www.google.com&history=1&storage=1&cid=1&cap=swipe,navigateTo,cid,fragment,replaceUrl)
* [Prerender - Video](https://www.gstatic.com/amphtml/stamp/qa/prerender-video.html?amp_js_v=0.1#origin=https://www.google.com&prerenderSize=1&visibilityState=prerender&paddingTop=0&p2r=0&horizontalScrolling=0&csi=1&aoh=15526927198732&viewerUrl=https://www.google.com&history=1&storage=1&cid=1&cap=swipe,navigateTo,cid,fragment,replaceUrl)
* [AMP Story Player - Player](https://www.gstatic.com/amphtml/stamp/qa/player.html)
* [AMP Story Player - AMP Story 360](https://www.gstatic.com/amphtml/stamp/qa/amp-story-360.html)

## Description
A modal dialog is overlaid on top of the page it was opened from and the content underneath is obscured from view. If the content underneath the dialog is not also hidden from screen readers, the dialog does not fulfill its intended purpose of capturing and holding the user's attention.

Across all tested samples, when the "Share" modal dialog is opened, the underlying page can still be read/accessed using assistive technologies. The same applies to other modals, such as the web-based/non-native [Consent](https://www.gstatic.com/amphtml/stamp/qa/consent.html) dialog and the "bookend" page (which acts as a conceptual modal dialog).

## User impact
If screen readers are not restricted to reading the contents of a dialog, users can easily get lost by navigating into content that is not supposed to be available.

This is particularly true currently, where modal dialogs are not currently identified programmatically as being dialogs, and focus is not explicitly moved to, and maintained inside, the dialogs.

## Required solution
Make sure that content underneath open dialogs is hidden from all users including those who use a screen reader.

This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the website.

## Implementation guidance
When a modal dialog is displayed, content "behind" the dialog should also be hidden from assistive technologies, to avoid that users navigate back into the underlying main document (using the virtual/reading cursor, navigation by headings, etc).

At a high level, this can be achieved by adding `aria-hidden="true"` to the underlying page - making sure that the modal dialog itself sits outside of the hidden container, as otherwise it would also be hidden.

```

```

An additional approach, which unfortunately is only partially supported in current user agent/assistive technology combinations, is to explicitly denote the modal dialog container as a modal dialog with the `aria-modal="true"` attribute. As this approach is not fully supported yet, we recommend still using the above `aria-hidden` approach.

For a solid implementation of an accessible custom dialog, see [A11y Dialog](https://github.com/edenspiekermann/a11y-dialog).

## Test procedure(s)
Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the website for instances of the same issue:
1. Turn on a screen reader.
2. Open a dialog and use the up/down arrow keys to navigate through the content.
3. Check that the content underneath is not announced by the screen reader.

### Definition of done
Complete all of these tasks before closing this issue or indicating it is ready for retest:
* All issues identified within the test sample have been resolved.
* The rest of the website has been tested for the same issue.
* All issues identified throughout the rest of the website have been resolved or filed as new issues.

## Related standards
* [WCAG 2.1 Success Criterion 1.3.2 Meaningful Sequence (Level A)](https://www.w3.org/TR/WCAG21/#meaningful-sequence)

## More information
* [TPG: The current state of modal dialog accessibility](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)
* [Accessibility Support - aria-modal attribute](https://a11ysupport.io/tech/aria/aria-modal_attribute)
* [A11y Dialog](https://github.com/edenspiekermann/a11y-dialog)

## Test data
Test date: February 2021