This PR aims to make flipper accessible. The following changes have been made:
Hide usual animated flipper items with aria-hidden
Push active flipper item to an aria-live region which is visible to screen readers only
Add a 'Flip to next item' button which is visible to screen readers only so that users know there is an interaction
Fixes #8
Note: I need to put the aria-label text for the flip to next item button in the schema, I wasn't sure where the best location for it would be. Happy to move after discussion
This has been tested by our QA team using the NVDA screen reader on Chrome, IE 11 & Firefox. There are a couple of niggles with Firefox, I'm not sure how severe these issues are in terms of accessibility, crucially all content can be read by the screen reader and the component can be completed.
Issue 1
On Chrome and IE11 the newly pushed item is read out in it's entirety and then the focus is left on the item title, so the user essentially hears the entire item, then they must navigate back through it in order to get to the button to flip to the next item.
On Firefox, the newly pushed item is read out in it's entirety but then the focus is left on the 'next item' button, so if the user wants to read the item again they have to navigate back up through it to get to the top and then back down it again to read it in order.
Issue 2
When navigating through cards in Firefox the focus remains on the 'Next' button. When a user attempts to navigate back over the newly flipped cards text fields, the body text is read before the instruction text on flippers that contain no images. (Note: you can still hear the instruction text when navigating back down)
-Title text is read, press arrowDown, body text is read press arrowDown, instruction text is read press arrowDown.
-Card flips
-Focus is on button, press arrowUp
-body text is read, press arrowDown
-Instruction text is read
This PR aims to make flipper accessible. The following changes have been made:
Fixes #8
Note: I need to put the aria-label text for the flip to next item button in the schema, I wasn't sure where the best location for it would be. Happy to move after discussion
This has been tested by our QA team using the NVDA screen reader on Chrome, IE 11 & Firefox. There are a couple of niggles with Firefox, I'm not sure how severe these issues are in terms of accessibility, crucially all content can be read by the screen reader and the component can be completed.
Issue 1
On Chrome and IE11 the newly pushed item is read out in it's entirety and then the focus is left on the item title, so the user essentially hears the entire item, then they must navigate back through it in order to get to the button to flip to the next item.
On Firefox, the newly pushed item is read out in it's entirety but then the focus is left on the 'next item' button, so if the user wants to read the item again they have to navigate back up through it to get to the top and then back down it again to read it in order.
Issue 2
When navigating through cards in Firefox the focus remains on the 'Next' button. When a user attempts to navigate back over the newly flipped cards text fields, the body text is read before the instruction text on flippers that contain no images. (Note: you can still hear the instruction text when navigating back down)
-Title text is read, press arrowDown, body text is read press arrowDown, instruction text is read press arrowDown. -Card flips -Focus is on button, press arrowUp -body text is read, press arrowDown -Instruction text is read