Fix screen reader focus flow within the letter generator

[sydneywalcoff]

Overview

Screen Readers(SR) have their own focus flow as they move throughout web pages. Currently while navigating through the letter generator using a SR, the focus stays on the 'next/back' buttons at the bottom of the page instead of moving up to the new content.

Action Items

• [ ] research how SRs move their focus
• [ ] fix so focus moves to new content in LG

Resources/Notes

• I tested this using VoiceOver, the built-in SR for Macs; there's a built in tutorial on how to use it.

[github-actions[bot]]

Hey @davidwiese! Thanks for taking this issue.

To help keep everyone in the loop, please comment your Estimated Time to Completion (ETC) below!

Thanks again!

[davidwiese]

Got a lot of initial research done on screen reader a11y best practices. Began using VoiceOver to start digging into how it specifically interacts with the letter generator.

Since the new content is loaded onto the page without refreshing, we need to figure out how these updates are communicated to the SR.

Possible fixes to explore more:

• Use of tabindex="-1": Applying tabindex="-1" to the new content container allows it to receive programmatic focus. We can then use JavaScript to explicitly set focus to this element when new content loads.
• Announce content changes: When the content updates dynamically, use ARIA live regions to announce the changes to screen reader users. Add the aria-live attribute to the container element that holds the dynamic content.

ETC - Friday 4/19

[davidwiese]

Submitted PR

[github-actions[bot]]

Hey @davidwiese! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[davidwiese]

Should address the changes today for review