search

RedHat-UX / red-hat-design-system

Red Hat's Design System
https://ux.redhat.com
MIT License
98 stars 20 forks source link

[bug] <rh-footer> <rh-accordion> nested heading tags #808

Closed heyMP closed 1 year ago

heyMP commented 1 year ago

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

Steps to reproduce

  1. Go to https://www.redhat.com/en
  2. Reduce the viewport until the mobile accordion displays in the footer
  3. Inspect the a rh-accordion-header
  4. You should see that there is an <h3 slot="links-*"> wrapped in an <h3 id="heading"> within the shadowroot of rh-accordion-header

Expected behaviour

We should probably remove the h3 from rh-accordion if we are using a slot.

Screenshots

Screenshot 2023-03-21 at 10 24 29 AM

Element HTML

<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 &amp; sell" id="rh-footer-aqxvpotco">Try, buy, &amp; sell</h3>
   <ul slot="links-5" aria-labelledby="rh-footer-aqxvpotco">
      <li><a href="/en/products/trials" data-analytics-category="Footer|Try buy &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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&amp;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>

Operating System (OS)

macOS

Browser

Chrome

More browser information

No response

Additional Info

No response

brianferry commented 1 year ago

Being taken care of in https://github.com/patternfly/patternfly-elements/pull/2435

brianferry commented 1 year ago

PR has been merged in patternfly-elements, will be resolved by #801