From 8c6afbb03dbff230ce68aafdfb946fb97a84db74 Mon Sep 17 00:00:00 2001
From: Juan Pablo Mitriatti <juan.mitriatti@gmail.com>
Date: Fri, 20 Feb 2026 13:03:04 -0300
Subject: [PATCH] fix(a11y): correct heading hierarchy in React components

Fixed heading hierarchy issues to improve accessibility by correcting
heading level skips in AnchorMenu, ImageCarousel, and ImageGalleryCarousel.

- Changed AnchorMenu from h4 to h2 to avoid skipping heading levels
- Changed ImageCarousel and ImageGalleryCarousel from h3 to h2
- Updated CSS in unity-bootstrap-theme to maintain visual appearance
- Used heading-three variables for h2 in image captions
- Added explicit font-size, line-height, and letter-spacing
- Ensures h2 displays identically to previous h3/h4 styles

These changes ensure proper semantic HTML structure without affecting
visual design.
---
 .../src/scss/extends/_anchor-menu.scss                   | 2 ++
 .../unity-bootstrap-theme/src/scss/extends/_images.scss  | 5 ++++-
 .../src/components/AnchorMenu/AnchorMenu.jsx             | 6 +++---
 .../src/components/AnchorMenu/AnchorMenu.styles.js       | 2 +-
 .../components/ImageCarousel/ImageCarousel.jsx           | 2 +-
 .../ImageGalleryCarousel/ImageGalleryCarousel.jsx        | 2 +-
 .../core/components/BaseCarousel/glide/glide.theme.scss  | 9 +++++++++
 7 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_anchor-menu.scss b/packages/unity-bootstrap-theme/src/scss/extends/_anchor-menu.scss
index 138af3579e..09f7040869 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_anchor-menu.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_anchor-menu.scss
@@ -17,6 +17,8 @@
 
   h4, h2 {
     font-size: 1rem;
+    line-height: 1.5rem;
+    letter-spacing: -0.015rem;
     padding: 0 !important;
 
     &:hover {
diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_images.scss b/packages/unity-bootstrap-theme/src/scss/extends/_images.scss
index 4d9e30368b..89c1d1c5f5 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_images.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_images.scss
@@ -44,9 +44,12 @@
       background: $uds-color-background-white 0% 0% no-repeat padding-box;
       padding: 2rem;
       font-size: $uds-size-font-medium;
-      h3, .h3 {
+      h2, h3, .h2, .h3 {
         color: $asu-gray-1;
         margin: 0 0 1rem 0;
+        font-size: $heading-three-font-size;
+        line-height: $heading-three-line-height;
+        letter-spacing: $heading-three-letter-spacing;
       }
     }
     .uds-caption-text {
diff --git a/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.jsx b/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.jsx
index 8e53cf5562..8c4ff25fc0 100644
--- a/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.jsx
+++ b/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.jsx
@@ -223,13 +223,13 @@ export const AnchorMenu = ({
                 data-bs-target="#collapseAnchorMenu"
                 aria-controls="collapseAnchorMenu"
               >
-                <h4>
+                <h2>
                   {menuTitle}:<i className="fas fa-chevron-down" />
-                </h4>
+                </h2>
               </button>
             </GaEventWrapper>
           ) : (
-            <h4>{menuTitle}:</h4>
+            <h2>{menuTitle}:</h2>
           )}
 
           <div
diff --git a/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.styles.js b/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.styles.js
index d0db166d68..bb019213f4 100644
--- a/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.styles.js
+++ b/packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.styles.js
@@ -18,7 +18,7 @@ const AnchorMenuWrapper = styled.div`
     background-color: transparent;
     border: none;
     cursor: default;
-    h4 {
+    h4, h2 {
       align-items: center;
     }
     i {
diff --git a/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.jsx b/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.jsx
index dbfbaf6e7f..1d7fe9cc58 100644
--- a/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.jsx
+++ b/packages/unity-react-core/src/components/ComponentCarousel/components/ImageCarousel/ImageCarousel.jsx
@@ -52,7 +52,7 @@ const htmlTemplate = ({ id, imageSource, imageAltText, title, content }) => ({
                 <div dangerouslySetInnerHTML={{ __html: content }} />
               ) : (
                 <>
-                  <h3>{title}</h3>
+                  <h2>{title}</h2>
                   {}
                   <div dangerouslySetInnerHTML={{ __html: content }} />
                 </>
diff --git a/packages/unity-react-core/src/components/ComponentCarousel/components/ImageGalleryCarousel/ImageGalleryCarousel.jsx b/packages/unity-react-core/src/components/ComponentCarousel/components/ImageGalleryCarousel/ImageGalleryCarousel.jsx
index 4ec496fca5..cbb8733909 100644
--- a/packages/unity-react-core/src/components/ComponentCarousel/components/ImageGalleryCarousel/ImageGalleryCarousel.jsx
+++ b/packages/unity-react-core/src/components/ComponentCarousel/components/ImageGalleryCarousel/ImageGalleryCarousel.jsx
@@ -186,7 +186,7 @@ const CustomNavComponent = ({ instanceName, imageItems, hasContent }) => {
           data-testid="image-gallery-content-container"
         >
           <div className="uds-caption-text">
-            {title ? <h3>{title}</h3> : null}
+            {title ? <h2>{title}</h2> : null}
             {}
             <div dangerouslySetInnerHTML={{ __html: content }} />
           </div>
diff --git a/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/glide/glide.theme.scss b/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/glide/glide.theme.scss
index 793b4f4bf3..8c57bc2122 100644
--- a/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/glide/glide.theme.scss
+++ b/packages/unity-react-core/src/components/ComponentCarousel/core/components/BaseCarousel/glide/glide.theme.scss
@@ -7,6 +7,9 @@ $uds-breakpoint-sm: 576px;
 $uds-breakpoint-lg: 1260px;
 $asu-gray-1: #191919;
 $uds-color-brand-gold: #ffc627; // ASU Gold brand color
+$heading-three-font-size: 1.5rem;
+$heading-three-line-height: 1.75rem;
+$heading-three-letter-spacing: -0.0525rem;
 
 @mixin shadow {
   // At start, no "to right" in ::after rule
@@ -284,6 +287,12 @@ $uds-color-brand-gold: #ffc627; // ASU Gold brand color
     figcaption {
       padding: 0 0.75rem;
       font-size: 0.75rem;
+
+      h2 {
+        font-size: $heading-three-font-size;
+        line-height: $heading-three-line-height;
+        letter-spacing: $heading-three-letter-spacing;
+      }
     }
 
     .image-navigator {