Merge pull request #2072 from cncf/scanner/fix-a11y-heading-order

fix(a11y): repair skipped heading levels and retire the heading-order baseline

Author: mrbobbytables

docs/community/index.md

@@ -16,27 +16,27 @@ import GroupLinkStatus from '@site/src/components/GroupLinkStatus';
 
 <div className="pillars pillars-duo">
   <div className="pillar">
-    <h3><Link to="/community/get-involved">Get Involved</Link></h3>
+    <h2><Link to="/community/get-involved">Get Involved</Link></h2>
     <p>How to request access to End User-only spaces, bring your organization in, share a reference architecture, grow from listener to leader on the contribution ladder, and reach the CNCF staff who support end users.</p>
   </div>
   <div className="pillar">
-    <h3><Link to="/community/technical-advisory-board">Technical Advisory Board</Link></h3>
+    <h2><Link to="/community/technical-advisory-board">Technical Advisory Board</Link></h2>
     <p>The body that represents end users within CNCF, surfaces end user needs, reviews reference architectures, and oversees the User Groups. Includes the User Group Governance document that defines how groups are formed, run, and held accountable.</p>
   </div>
   <div className="pillar">
-    <h3><Link to="/community/user-groups">User Groups</Link></h3>
+    <h2><Link to="/community/user-groups">User Groups</Link></h2>
     <p>Long-lived peer groups aligned to an industry vertical or problem domain, such as Public Sector, Telecom, and Platform Engineering, where end users share use cases, patterns, and practical guidance.</p>
   </div>
   <div className="pillar">
-    <h3><Link to="/community/awards">Awards</Link></h3>
+    <h2><Link to="/community/awards">Awards</Link></h2>
     <p>The organizations CNCF has recognized with the Top End User Award for excellence in running cloud native technologies in production, with links to each announcement.</p>
   </div>
   <div className="pillar">
-    <h3><Link to="/community/members">End User Directory</Link></h3>
+    <h2><Link to="/community/members">End User Directory</Link></h2>
     <p>A filterable directory of CNCF End User Members and Contributors, plus organizations represented by public reference architectures or awards, with links to each public profile and its sources.</p>
   </div>
   <div className="pillar">
-    <h3><Link to="/community/projects-born">Projects from End Users</Link></h3>
+    <h2><Link to="/community/projects-born">Projects from End Users</Link></h2>
     <p>Open source projects that started inside end user organizations and grew into CNCF projects, with the organization each one came from.</p>
   </div>
 </div>

docs/practitioners/index.md

@@ -23,19 +23,19 @@ architects, and organizations running cloud native technologies in production.
 
 <div className="pillars">
   <div className="pillar">
-    <h3>Work with proven leaders</h3>
+    <h2>Work with proven leaders</h2>
     <p>Maximize what open source can do for your business, alongside the organizations already doing it at scale.</p>
   </div>
   <div className="pillar">
-    <h3>Stay ahead of change</h3>
+    <h2>Stay ahead of change</h2>
     <p>CNCF projects move at <a href="https://insights.linuxfoundation.org/collection/details/cncf">high velocity</a> — end users keep their organizations in the know on modern infrastructure.</p>
   </div>
   <div className="pillar">
-    <h3>Sustain open source</h3>
+    <h2>Sustain open source</h2>
     <p>Pool resources with your peers to support the sustainable development of the projects you depend on.</p>
   </div>
   <div className="pillar">
-    <h3>Elevate your platform teams</h3>
+    <h2>Elevate your platform teams</h2>
     <p>A supportive, knowledge-focused community where teamwork and empathy help your teams succeed.</p>
   </div>
 </div>

package-lock.json

@@ -95,6 +95,7 @@
   "dependencies": {
     "@docusaurus/core": "3.10.2",
     "@docusaurus/preset-classic": "3.10.2",
+    "@docusaurus/theme-common": "3.10.2",
     "@docusaurus/utils": "3.10.2",
     "@mdx-js/react": "^3.1.1",
     "copy-webpack-plugin": "^11.0.0",

package.json

@@ -39,7 +39,7 @@ function WinnerCard({ entry }) {
       </a>
       <div className={styles.cardBody}>
         <p className={styles.awardLabel}>{awardLabel}</p>
-        <h3 className={styles.orgName}>{organization}</h3>
+        <h2 className={styles.orgName}>{organization}</h2>
         <p className={styles.citation}>{citation}</p>
         <p className={styles.event}>{event}</p>
         <div className={styles.links}>

src/components/AwardsTimeline/index.js

@@ -102,7 +102,7 @@ function PersonCard({ person }) {
         <span className={styles.viewLabel}>View profile</span>
       </button>
       <div className={styles.personInfo}>
-        <h4>{name}</h4>
+        <h3>{name}</h3>
         <p>{role || company}</p>
         {role && <span>{company}</span>}
       </div>

src/components/CommunityPeople/index.js

@@ -63,7 +63,7 @@
 .personInfo {
   padding: 0.9rem 1rem 1rem;
 }
-.personInfo h4 {
+.personInfo h3 {
   font-size: 1rem;
   margin: 0;
 }

src/components/CommunityPeople/styles.module.css

@@ -22,7 +22,7 @@ export function MemberCard({ member }) {
           lazy
         />
         <div className={styles.cardContent}>
-          <h3 className={styles.orgName}>{member.name}</h3>
+          <h2 className={styles.orgName}>{member.name}</h2>
           {member.membershipStatus && (
             <p className={styles.roleLabel}>
               {membershipLabel(member.membershipStatus)}

src/components/MemberDirectory/MemberCard.js

@@ -16,11 +16,11 @@ export default function RadarReports() {
       <ul className={styles.list}>
         {radarReports.map((report) => (
           <li key={report.id} className={styles.item}>
-            <h3 className={styles.title}>
+            <h2 className={styles.title}>
               <a href={report.url} target="_blank" rel="noreferrer">
                 {report.title}
               </a>
-            </h3>
+            </h2>
             {report.publishedAt && (
               <p className={styles.date}>{formatDate(report.publishedAt)}</p>
             )}

src/components/RadarReports/index.js

@@ -23,6 +23,9 @@
 }
 
 .title {
+  /* Same size the h3 rendered at before the outline fix: the heading moved
+     up a level because the list sits directly under the page h1. */
+  font-size: 1.5rem;
   margin: 0 0 0.25rem;
 }