feat(footer): special rendering for active links for better a11y (#1859)

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

scss/_footer.scss

@@ -28,8 +28,12 @@
       .nav-link {
         outline-offset: $focus-visible-outer-offset; // Override outline offset coming from .navbar-nav
 
-        &.active::before {
-          content: unset;
+        &.active {
+          text-decoration: underline;
+
+          &::before {
+            content: unset;
+          }
         }
       }
     }

site/content/docs/5.3/components/footer.md

@@ -109,6 +109,22 @@ The footer is a container with a `.footer-terms` class. This footer bar is **man
 {{< /orange-footer >}}
 {{< /example >}}
 
+### Accessibility
+
+Add the `.active` class on `.nav-link` to indicate the current page.
+
+Please note that you should also add the `aria-current` attribute on the active `.nav-link`.
+
+{{< example class="p-0" >}}
+{{< orange-footer service=true show_active_link=true >}}
+{{< /orange-footer >}}
+{{< /example >}}
+
+{{< example class="p-0" >}}
+{{< orange-footer mandatory=true show_active_link=true >}}
+{{< /orange-footer >}}
+{{< /example >}}
+
 ## CSS
 
 ### Variables

site/content/docs/5.3/examples/footers/index.html

@@ -13,12 +13,12 @@ <h1 class="visually-hidden">Footers Boosted example</h1>
 
   <div class="b-example-divider"></div>
 
-  {{< orange-footer mandatory=true id="1" >}}
+  {{< orange-footer mandatory=true in_examples=true id="1" >}}
   {{< /orange-footer >}}
 
   <div class="b-example-divider"></div>
 
-  {{< orange-footer nav=true mandatory=true id="2" >}}
+  {{< orange-footer nav=true mandatory=true in_examples=true id="2" >}}
   {{< /orange-footer >}}
 
   <div class="b-example-divider"></div>

site/content/docs/5.3/examples/form/index.html

@@ -222,7 +222,7 @@ <h2 class="visually-hidden">Sitemap and information</h2>
       <li><a class="nav-link" href="#">Privacy</a></li>
       <li><a class="nav-link" href="#">Cookie policy</a></li>
       <li><a class="nav-link" href="#">Accessibility statement</a></li>
-      <li><a class="nav-link" id="test" href="#" aria-current="page">Become a reseller</a></li>
+      <li><a class="nav-link active" id="test" href="#" aria-current="page">Become a reseller</a></li>
     </ul>
   </div>
 </footer>

site/content/docs/5.3/migration.md

@@ -88,6 +88,7 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
 
 - **Orange footer**
   - <span class="badge bg-warning">Warning</span> For accessibility reasons, having a `aria-labelledby` on the collapse element in the accordions used in Orange footer is not necessary and can be removed. Be careful to not remove the corresponding `id` if used for other purposes. Please reflect these modifications into your websites.
+  - <span class="badge bg-success">New</span> An active link selector has been added for accessibility purpose. It might be a useful modification to propagate into your websites if you have this same kind of footer navigation.
 
 - **Progress bars**
   - The markup for [progress bars]({{< docsref "/components/progress" >}}) has been updated in v5.3.0. Due to the placement of `role` and various `aria-` attributes on the inner `.progress-bar` element, **some screen readers were not announcing zero value progress bars**. Now, `role="progressbar"` and the relevant `aria-*` attributes are on the outer `.progress` element, leaving the `.progress-bar` purely for the visual presentation of the bar and optional label.

site/layouts/shortcodes/orange-footer.html

@@ -8,6 +8,7 @@
     * service: Display service content - default = false
     * mandatory: Display mandatory content - default = false
     * in_examples: Display in_examples content - default = false
+    * show_active_link: Display active link in footer - default = false
     * id: Set an id for accordions and the footer itself
 */ -}}
 
@@ -17,6 +18,7 @@
 {{- $service := .Get "service" | default false -}}
 {{- $mandatory := .Get "mandatory" | default false -}}
 {{- $in_examples := .Get "in_examples" | default false -}}
+{{- $show_active_link := .Get "show_active_link" | default false -}}
 {{- $id := .Get "id" -}}
 {{- $input := .Inner -}}
 
@@ -154,7 +156,7 @@ <h3 class="accordion-header footer-heading" id="headingFour{{ $id }}">
     <ul class="navbar-nav gap-3 gap-md-4">
       <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#locate"/></svg><span>Store locator</span></a></li>
       <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#coverage"/></svg><span>Coverage checker</span></a></li>
-      <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#contact"/></svg><span>Contact us</span></a></li>
+      <li>{{- if $show_active_link }}<a class="nav-link gap-1 active" href="#" aria-current="page">{{- else }}<a class="nav-link gap-1" href="#">{{- end }}<svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#contact"/></svg><span>Contact us</span></a></li>
       <li><a class="nav-link gap-1" href="#"><svg width="1.875rem" height="1.875rem" focusable="false" aria-hidden="true"><use xlink:href="/docs/{{ .Site.Params.docs_version }}/assets/img/boosted-sprite.svg#protection"/></svg><span>Child protection</span></a></li>
     </ul>
   </div>
@@ -168,7 +170,11 @@ <h3 class="accordion-header footer-heading" id="headingFour{{ $id }}">
       <li class="fw-bold">© Orange {{ now.Format "2006" }}</li>
       <li><a class="nav-link" href="#">Terms and conditions</a></li>
       <li><a class="nav-link" href="#">Privacy</a></li>
+      {{- if $show_active_link }}
+      <li><a class="nav-link active" href="#" aria-current="page">Accessibility statement</a></li>
+      {{- else }}
       <li><a class="nav-link" href="#">Accessibility statement</a></li>
+      {{- end }}
       <li><a class="nav-link" href="#">Cookie policy</a></li>
     </ul>
   </div>