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

[pedrottimark]

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?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.