Bug - [Popover] - [accessibility issues with footer, header, and heading]

Describe the problem

Accessibility issues for Popover element:

• with footerContent prop
• with headerContent prop
• with default value h6 of headerComponent prop

Heading levels should only increase by one

https://dequeuniversity.com/rules/axe/4.9/heading-order

<h6 class="pf-v5-c-popover__title-text"><div>Popover header</div></h6>

Document should not have more than one banner landmark

https://dequeuniversity.com/rules/axe/4.9/landmark-no-duplicate-banner

<header class="pf-v5-c-masthead pf-m-display-inline ws-masthead">

Related node:

<header class="pf-v5-c-popover__header"><div class="pf-v5-c-popover__title" id="popover-pf-17234753664484trsgdfq2md-header"><h6 class="pf-v5-c-popover__title-text"><div>Popover header</div></h6></div></header>

Document should not have more than one contentinfo landmark

https://dequeuniversity.com/rules/axe/4.9/landmark-no-duplicate-contentinfo

<footer class="pf-v5-c-page__main-section ws-org-pfsite-l-footer">

Related node:

<footer class="pf-v5-c-popover__footer" id="popover-pf-17234753664484trsgdfq2md-footer">Popover footer</footer>

Ensures landmarks are unique

https://dequeuniversity.com/rules/axe/4.9/landmark-unique

<header class="pf-v5-c-masthead pf-m-display-inline ws-masthead">

Related node:

<header class="pf-v5-c-popover__header"><div class="pf-v5-c-popover__title" id="popover-pf-17234753664484trsgdfq2md-header"><h6 class="pf-v5-c-popover__title-text"><div>Popover header</div></h6></div></header>

<footer class="pf-v5-c-page__main-section ws-org-pfsite-l-footer">

Related node:

<footer class="pf-v5-c-popover__footer" id="popover-pf-17234753664484trsgdfq2md-footer">Popover footer</footer>

How do you reproduce the problem?

1. Visit https://www.patternfly.org/components/popover/#basic
2. Click Toggle popover button.
3. Scan page with axe DevTools and ignore the last issue as irrelevant.

Expected behavior

Render markup that passes axe DevTools rules.

Is this issue blocking you?

No, we will fix 10 occurrences as follows:

1. Move occurrences of footerContent, or headerContent, or both, to props of a pure presentation component that composes them with bodyContent and returns markup for bodyContent prop of Popover element. That is, replace footer and header elements with div elements that have PatternFly classes for same visual appearance.
2. Render (instead of heading element) p element that has PatternFly class for same visual appearance, but takes out of heading hierarchy of page. Similar solution as our workaround component="p" prop for Alert elements that do not seem to fit heading hierarchy of page.

Screenshots

What is your environment?

• OS: macOS 14.6.1
• Browser: Chrome 127
• PatternFly: react-core 5.2.2

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

Red Hat Advanced Cluster Security

Any other information?

Beginne mit der Popover-Komponente und dem grundlegenden Popover-Beispiel unter patternfly.org/components/popover/#basic und reproduziere dann die gemeldeten Verstöße mit axe DevTools. Aktualisiere die zehn Vorkommen, sodass Inhalte in Footer und Header nicht-Landmark-Präsentations-Markup verwenden und der Standard-Header keine unangemessene Überschriftenebene mehr hinzufügt; abgeschlossen ist die Aufgabe, wenn die gemeldeten axe-Regeln erfüllt sind.