fix(docs): headings on left menu and link to design doc for a11y (#2859)

Author: hannahiss

site/assets/scss/_sidebar.scss

@@ -23,6 +23,10 @@
 .bd-links-heading {
   color: var(--bs-emphasis-color);
 
+  @include media-breakpoint-down(lg) {
+    font-size: .875rem;
+  }
+
   // Boosted mod
   svg {
     font-size: 1.5625rem;

site/layouts/_default/docs.html

@@ -1,7 +1,8 @@
 {{ define "body_override" }}<body{{ if (eq .Page.Params.toc true) }} data-bs-spy="scroll" data-bs-target="#TableOfContents"{{ end }}>{{ end }}
 {{ define "main" }}
   <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
-    <nav class="bd-sidebar" aria-label="Docs navigation">
+    <nav class="bd-sidebar" aria-labelledby="docs-nav">
+      <h1 id="docs-nav" class="visually-hidden">Docs navigation</h1>
       <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
         <div class="offcanvas-header border-bottom">
           <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>

site/layouts/_default/single.html

@@ -25,7 +25,7 @@ <h1 class="display-1">{{ .Title | markdownify }}</h1>
             </div>
             {{ else if eq .Title "Orange Design System for web" -}}
             <div class="d-flex flex-column flex-sm-row">
-              <a href="{{ .Site.Params.ods.web }}" class="btn btn-primary" aria-label="Visit Orange Design System for web at system.design.orange.com" title="Visit Orange Design System for web at system.design.orange.com" target="_blank" rel="noopener">Visit system.design.orange.com</a>
+              <a href="{{ .Site.Params.ods.web }}" class="btn btn-primary" title="Visit system.design.orange.com" target="_blank" rel="noopener">Visit system.design.orange.com</a>
             </div>
             {{- end }}
           </div>

site/layouts/partials/docs-sidebar.html

@@ -17,12 +17,12 @@
 
     {{- if $group.pages }}
       <li class="bd-links-group py-2">
-        <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
+        <h2 class="display-5 mb-0 bd-links-heading d-flex w-100 align-items-center fw-semibold">
           {{- if $group.icon }}
             <svg class="bi me-1"{{- if $group.icon_color }} style="color: var(--bs-{{ $group.icon_color }});"{{- end }} aria-hidden="true"><use xlink:href="#{{ $group.icon }}"></use></svg>
           {{- end }}
           {{ $group.title }}
-        </strong>
+        </h2>
 
         <ul class="list-unstyled fw-normal mt-1 pb-2 small">
           {{- range $doc := $group.pages -}}

site/layouts/partials/home/orange-design-system.html

@@ -8,7 +8,7 @@ <h2 class="mb-3 fw-semibold lh-sm">Orange Design System for web</h2>
       Streamline your workflow and improve experience consistency with this cross-platform, scalable and inspiring design system. Designers, developers, marketers and partners, start your digital creations from the ready-to-use resources here!
     </p>
     <p class="d-flex flex-column lead fw-normal mb-0">
-      <a href="{{ .Site.Params.ods.web }}" class="icon-link icon-link-hover fw-semibold" target="_blank" rel="noopener">
+      <a href="{{ .Site.Params.ods.web }}" class="icon-link icon-link-hover fw-semibold" target="_blank" rel="noopener" title="Visit system.design.orange.com">
         Visit system.design.orange.com
         <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
       </a>