ember-osf-web [ENG-3764] OSF Home/Landing Page

[ENG-3764] OSF Home/Landing Page - Testimonials

Open chth0n1x opened this issue 3 years ago • 1 comments

Ticket: https://openscience.atlassian.net/browse/ENG-3764
Feature flag: feature/a11y-testimonial-keyboard-navigation

Purpose

These code changes help make the OSF Researchers Testimonials carousel more accessible to users. This included updates to the testimonial and carousel slide components by removing unnecessary structures, updating the CSS to utilize flex-box grid, and enhancing keyboard-based controls using JavaScript.

Summary of Changes

-Buttons are now fully focusable via keyboard ~Outer div was removed and button elements were upgraded to BsButton elements ~Buttons were made slightly larger to 22px to be within accessible standards though larger is recommended ~Buttons outline and focus is now on point =) -tabindex=0 was added to elements containing important data. This includes researcher name, their credentials and institution as well as the outer div for the image. -Alternative text was improved for OSF researcher testimonials, and this work can be further enhanced to include pronunciation and announcement speed in the VoiceOver changes. -The ordered list element for the dotnav was removed to improve keyboard navigation and simplify layout -CSS changes included flex-box and grid, with final positioning pending -Addition of keyboard-activated navigation controls

Screenshot(s)

Side Effects

When the CSS is not properly set to an active state, this component has the ability to expand and obscure other component's text and elements. Thorough testing with more slides or differently queued active states for the buttons would be helpful.

QA Notes

Does the carousel display?
Does only one slide display at a time?
Does the dot navigation properly correspond to the total number of slides? Will removing or adding slides update the dot navigation bar?
Are each of the meaningful elements focusable by Tab? By Tab + Shift?
Is the Voiceover/Screen Reader polite or does it interrupt the user experience?
Is the keyboard directional flow a good user experience?
Does the keyboard controls function correctly? Are there any issues focusing the component?
Is the contrast ratio good on all elements? Are there any that could improve?