Closed heyMP closed 1 year ago
There are nested h3's in the mobile accordion in rh-footer. This is because all headers are wrapped in an h3 within the shadowroot of the accordion.
rh-footer, rh-accordion
<h3 slot="links-*">
<h3 id="heading">
rh-accordion-header
We should probably remove the h3 from rh-accordion if we are using a slot.
<rh-footer data-analytics-region="page-footer" color-palette="darker"> <a slot="logo" href="/en" data-analytics-category="Footer" data-analytics-text="Logo" aria-current="page"><img src="https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--on-dark.svg" alt="Red Hat logo" loading="lazy" width="135" height="32"></a> <rh-footer-social-link slot="social-links" icon="linkedin" role="listitem"> <a href="https://www.linkedin.com/company/red-hat" data-analytics-region="social-links" data-analytics-category="Footer|social-links" data-analytics-text="" aria-label="LinkedIn"> <pf-icon icon="linkedin" set="fab" loading="eager" size="sm">LinkedIn</pf-icon> </a> </rh-footer-social-link> <rh-footer-social-link slot="social-links" icon="youtube" role="listitem"> <a href="https://www.youtube.com/user/RedHatVideos" data-analytics-region="social-links" data-analytics-category="Footer|social-links" data-analytics-text="" aria-label="YouTube"> <pf-icon icon="youtube" set="fab" loading="eager" size="sm">YouTube</pf-icon> </a> </rh-footer-social-link> <rh-footer-social-link slot="social-links" icon="facebook" role="listitem"> <a href="https://www.facebook.com/redhatinc" data-analytics-region="social-links" data-analytics-category="Footer|social-links" data-analytics-text="" aria-label="Facebook"> <pf-icon icon="facebook" set="fab" loading="eager" size="sm">Facebook</pf-icon> </a> </rh-footer-social-link> <rh-footer-social-link slot="social-links" icon="twitter" role="listitem"> <a href="https://twitter.com/RedHat" data-analytics-region="social-links" data-analytics-category="Footer|social-links" data-analytics-text="" aria-label="Twitter"> <pf-icon icon="twitter" set="fab" loading="eager" size="sm">Twitter</pf-icon> </a> </rh-footer-social-link> <h3 slot="links-0" data-analytics-text="Products" id="rh-footer-8beqdpkhb">Products</h3> <ul slot="links-1" aria-labelledby="rh-footer-8beqdpkhb"> <li><a href="/en/technologies/linux-platforms/enterprise-linux" data-analytics-category="Footer|Products" data-analytics-text="Red Hat Enterprise Linux">Red Hat Enterprise Linux</a></li> <li><a href="/en/technologies/cloud-computing/openshift" data-analytics-category="Footer|Products" data-analytics-text="Red Hat OpenShift">Red Hat OpenShift</a></li> <li><a href="/en/technologies/management/ansible" data-analytics-category="Footer|Products" data-analytics-text="Red Hat Ansible Automation Platform">Red Hat Ansible Automation Platform</a></li> <li><a href="/en/technologies/cloud-computing/openshift/cloud-services" data-analytics-category="Footer|Products" data-analytics-text="Cloud services">Cloud services</a></li> <li><a href="/en/technologies/all-products" data-analytics-category="Footer|Products" data-analytics-text="See all products">See all products</a></li> </ul> <h3 slot="links-2" data-analytics-text="Tools" id="rh-footer-z8cvy9c0l">Tools</h3> <ul slot="links-3" aria-labelledby="rh-footer-z8cvy9c0l"> <li><a href="https://sso.redhat.com" data-analytics-category="Footer|Tools" data-analytics-text="My account">My account</a></li> <li><a href="/en/services/training-and-certification" data-analytics-category="Footer|Tools" data-analytics-text="Training and certification">Training and certification</a></li> <li><a href="https://access.redhat.com" data-analytics-category="Footer|Tools" data-analytics-text="Customer support">Customer support</a></li> <li><a href="https://developers.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Developer resources">Developer resources</a></li> <li><a href="https://learn.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Learning community">Learning community</a></li> <li><a href="https://connect.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Partner resources">Partner resources</a></li> <li><a href="/en/resources" data-analytics-category="Footer|Tools" data-analytics-text="Resource library">Resource library</a></li> </ul> <h3 slot="links-4" data-analytics-text="Try buy & sell" id="rh-footer-aqxvpotco">Try, buy, & sell</h3> <ul slot="links-5" aria-labelledby="rh-footer-aqxvpotco"> <li><a href="/en/products/trials" data-analytics-category="Footer|Try buy & sell" data-analytics-text="Product trial center">Product trial center</a></li> <li><a href="https://marketplace.redhat.com" data-analytics-category="Footer|Try buy & sell" data-analytics-text="Red Hat Marketplace">Red Hat Marketplace</a></li> <li><a href="https://catalog.redhat.com/" data-analytics-category="Footer|Try buy & sell" data-analytics-text="Red Hat Ecosystem Catalog">Red Hat Ecosystem Catalog</a></li> <li><a href="https://www.redhat.com/en/store" data-analytics-category="Footer|Try buy & sell" data-analytics-text="Red Hat Store">Red Hat Store</a></li> <li><a href="https://www.redhat.com/en/about/japan-buy" data-analytics-category="Footer|Try buy & sell" data-analytics-text="Buy online (Japan)">Buy online (Japan)</a></li> <li><a href="https://cloud.redhat.com/" data-analytics-category="Footer|Try buy & sell" data-analytics-text="Console">Console</a></li> </ul> <h3 slot="links-6" data-analytics-text="Communicate" id="rh-footer-j59oz1nbj">Communicate</h3> <ul slot="links-7" aria-labelledby="rh-footer-j59oz1nbj"> <li><a href="/en/contact" data-analytics-category="Footer|Communicate" data-analytics-text="Contact sales">Contact sales</a></li> <li><a href="/en/services/training-and-certification/contact-us" data-analytics-category="Footer|Communicate" data-analytics-text="Contact training">Contact training</a></li> <li><a href="/en/about/social" data-analytics-category="Footer|Communicate" data-analytics-text="Social">Social</a></li> </ul> <rh-footer-block slot="main-secondary"> <h3 slot="header" data-analytics-text="About Red Hat">About Red Hat</h3> <p>We’re the world’s leading provider of enterprise open source solutions—including Linux, cloud, container, and Kubernetes. We deliver hardened solutions that make it easier for enterprises to work across platforms and environments, from the core datacenter to the network edge.</p> </rh-footer-block> <rh-footer-block slot="main-secondary"> <h3 slot="header" data-analytics-text="Subscribe to our newsletter Red Hat Shares">Subscribe to our newsletter, Red Hat Shares</h3> <pfe-cta pfelement="" class="PFElement" on="dark" has_link=""><a href="/en/email-preferences?newsletter=RH-Shares&intcmp=7016000000154xCAAQ" data-analytics-category="Footer|About Red Hat" data-analytics-text="Sign up now">Sign up now</a></pfe-cta> </rh-footer-block> <rh-footer-block slot="main-secondary"> <h3 slot="header">Select a language</h3> <button id="footer-language-toggle"><img src="https://static.redhat.com/libs/redhat/rh-iconfont/4/svg/web-icon-globe.svg" width="21" height="21" alt="">English<span class="down"></span></button> <div id="footer-language-picker"> <ul> <li><a href="/zh" class="language-link" xml:lang="zh" hreflang="zh" data-analytics-level="3" data-analytics-category="Footer|Language" data-analytics-text="Chinese">简体中文</a></li> <li><a href="/en" class="language-link" xml:lang="en" hreflang="en" data-analytics-level="3" data-analytics-category="Footer|Language" data-analytics-text="English" aria-current="page">English</a></li> <li><a href="/fr" class="language-link" xml:lang="fr" hreflang="fr" data-analytics-level="3" data-analytics-category="Footer|Language" data-analytics-text="French">Français</a></li> <li><a href="/de" class="language-link" xml:lang="de" hreflang="de" data-analytics-level="3" data-analytics-category="Footer|Language" data-analytics-text="German">Deutsch</a></li> <li><a href="/it" class="language-link" xml:lang="it" hreflang="it" data-analytics-level="3" data-analytics-category="Footer|Language" data-analytics-text="Italian">Italiano</a></li> <li><a href="/ja" class="language-link" xml:lang="ja" hreflang="ja" data-analytics-level="3" data-analytics-category="Footer|Language" data-analytics-text="Japanese">日本語</a></li> <li><a href="/ko" class="language-link" xml:lang="ko" hreflang="ko" data-analytics-level="3" data-analytics-category="Footer|Language" data-analytics-text="Korean">한국어</a></li> <li><a href="/pt-br" class="language-link" xml:lang="pt-br" hreflang="pt-br" data-analytics-level="3" data-analytics-category="Footer|Language" data-analytics-text="Portuguese">Português</a></li> <li><a href="/es" class="language-link" xml:lang="es" hreflang="es" data-analytics-level="3" data-analytics-category="Footer|Language" data-analytics-text="Spanish">Español</a></li> </ul> </div> </rh-footer-block> <rh-global-footer slot="global" color-palette="darker"> <h3 slot="links-primary" hidden="" data-analytics-text="Red Hat legal and privacy links" id="rh-footer-auj0cpvob">Red Hat legal and privacy links</h3> <ul slot="links-primary" data-analytics-region="page-footer-bottom-primary" aria-labelledby="rh-footer-auj0cpvob"> <li><a href="/en/about/company" data-analytics-category="Footer|Corporate" data-analytics-text="About Red Hat">About Red Hat</a></li> <li><a href="/en/jobs" data-analytics-category="Footer|Corporate" data-analytics-text="Jobs">Jobs</a></li> <li><a href="/en/events" data-analytics-category="Footer|Corporate" data-analytics-text="Events">Events</a></li> <li><a href="/en/about/office-locations" data-analytics-category="Footer|Corporate" data-analytics-text="Locations">Locations</a></li> <li><a href="/en/contact" data-analytics-category="Footer|Corporate" data-analytics-text="Contact Red Hat">Contact Red Hat</a></li> <li><a href="/en/blog" data-analytics-category="Footer|Corporate" data-analytics-text="Red Hat Blog">Red Hat Blog</a></li> <li><a href="/en/about/our-culture/diversity-equity-inclusion/statement" data-analytics-category="Footer|Corporate" data-analytics-text="Diversity equity and inclusion">Diversity, equity, and inclusion</a></li> <li><a href="https://coolstuff.redhat.com/" data-analytics-category="Footer|Corporate" data-analytics-text="Cool Stuff Store">Cool Stuff Store</a></li> <li><a href="https://www.redhat.com/en/summit" data-analytics-category="Footer|Corporate" data-analytics-text="Red Hat Summit">Red Hat Summit</a></li> </ul> <rh-footer-copyright slot="links-secondary"></rh-footer-copyright> <h3 slot="links-secondary" hidden="" data-analytics-text="Red Hat legal and privacy links" id="rh-footer-kdgi6mp6q">Red Hat legal and privacy links</h3> <ul slot="links-secondary" data-analytics-region="page-footer-bottom-secondary" aria-labelledby="rh-footer-kdgi6mp6q"> <li><a href="/en/about/privacy-policy" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Privacy statement">Privacy statement</a></li> <li><a href="/en/about/terms-use" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Terms of use">Terms of use</a></li> <li><a href="/en/about/all-policies-guidelines" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="All policies and guidelines">All policies and guidelines</a></li> <li><a href="/en/about/digital-accessibility" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Digital accessibility">Digital accessibility</a></li> <li> <span id="teconsent" consent="0,1,2" aria-label="Open Cookie Preferences Modal" role="complementary"> <script src="https://consent.trustarc.com/asset/notice.js/v/v1.7-10255" async="async" crossorigin="" importance="high"></script><a role="link" id="icon-id003787406577936725" tabindex="0" lang="en" aria-haspopup="true" aria-label="Cookie Preferences" class="truste_cursor_pointer">Cookie Preferences</a> </span> </li> </ul> </rh-global-footer> </rh-footer>
macOS
Chrome
No response
Being taken care of in https://github.com/patternfly/patternfly-elements/pull/2435
PR has been merged in patternfly-elements, will be resolved by #801
Describe the bug
There are nested h3's in the mobile accordion in rh-footer. This is because all headers are wrapped in an h3 within the shadowroot of the accordion.
Which Component?
rh-footer, rh-accordion
Related
803
Steps to reproduce
<h3 slot="links-*">
wrapped in an<h3 id="heading">
within the shadowroot ofrh-accordion-header
Expected behaviour
We should probably remove the h3 from rh-accordion if we are using a slot.
Screenshots
Element HTML
Operating System (OS)
macOS
Browser
Chrome
More browser information
No response
Additional Info
No response