Feat / accessibility and bug fixes

[ChristiaanScheermeijer]

This PR results from many features and fixes done on the Videodock/ott-web-app fork.

We've mainly worked on accessibility, UI improvements and bug fixes.

From now on, we hope to submit smaller pull requests directly to the open-source repo. This should make reviewing more bearable for you guys 😅

Changelog

Features

• a11y: add auto focus to play/pause button of players (9a78103)
• a11y: apply correct aria attributes and improve searchbar (#117) (52a620c)
• a11y: apply the autocomplete attribute to input fields(#115) (ab4e6f5)
• a11y: form validation improvements for screen readers (4628f0b)
• a11y: improve accessibility of sidebar (c58b7cd)
• a11y: optimize profile menu (1c5f78d)
• a11y: slide chevron buttons hitarea increased (9494434)
• a11y: slider navigation optimized (c5ed8c0)
• a11y: video meta data items separated (#116) (d72aa2b)
• align sidebar backdrop with modal (1af94d1)
• Render favicons dynamically (e9b4f4b)

Bug Fixes

• a11y: add aria-pressed to password icon and underline to footer links (e80a840)
• a11y: add role to make lock icon readable (549fb7f)
• a11y: add selected state to season filters (1117332)
• a11y: apply aria-hidden to checkbox asterisk (#121) (5ada707)
• a11y: ensure correct focus on first sidebar menu item (0f45a87)
• a11y: ensure wcag compliance with 1.5 line-height for texts (#109) (f621ef7)
• a11y: improve screenreader focus on start watching button (cdb20ee)
• a11y: only set focus programmatically on keyboard navigation (693656a)
• a11y: optimize footer for accessibility (060701d)
• a11y: roles and aria-attributes regarding modals (#125) (a37027a)
• a11y: usermenu item count & correct html structure (244d68b)
• a11y: videoplayer focus (iOS) & restoration (52aaf67)
• active state of language menu and apply aria-current (f866c9a)
• broken checkbox in personal details form (1adaae3)
• cinema not covering full viewport height (64a94a9)
• hide disabled questions in personal details screen (8e3db3e)
• hide optional label in season select dropdown (eac1809)
• improve consents required form error (8289ba1)
• menu: ensure sidebar is scrollable (39e0ae4)
• menu: prevent text to go on two lines in buttons (2ccc932)
• payment: fix new subscription not showing in UI (525478f)
• payment: layout of invoices on mobile (04b928f)
• payment: redirect to wrong media after payment (bb45b52)
• payment: ui not updating after paypal payment (8b79cc1)
• project: checkbox values for customer consents (1b89dac)
• project: favicons & preconnect jwapp.com (bf90a73)
• project: overall styling of the hub page (eed5f24)
• search: prevent keyboard from persisting in searchbar on submit (9bc80de)
• shelf margin and grid loading state (72f62a7)
• show error on email field when invalid (ef6392b)
• show error when delete account fails (92ddd9c)
• user: error when updating customer (eba0e2a)
• user: update question value while typing (0a1ed83)
• videodetail: buttons not aligning properly (ddcb214)
• videodetail: don’t render empty duration metadata (0f11a77)
• videodetail: page behind player too wide (94129dc)

Most notable changes

Form validation improvements for screen readers

We revamped the form validation by a lot. Most notably, we now announce form validation errors for screen reader users (while not presenting them visually), and we have made every submit button always enabled. This last one is a requirement from an a11y standpoint. For a full overview of improvements, see: Videodock#107

Improved modals for accessibility

Even though we recently introduced and improved the use of ARIA modals and dialogs. We improved it even further. The most notable change is that the Cinema component (video player) is now wrapped in a Modal component. This has certain benefits:

• Since the video player lays on top of the page and behaves like a (fullscreen) modal, it becomes more semantically correct.
• We can reuse a lot of logic (eg. inert, programmatically setting and resetting the focus consistently and listening to the Escape key to close)

The Cinema component uses a grow/shrink animation instead of a fade in/out as an extra benefit.

We also improved the initial focus and restored the focus into and from the modal. Some edge cases were on some screen readers (iOS and Android).

Enhanced user menu & profile menu for accessibility

The user and profile menu contained a heading and horizontal rule within the <li> elements. This caused the screen reader to announce the amount of list items incorrectly. Also, the HTML structure needs to be corrected.

Because the Usermenu was previously merely used as a pass-through component, passing along a lot of props from <UserMenu /> to <ProfileMenu />, it felt logical to split them into separate components.

We also applied some other ARIA attributes such as role="button" to MenuButtons (actions instead of links) and aria-current="true" to the active elements (eg. currently selected profile).

Shelf optimised for screen readers

We optimized navigation through the shelves for screen reader users. We looked at other examples online and applied the best practices. We also added a page indicator for screen readers. It announces the current state of the carrousel as pages. It gets read when you use the chevron buttons.

We also increased the hit area of the chevron (next/prev) buttons according to the WCAG specs.

Small accessibility improvements

These are small but could be of particular interest:

1. We increased the line height to 1.5 for running text, as is required by the WCAG specs.
2. We made improvements to the video metadata for screen readers so that they will be read individually instead of in one sentence
3. The search bar has been optimized for accessibility
4. When the pipe character is used within the footer text. The footer will be transformed into a list. This is a common practice

Offer refactor

We've moved most of the logics behind the Choose Offer step from the UI to the CheckoutController, using a similar approach as we recently did for the Registration and Checkout steps. This should make the UI more simple and make the useOffer hook reusable between containers and potential other platforms.

We also fixed a bug where after a PayPal payment the incorrect offer was checked for entitlement, and raised the delay in useCheckAccess to compensate for a delay in the Cleeng backend that results into an out-of-sync UI after buying a subscription.

Related WCAG 2.1 (AA) requirements

• WCAG 1.1.1 - Non-text Content
• WCAG 1.4.12 - Text Spacing
• WCAG 2.4.3 - Focus order
• WCAG 3.3.2 - Labels or instructions
• WCAG 3.3.3 - Error suggestion
• WCAG 4.1.2 - Name, Role value

[github-actions]

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

https://ottwebapp--pr455-feat-accessibility-a-qqc0v4n1.web.app

_{(expires Sun, 14 Apr 2024 11:35:04 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c198f8a3a199ba8747819f7f1e45cf602b777529}

[AntonLantukh]

Thanks for the changes! Sorry it took me time to review it.

[ChristiaanScheermeijer]

Hi @dbudzins @AntonLantukh, thank you again for reviewing this PR 😄

Correct me if I'm wrong, but after evaluating your feedback, these are the open points:

• Disable or remove AWS S3 workflow (waiting on @dbudzins)
• Move metadata utils to metadata.ts? (@dbudzins opinion?)
• Is there a better event for focusing the player UI? (alternatives by @AntonLantukh)
• Back button bug? (need more details @AntonLantukh)

I've responded to each conversation respectively, let's keep the discussions there for the overview.

[ChristiaanScheermeijer]

@AntonLantukh @dbudzins this PR is ready for merge 😄