[PHX-1317] Ensure a consistent experience for Nri.Block for Screen Readers

[micahhahn]

🔧 Modifying a component

Context

Screen readers differ on how the read <mark> tags. In some cases this lead to the browser saying "highlight" more than once - and in some cases even saying it after every single word in a display element block! See Charbel's detailed analysis in the Slack link below.

This PR standardizes the experience of Nri.Block for SR users by adding the presentation role to the <mark> element. We also remove the aria-roledescription attributes for the case of labels. This is ok as we add the the label text to the ::before and ::after contents.

Slack Thread

PHX-1317 Ensure consistent experience for Nri.Block for Screen Readers

🖼️ What does this change look like?

• If there are user facing changes, you will be asked later to add a designer as a reviewer. Please fill in this section by following the guidelines for an optimal design review.
• If there are not user facing changes, include any screenshots or videos that would be helpful to reviewers.

Component completion checklist

• I've gone through the relevant sections of the Development Accessibility guide with the changes I made to this component in mind
• Changes are clearly documented
  • Component docs include a changelog
  • Any new exposed functions or properties have docs
• Changes extend to the Component Catalog
  • The Component Catalog is updated to use the newest version, if appropriate
  • The Component Catalog example version number is updated, if appropriate
  • Any new customizations are available from the Component Catalog
  • The component example still has:
    • an accurate preview
    • valid sample code
    • correct keyboard behavior
    • correct and comprehensive guidance around how to use the component
• Changes to the component are tested/the new version of the component is tested
• Component API follows standard patterns in noredink-ui
  • e.g., as a dev, I can conveniently add an nriDescription
  • and adding a new feature to the component will not require major API changes to the component
• If this is a new major version of the component, our team has stories created to upgrade all instances of the old component. Here are links to the stories:
  • add your story links here OR just write this is not a new major version
• Please assign the following reviewers (applicable Sep 2023–Dec 2023):
  • a11y-volunteer-reviewers - Someone from this group will review your PR in full.
  • team-accessibilibats-a11ybats - Someone from this group will review your PR for ACCESSIBILITY ONLY.
  • Someone from your team who can review requirements from your team's perspective. (This could be the same person from the a11y-volunteer-reviewers group if you'd like.)
  • If there are user-facing changes, a designer. (You may want to direct your designer to the deploy preview for easy review):
    • For writing-related component changes, add Stacey (staceyadams)
    • For quiz engine-related components, add Ravi (ravi-morbia)
    • For a11y-related changes to general components, add Ben (bendansby)
    • For general component-related changes or if you’re not sure about something, add the Design group (NoRedInk/design)

[linear]

PHX-1317 Fix a11y in Nri.Ui.Block

[micahhahn]

The build failures appear to be flakes

[charbelrami]

Looks good! Thanks!