Add hidden context for icons in rows for summary tables

adi-unni commented 2 months ago

What is the context of this PR?

Fixes: #3030

This PR fixes the lack of context in summary tables where there is no status column and only an icon which in the case of the ticket, were checks for completion. Following from the DAC advice, we are now adding a visually hidden <span> to the icon's <div> to enable adding additional contextual information. This done by setting the "iconVisuallyHiddenText": {string} param in rowItems adjacent to "iconType": {icon}. The service can input the appropriate text to add context to whichever icon is being used.

Please make sure that this param is set when there is no other context on the row indicating section completion status (see the new minimal example).

How to review this PR

Check the new example-minimal for the summary table and see if the new span tag with section completed is there. Sense check the output from the screen reader

Checklist

This needs to be completed by the person raising the PR.

[x] I have selected the correct Assignee
[x] I have linked the correct Issue

netlify[bot] commented 2 months ago

Deploy Preview for ons-design-system-preview ready!

Name	Link
Latest commit	851376876a86ca4598785bb8c24274185235f775
Latest deploy log	https://app.netlify.com/sites/ons-design-system-preview/deploys/6630cf7c32a3490008a0248f
Deploy Preview	https://deploy-preview-3165--ons-design-system-preview.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

alessioventuriniAND commented 2 months ago

Can you also raise a ticket to add this new example to the summary component?

adi-unni commented 2 months ago

Update documentation in this issue

ONSdigital / design-system