DP-9177 a11y rules of court header

[ygannett]

Any PRs being created needs a changelog.txt file before being merged into dev. See: Change Log Instructions

Description

• Restructure the page category info.
  - Remove h3 from the sub category.
  - Add contextual info to the category and sub category for screen reader users.
  - Set up an association between the page title and the category info.
• Enable screen reader users to get the page category info when the page title gets announced.

Related Issue / Ticket

• JIRA issue
• Github issue

Steps to Test

1. Go to https://mayflower.digital.mass.gov/patternlab/b/patternlab/DP-9177_a11y-rules-of-court-header/?p=pages-rules-of-court.
2. Inspect the markup of the page header.
   • The page category info is wrapped by div#page-category.
   • div#page-category has aria-hidden="true" to avoid getting announced repeatedly as screen reader users going through the header area.
   • div.ma__page-header__category has the contextual info "This page is under the category of " as visually hidden text.
   • div.ma__page-header__subCategory has the contextual info "the sub category of" as visually hidden text.
   • H1 has aria-describedby="page-category" to associate the page title with the category info. It lets screen readers announce the category info when the page title is announced.

<section class="ma__page-header ma__page-header--has-optional-content">
  <div class="ma__page-header__content">
    <div id="page-category" aria-hidden="true">
      <div class="ma__page-header__category">
        <span class="visually-hidden">This page is under the category of </span>
        Rule of Court Sample Page
      </div>
      <div class="ma__page-header__subCategory">
        <span class="visually-hidden">the sub category of </span>
        Rule of Court Optional Sub-category
      </div>
    </div>

    <h1 class="ma__page-header__title" aria-describedby="page-category">The Name of a Court Rule</h1>
  </div>
</section>

3. Check the sub category's visual matches its prod. version.
4. [optional] Browse the header area with a screen reader and find the page category info gets announced with the page title.

Screenshots

Use something like licecap to capture gifs to demonstrate behaviors.

Additional Notes:

Anything else to add?

Impacted Areas in Application

@todo

Today I learned...