Roles & permissions widgets are not accessible

[bradenmacdonald]

This UI does not seem to have been implemented with a11y in mind.

1. For a non-visual user / screenreader user, there is currently no way to distinguish included vs. excluded permissions on this view:
   

2. The numbers after each role have no alt text associated with the "👤" icon, so a screen reader will just read it as e.g. "Library User 1" and it would be unclear what the number is for:
   

   (The <Icon src={Person} className="mr-1" /> in the <CardTitle> component is missing the screenReaderText property - "This value is recommended for use unless the Icon is being used in a way that is purely decorative or provides no additional context for screen reader users. This field should be thought of the same way an alt attribute would be used for image tags.")

3. On this page, the ✅ and ❌ icons are hidden entirely from screenreaders, so they'll just find a blank table:
   

4. Likely other issues - these are just the ones I noticed so far.

[gviedma-aulasneo]

Thank you for raising this, @bradenmacdonald. You are right that we did not give accessibility enough attention in this version, and we are seeing the impact now. At this stage we are not going to change these flows, but we will use your feedback as input for the Verawood design work. Some of the issues you flagged are easy fixes, like adding metadata to certain components, while others need to be handled earlier in the design and UX process. We plan to address both in the next iteration.