alphagov
Collapsible checkboxes update
Make collapsible checkboxes component work better with screenreader users. Addresses https://trello.com/c/izqbbBLc/891-collapsible-components-work-poorly-for-screen-reader-users
What
Primarily, changes needed to be made to the functionality as screenreader users were experiencing unexpected behaviour and labelling. Described in detail in the report, linked to the Trello ticket.
Secondly, we're in the process of migrating our legacy code to ES modules and as proposed changes in functionality are such that, while they could have be done in the original module, the module is a good candidate for a rewrite and removal of dependency on JQuery along the way.
Functional changes
- Toggle button is now inserted directly before the checkboxes container and it instead of the fieldset is being toggled.
This was it follows the pattern accordion uses, where toggled content follows immediately in the DOM. With this there is no longer the need to auto focus on the group of checkboxes.
- Toggle button indicates collapsed / expanded state and text now includes legend text
Showing the state visually as well as making it clearer to screen reader users what this section is.
- Removal of "done" button and sticky footer
"Done" button was there to collapse the content and it was wrapped in a "sticky" container to be in view for mouse users to be able to close the section quicker on longer lists.
Removing the "done" button entirely addresses the concern of "...describing the done button as expanded indicates that I have selected that button and expanded the content...this is no the expected method of expanding content and it was very confusing."
The second issue with having a "done" or "collapse this section button" is that once triggered, there isn't a consistent next tabbabble element to place focus on, as this component is used in two different places where next form elements differ. Placing the focus back on to the toggle button would not make sense either.
The removal of making the button sticky is mostly down to above removal of functionality. While we could insert a none tabbable element there for visual users, the script itself is not written in a way that can be used is ES modules as well as in legacy code, where it still used.
There have been attempts to use Intersection Observer to make the toggle button visible in view on long lists, it would not be "sticky" at the bottom nor would it be aware and introduce scroll to avoid overlaying a focussed checkbox.
Appearance
Template folder management view
User access management view
No change to built static JS files with updated babel-core
