Feat/accessibility fixes and improvements

[ChristiaanScheermeijer]

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.

Related WCAG 2.1 (AA) requirements

• WCAG 1.3.1 Info and Relationships
• WCAG 1.3.2 Meaningful Sequence
• WCAG 1.4.3 Contrast Minimum
• WCAG 1.4.5 Images of Text
• WCAG 1.4.10 Reflow
• WCAG 1.4.11 Non-Text Contrast
• WCAG 2.4.7 Focus Visible
• WCAG 2.5.3 Label in Name
• WCAG 3.1.2 Language of Parts
• WCAG 3.2.1 On Focus
• WCAG 3.2.4 Consistent Identification
• WCAG 4.1.3 Status Messages

[github-actions]

Visit the preview URL for this PR (updated for commit 180f578):

https://ottwebapp--pr451-feat-accessibility-f-m2ddpomu.web.app

_{(expires Sat, 23 Mar 2024 11:35:34 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c198f8a3a199ba8747819f7f1e45cf602b777529}

[ChristiaanScheermeijer]

Needs rebase (after approving #450)

[dbudzins]

Thank you for adding these features!

[AntonLantukh]

Looks like the "Related films" header has additional margin now on the mobile devices:

[AntonLantukh]

The footer is overlapping the config info:

[ChristiaanScheermeijer]

Looks like the "Related films" header has additional margin now on the mobile devices:

This was broken indeed! Fixed it

[AntonLantukh]

Looks like menu items in the mobile sidebar are not outlined when tabbed (not sure if it is needed).

[ChristiaanScheermeijer]

@AntonLantukh I see this outline in the sidebar when tabbing:

The base branch was changed.