amp-story: Content is unreadable when text style is adjusted

# Content is unreadable when text style is adjusted

## WCAG Level
Level AA

## 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
An important design consideration is to make sure that the display of text can be adjusted, so that line height, spacing between paragraphs, and spacing between words and letters can be changed without the content becoming unreadable.

While all tested samples did not have any issues when increased text spacing styles were enabled, all pages include styles on their `` that cut off any overflowing content.

```

```

If authors create individual pages/slides with a large amount of content, designing them to just fit into the default AMP story viewport dimensions, content on these pages will overflow the boundaries of the AMP story view - and be cut off/unreachable - when a user increases the spacing.


## User impact
Someone with a cognitive or reading disability like Dyslexia may find content easier to read when there is more space between letters, words, lines and paragraphs. If content becomes hidden or obscured when they adjust the way text is displayed it makes the problem worse not better.

## Required solution
Make sure that all content and functionality remains available after the display of text has been adjusted.

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
Allow for the possibility that content may grow beyond the set size of the specific boundaries set for each AMP story page. Either remove the forced `overflow: hidden`, or introduce a further scrollable container inside each AMP story page.

## 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. Install a tool like the [ARC Toolkit](https://www.paciellogroup.com/toolkit/) or the [text spacing bookmarklet](https://developer.paciellogroup.com/blog/2018/05/short-note-on-getting-spaced-out-with-sc-1-4-12-text-spacing/).
2. Check that the text on the page responds to the changes.
3. Check that all content and functionality remains readable and available after the display of text has changed.

### 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.4.12 Text Spacing (Level AA)](https://www.w3.org/TR/WCAG21/#non-text-contrast)

## More information
* [W3C: Technique C35: Allowing for text spacing without wrapping](https://www.w3.org/WAI/WCAG21/Techniques/css/C35)
* [W3C: Technique C36: Allowing for text spacing override](https://www.w3.org/WAI/WCAG21/Techniques/css/C36)
* [Knowbility: Exploring WCAG 2.1: 1.4.12 Text Spacing](https://knowbility.org/blog/2018/WCAG21-1412TextSpacing/)
* [TPG: Short note on getting spaced out with SC 1.4.12 Text Spacing](https://developer.paciellogroup.com/blog/2018/05/short-note-on-getting-spaced-out-with-sc-1-4-12-text-spacing/)
* [TPG: ARC Toolkit](https://www.paciellogroup.com/toolkit/)

## Test data
Test date: January 2021