amp-story: Controls/widgets with an incorrect/missing role

# Controls/widgets with an incorrect/missing role

## WCAG Level
Level A

## Priority
Low

## 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 user interface component's role conveys to assistive technologies the purpose of the component. This, in turn, allows assistive technologies to give more accurate information to users about the nature of the content they are navigating.

Throughout the samples, the various types of modal dialogs/drawers/panels (conceptually all acting as modal dialogs) do not programmatically convey the fact that they are dialogs

## User impact
When the role of a user interface component, such as a modal dialog, is not announced, assistive technology users won't be given important information about the component. In this case, while visually it may be fairly apparent that a component is a dialog (due to the semi-transparent overlay behind it, covering the underlying page), this information is not conveyed to assistive technology users.

## Required solution
User interface components must expose a role that matches their actual purpose and functionality, so that assistive technologies can understand it and convey it appropriately to users.

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

The "Share" modal dialog currently has a `role="alert"`. This will result in the content of the dialog being announced, but no indication will be given that this is in fact a modal dialog.


```

```

The "bookend" drawer (when viewing small-screen/smartphone views of a story) and the "Swipe up" drawer/panel used in [Page attachment](https://www.gstatic.com/amphtml/stamp/qa/page-attachment.html) all lack any kind of role.



```

```

The web-based/non-native consent dialog in [Consent](https://www.gstatic.com/amphtml/stamp/qa/consent.html) lacks any kind of role.


```

...

#shadow-root

```

In all these cases, add an explicit `role="dialog"` to the interface component (and, in the case of the "Share" modal, remove the incorrect `role="alert"`). Additionally, we recommend adding `aria-modal="true"` to further clarify the nature of the dialog.

```

```

```

```

```

...

#shadow-root

```

Conceptually the "Expand Tweet" view in [Tooltip](https://www.gstatic.com/amphtml/stamp/qa/tooltip.html) also acts as a modal dialog.


However, in this case, the overall structure is slightly more complex to remediate, as it seems to rely on only visually giving the impression of a self-contained overlay, when in fact the embedded tweet is still part of the underlying page and is "shining through"/sitting on top of the actual "modal". We'd recommend dynamically restructuring the DOM in these cases to make the embedded tweet actually part of the container that appears as a modal, and then applying the `role="dialog" aria-modal="true"` to the container.

## 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 your screen reader.
2. Trigger any modal dialog/drawer/panel
3. Verify that the control is announced as a "dialog" 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 website have been resolved or filed as new issues.

## Related standards
* [WCAG 2.1 Success Criterion 4.1.2 Name, Role, Value (Level A)](https://www.w3.org/TR/WCAG21/#name-role-value)

## More information
* [W3C - Understanding Success Criterion 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)
* [W3C - ARIA4: Using a WAI-ARIA role to expose the role of a user interface component](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA4.html)
* [W3C - WAI-ARIA Overview](https://www.w3.org/WAI/standards-guidelines/aria/)
* [W3C - WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/)

## Test data
Test date: January 2021

Start with the Share, draggable drawer, consent, and tooltip implementations referenced by the listed AMP Story QA pages. Reproduce each overlay with a screen reader and inspect its DOM roles; done means all sample and website instances expose the correct dialog role, the incorrect alert role is removed, and any remaining instances are fixed or filed as new issues.

Written by the indexing model from the issue text.