Changes proposed in this Pull Request
- Add
aria-labels for the icons in the checklist
- The tick icon has the label “Task complete”
- The gray circle icon has the label “Task incomplete”
- Make the checklist a real “list” semantically
The diff in GH makes it look scarier than it is. Ignoring the indentation change it wraps the checklist in a <ul> and replaces a <Fragment> with a <li>.
This change is important because we want to be supporting users who use assistive technology anyway. But this came up because we were discussing whether to change the task labels when the task gets completed. Previously that would have been the only way for screen readers to tell the difference between a complete and incomplete task. Adding the aria labels in this PR means we can make the decision about task labels independently of a11y concerns.
In mobile view the checklist switches to an accordian view. We should really be using GB’s according component for this since it has better support for assistive technology.
Testing instructions
- Open a site where site setup isn’t complete using calypso.live
- Open the same site in production and compare that the checklist looks the same
- You can also check in voiceover that the icon labels are being read (although My Home doesn’t have great support for a11y so it might be hard to move the narrator to the list)
- Test in mobile view, the checklist should switch to an accordian view and work as it used to
This change has actually improved the placement of one of the borders in accordian view.
Before
After
Related to the discussion in #52936, although not the main issue.
Unfortunately, no screenshots were provided by the developer.
