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?

Inizia con il componente Popover e l’esempio di base di Popover all’indirizzo patternfly.org/components/popover/#basic, quindi riproduci le violazioni segnalate con axe DevTools. Aggiorna le dieci occorrenze in modo che il contenuto di footer e header utilizzi markup di presentazione non landmark e che l’header predefinito non aggiunga più un livello di intestazione inappropriato; il lavoro è completato quando le regole axe segnalate vengono superate.