My Home: Add aria labels and list markup to site setup checklist

[p-jackson]

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.

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~49 bytes added 📈 [gzipped])

name  parsed_size           gzip_size
home       +143 B  (+0.0%)      +49 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[autumnfjeld]

✅ Verified aria-label

✅ Accordion view

[autumnfjeld]

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.

Is this change worth the dev effort? Or perhaps worthy of a comment in the code, in the event of a larger piece of work or refactor , then refactoring to GB accordion could be integrated with another piece of work.

[p-jackson]

Is this change worth the dev effort?

Yes, because at the moment users who use assistive technology to navigate Calypso will struggle to work through the setup checklist.

Is it specific to the work of the My Home pod? Probably not. But a11y (and security, and performance, and supporting mobile web) are just part of the status quo of development imo.

[autumnfjeld]

Is this change worth the dev effort?

Yes, because at the moment users who use assistive technology to navigate Calypso will struggle to work through the setup checklist.

Coolio. Then let's make a ticket for that work. :)

[p-jackson]

Or perhaps worthy of a comment in the code

Oh I think I see what you mean now, maybe we should have a // TODO in the code.

Then let's make a ticket for that work. :)

Yeah lets do this instead, I'm not sure TODO comments in code ever lead to much action 😅

[jordesign]

From a visual/user POV this is looking good to me. Seems like a bonus win that the animation when opening a task with the accordion (in the mobile view) is much smoother looking

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/6014267

Thank you @p-jackson for including a screenshot in the description! This is really helpful for our translators.

[p-jackson]

let's make a ticket for that work

Ticket created #53617

[a8ci18n]

Translation for this Pull Request has now been finished.