Issue Summary

The Subscribe to Updates feature has the following accessibility problems:

• Opens using a link instead of button (implies navigation to a new page)
• Tabs only have icons for content, with no alternative text.
• Tabs are marked up as links (which implies navigation, not a change of content). They do not take focus in iOS with VoiceOver, so the Feeds tab cannot be opened.
• Input is unlabelled
• Close link is styled like a tab control and only has the letter x as link text.

Recommendation

• Use a button instead of a link to toggle the feature opened and closed. Give the button an aria-expanded attribute (which changes from false to true when the feature is open) so that screen reader users can understand the purpose of the button and its current state.

• Instead of using links to show and hide different content, use a tab panel group (see issue for more information).

• Make sure the email input has a label and an autocomplete attribute, e.g. `<label for="email">Your email address:</label><input name="email" id="email" type="text" placeholder="Email Address" class="full-width" data-js-hook="email-notification- field" autocomplete="email">`

• The close button should not be styled like a tab control. Use a button with a close icon and an aria-label, e.g.

`<button type="button" aria-label="Close subscribe form"><svg>...</svg></button>`

• If a keyboard user tabs away from the popup or presses the Escape key, close the popup.