Working branch / sprint 3

[ChristiaanScheermeijer]

Description

The working branch of this sprint. Let's collect the release notes here for the PR to the open-source repository.

Changes

• feat(a11y): optimize profile menu
• feat(a11y): improve accessibility of sidebar
• fix(a11y): optimize footer for accessibility
• fix(payment): layout of invoices on mobile
• chore: fix react warning
• feat(a11y): slider navigation optimized
• fix(a11y): roles and aria-attributes regarding modals
• fix(a11y): usermenu item count & correct html structure
• feat(a11y): slide chevron buttons hitarea increased
• fix(a11y): apply aria-hidden to checkbox asterisk
• feat(a11y): form validation improvements for screen readers
• fix(a11y): only set focus programmatically on keyboard navigation
• feat(a11y): video meta data items separated
• feat(a11y): apply correct aria attributes and improve searchbar
• feat(a11y): apply the autocomplete attribute to input field
• fix(a11y): ensure wcag compliance with 1.5 line-height for texts
• fix(menu): prevent text to go on two lines in buttons
• feat(a11y): add auto focus to play/pause button of players
• refactor: add strict util for modal urls from window location
• fix(payment): ui not updating after paypal payment
• refactor(payment): update variable names
• refactor(tests): fix unit tests
• refactor: adjust to updated FormValidationErrors type
• refactor(payment): fix infinite loop and subscription switch
• refactor(payment): fix broken waiting for payment
• fix(user): fix api error message incomplete
• refactor(payment): improve choose offer flow
• feat: Render favicons dynamically
• chore: add default config and set demo mode on for build
• fix: shelf margin and grid loading state
• fix: hide optional label in season select dropdown
• fix: show error when delete account fails
• fix: improve consents required form error
• fix: hide disabled questions in personal details screen
• fix: broken checkbox in personal details form
• fix(project): favicons & preconnect jwapp.com
• fix: show error on email field when invalid
• chore: add version number to footer text
• fix(payment): redirect to wrong media after payment
• chore: add pr deployment previews workflows
• fix(search): prevent keyboard from persisting in searchbar on submit
• fix(a11y): improve screenreader focus on start watching button
• fix(a11y): ensure correct focus on first sidebar menu item
• fix(a11y): add aria-pressed to password icon and underline to footer links
• fix(project): overall styling of the hub page
• fix(menu): ensure sidebar is scrollable
• fix(project): checkbox values for customer consent

Note Mike: I undoubled the commits and removed unclear commits (e.g. "minor fixes").

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: #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