Bug - Expandable section - missing needed aria attributes (accessibility)

[kdoberst]

Describe the problem
The expandable section is missing aria attributes to let users know that the button is tied to the expanded content.

See https://www.w3.org/WAI/ARIA/apg/example-index/accordion/accordion.html from the W3C ARIA group for a good example and summary.

How do you reproduce the problem?
Any expandable section will do. See: https://www.patternfly.org/v4/components/expandable-section

Expected behavior
There should be an aria-controls attribute on the button that is set to the id of the expanded content. In addition, there should be an aria-labelledby attribute on the expanded content letting the user know that the content's visibility is tied to the button.

Simple example:

     <div class="accordion">
        <h3>
          <button type="button" aria-expanded="true" class="accordion-trigger" aria-controls="sect1" id="accordion1id">
             See more important stuff
              <span class="accordion-icon"></span>
          </button>
        </h3>
        <div id="sect1" role="region" aria-labelledby="accordion1id" class="accordion-panel">
            This is the important stuff that is hidden/shown by the button above
        </div>
      </div>

Is this issue blocking you?
An AT user would have to guess that the button controls the visibility of the content. Visually, this is easy to do, but many AT users do not necessarily move through the content in a linear way (navigating via landmarks, headers, or links for example) so may not be easy for users to decipher.

What is your environment?

• OS: [e.g. iOS]: Any (I tested using a macbook pro using OS 11.7.1)
• Browser [e.g. chrome, safari]: Any (I tested using chrome 108.0.5359.124 )

What is your product and what release date are you targeting?
OCM

The OCM code base uses numerous expandable sections and new work will be adding additional expanding sections in the near future.

Any other information?

I'm an expert in mediating accessibility issues. Please feel free to contact me via the Internal Red Hat slack if you have questions or need assistance.

[thatblindgeye]

When this is addressed, we want to make sure we test:

• aria-controls in JAWS screen reader (may not be well supported in other AT)
• aria-labelledby and whether it provides significant context improvement