Fix accessibility issues in docs control (annotate-option, tooltips, navigation) (#56452)

Author: heiskr

src/content-render/stylesheets/accessibility.scss

@@ -0,0 +1,23 @@
+/* Accessibility fixes for tooltip text spacing and other a11y improvements */
+
+/* Fix tooltip text spacing inheritance - Issue #11442 */
+.tooltipped {
+  &::before,
+  &::after {
+    /* Allow tooltips to inherit user's custom text spacing preferences */
+    letter-spacing: inherit !important;
+    word-spacing: inherit !important;
+    line-height: inherit !important;
+  }
+}
+
+/* Enhanced focus indicators for high contrast mode */
+@media (prefers-contrast: high) {
+  .tooltipped {
+    &:focus-visible::before,
+    &:focus-visible::after {
+      outline: 2px solid var(--color-focus-outset);
+      outline-offset: 2px;
+    }
+  }
+}

src/content-render/stylesheets/annotate.scss

@@ -90,6 +90,27 @@
     background: var(--color-segmented-control-button-bg);
     border-color: var(--color-segmented-control-button-selected-border);
   }
+
+  // High contrast theme support
+  @media (prefers-contrast: high) {
+    border-color: var(--color-border-default);
+
+    &:hover {
+      background: var(--color-canvas-subtle);
+      border-color: var(--color-border-emphasis);
+    }
+
+    &.selected {
+      background: var(--color-accent-emphasis);
+      color: var(--color-fg-on-emphasis);
+      border-color: var(--color-border-emphasis);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--color-focus-outset);
+      outline-offset: 2px;
+    }
+  }
 }
 
 .annotate-row {

src/content-render/stylesheets/index.scss

@@ -4,3 +4,4 @@
 @import "syntax-highlighting.scss";
 @import "alerts.scss";
 @import "octicon-table-optimization.scss";
+@import "accessibility.scss";

src/frame/components/sidebar/SidebarNav.tsx

@@ -35,7 +35,11 @@ export const SidebarNav = ({ variant = 'full' }: Props) => {
       className={cx(variant === 'full' ? 'position-sticky d-none border-right d-xxl-block' : '')}
       style={{ width: 326, height: 'calc(100vh - 65px)', top: '65px' }}
     >
-      <nav aria-labelledby="allproducts-menu">
+      <nav
+        aria-labelledby="allproducts-menu"
+        role="navigation"
+        aria-label="Documentation navigation"
+      >
         {variant === 'full' && currentProduct && (
           <div className={cx('d-none px-4 pb-3 border-bottom d-xxl-block')}>
             <AllProductsLink />
@@ -47,6 +51,7 @@ export const SidebarNav = ({ variant = 'full' }: Props) => {
                   // Note the `_product-title` is used by the popover preview cards
                   // when it needs this text for in-page links.
                   className="d-block pl-1 mb-2 h3 color-fg-default no-underline _product-title"
+                  aria-describedby="allproducts-menu"
                 >
                   {currentProductName || currentProduct.name}
                 </Link>
@@ -61,6 +66,8 @@ export const SidebarNav = ({ variant = 'full' }: Props) => {
             'bg-primary overflow-y-auto flex-shrink-0',
           )}
           style={{ width: 326, height: 'calc(100vh - 175px)', paddingBottom: sidebarPaddingBottom }}
+          role="region"
+          aria-label="Page navigation content"
         >
           <SidebarProduct key={router.asPath} />
 

src/landings/components/SidebarProduct.tsx

@@ -33,7 +33,7 @@ export const SidebarProduct = () => {
 
   const productSection = () => (
     <div className="ml-3" data-testid="product-sidebar">
-      <NavList aria-label="Product sidebar">
+      <NavList aria-label="Product sidebar" role="navigation">
         {sidebarTree &&
           sidebarTree.childPages.map((childPage) => (
             <NavListItem key={childPage.href} childPage={childPage} />
@@ -51,15 +51,15 @@ export const SidebarProduct = () => {
     )
     return (
       <div className="ml-3">
-        <NavList aria-label="REST sidebar overview articles">
+        <NavList aria-label="REST sidebar overview articles" role="navigation">
           {conceptualPages.map((childPage) => (
             <NavListItem key={childPage.href} childPage={childPage} />
           ))}
         </NavList>
 
         <hr data-testid="rest-sidebar-reference" className="m-2" />
 
-        <NavList aria-label="REST sidebar reference pages">
+        <NavList aria-label="REST sidebar reference pages" role="navigation">
           {restPages.map((category) => (
             <RestNavListItem key={category.href} category={category} />
           ))}
@@ -90,7 +90,7 @@ function NavListItem({ childPage }: { childPage: ProductTreeNode }) {
     >
       {childPage.title}
       {childPage.childPages.length > 0 && (
-        <NavList.SubNav aria-label={childPage.title} sx={{ '*': { fontSize: 1 } }}>
+        <NavList.SubNav aria-label={`${childPage.title} submenu`} sx={{ '*': { fontSize: 1 } }}>
           {specialCategory && (
             <NavList.Item href={childPage.href} as={Link} aria-current={isActive ? 'page' : false}>
               {childPage.title}
@@ -155,7 +155,7 @@ function RestNavListItem({ category }: { category: ProductTreeNode }) {
     >
       {category.title}
       {category.childPages.length > 0 && (
-        <NavList.SubNav aria-label={category.title} sx={{ '*': { fontSize: 1 } }}>
+        <NavList.SubNav aria-label={`${category.title} submenu`} sx={{ '*': { fontSize: 1 } }}>
           {category.childPages.map((childPage) => {
             return (
               <NavList.Item
@@ -169,7 +169,7 @@ function RestNavListItem({ category }: { category: ProductTreeNode }) {
                 {childPage.title}
 
                 {routePath === childPage.href && miniTocItems.length > 0 && (
-                  <NavList.SubNav aria-label={childPage.title}>
+                  <NavList.SubNav aria-label={`${childPage.title} table of contents`}>
                     {miniTocItems.map((item) => {
                       const isAnchorCurrent = visibleAnchor === item.contents.href
                       return (