Feat/accessibility fixes and improvements

ChristiaanScheermeijer commented 8 months ago

Description

This branch is rebased on #450 and contains a lot of accessibility improvements and fixes.

Most of the accessibility features are squashed into the first commit. Fixes and improvements for these features are added later. We should squash this, but it might help to do that after reviewing.

fix(a11y): prevent double ids on inputs by requiring a name
feat(a11y): apply aria-modal attribute and move header landmark
feat(a11y): update button role and html structure of account and player pages
feat(a11y): add correct text markups and aria attributes
feat(home): add (geo) error message when all playlists are empty
feat(a11y): add form error announcement
feat(a11y): add solid header background color to ensure accessibility
feat(a11y): implement aria-invalid and aria-described by to inputs on error
feat(project): add google fonts from env vars
feat: keyboard accessible LayoutGrid
feat: optimize featured shelf slider for accessibility
feat(a11y): accessible sidebar &
landmark
feat(a11y): enhance dialog and modals accessibility
fix(a11y): alt text for images for EPG
fix(a11y): empty alt for image because of adjacent text alternative
fix(a11y): fix arrow keys for offer radio buttons
fix(a11y): skiplink first element
feat(a11y): improve html structure for VideoListItem
fix(e2e): cardgrid card navigation
feat(a11y): apply lang attribute to custom fields
feat(a11y): accessible focus outline

Most notable changes

Focus outline when using the tab key to navigate

When keyboard users navigate the site, the is-tabbing class name is added to the body element. This causes interactive elements to show an outline when being focussed.

Support keyboard interaction for many components

The following components have been optimized for keyboard navigation:

Shelves (TileDock)
TileGrid
VideoList & VideoListItem
Radio

Modals & drawer as dialog

When a modal or drawer opens, the rest of the page becomes inert, and the focus stays within the opened dialog. The first interactive element is automatically focussed, and the focus is automatically returned to the originating element when the dialog is closed.

Contrast ratio fixes

The biggest contrast ratio issue was coming from the navbar when having a transparent background. The cover image on the video detail page could contain very light colors, making the navbar menu items badly visible. We have reduced the opacity of the menu items and added a fade over the cover image.

Screenreader announcements

We've found that on many occasions, it was not clear for screenreader users that a certain action had failed or succeeded. For example, when updating your account, there is no visual indication that the update has been applied. Instead of adding a form message (because some of these updates originate from forms within modals), we added an AriaAnnouncerProvider, which can provide feedback to screenreader users when the action is complete.

Empty homepage message

When GEO restricts your content and browsing from a restricted country, the home page will be empty. When this happens, we have added a generic message so that the user is aware that no more content will be shown on the site.