[a11y] Multiple fixes (#792)

assets/js/theme/design-system/navAccessibility.js

+var osuny = window.osuny || {};
+
+osuny.navAccessibility = {
+    init: function (element) {
+        this.element = element;
+
+        if (!this.element) {
+            return;
+        }
+
+        this.mainButton = this.element.querySelector('a[href="#main"]');
+
+        if (this.mainButton) {
+            this.mainButton.addEventListener('click', this.focusMain);
+        }
+    },
+    focusMain: function () {
+        var main = document.getElementById('main');
+        main.setAttribute('tabindex', '-1');
+    }
+};
+
+(function () {
+    var navAccessibilityElement = document.getElementById('nav-accessibility')
+    if (navAccessibilityElement) {
+        osuny.navAccessibility.init(navAccessibilityElement);
+    }
+}());

assets/js/theme/design-system/sliders/Arrows.js

@@ -20,6 +20,7 @@ osuny.SliderArrows = function (slider) {
 osuny.SliderArrows.prototype.create = function (direction) {
     var button = document.createElement('button');
     button.classList.add('slider-arrow', 'slider-arrow-' + direction);
+    button.setAttribute('aria-describedby', this.slider.titleId);
     osuny.utils.insertSROnly(button, osuny.i18n.slider[direction]);
     this.container.appendChild(button);
     return button;
@@ -34,12 +35,16 @@ osuny.SliderArrows.prototype.update = function () {
     setButtonEnability(this.previous, !this.slider.state.isFirst);
     setButtonEnability(this.next, !this.slider.state.isLast);
     if (this.progression) {
-        this.progression.innerText = this.slider.state.index + 1 + '/' + this.slider.slides.length;
+        this.updateProgression();
     }
 };
 
+osuny.SliderArrows.prototype.updateProgression = function () {
+    this.progression.innerHTML = this.slider.state.index + 1 + '<span class="sr-only"> sur </span><span aria-hidden="true">/</span>' + this.slider.slides.length;
+};
+
 osuny.SliderArrows.prototype.addProgression = function () {
-    this.progression = document.createElement('div');
+    this.progression = document.createElement('p');
     this.progression.classList.add('slider-progression');
     this.next.before(this.progression);
 };

assets/js/theme/design-system/sliders/Autoplayer.js

@@ -26,6 +26,7 @@ osuny.SliderAutoplayer.prototype.addToggler = function () {
     this.container.append(this.button);
     this.slider.controls.append(this.container);
 
+    this.button.setAttribute('aria-describedby', this.slider.titleId);
     this.a11ySpan = osuny.utils.insertSROnly(this.button, osuny.i18n.slider.pause);
 
     this.button.addEventListener('click', this.toggle.bind(this));

assets/js/theme/design-system/sliders/Pagination.js

@@ -6,8 +6,6 @@ osuny.SliderPagination = function (slider) {
     this.buttons = [];
     this.container = document.createElement('ul');
     this.container.classList.add('slider-pagination');
-    this.container.setAttribute('aria-label', osuny.i18n.slider.pagination_list);
-    this.container.setAttribute('aria-describedby', this.slider.titleId);
     this.slider.controls.appendChild(this.container);
     this.create();
 };

assets/js/theme/design-system/sliders/Slider.js

@@ -190,7 +190,7 @@ osuny.Slider.prototype.focus = function () {
     var canFocus = this.components.autoplay ? !this.components.autoplay.state.isActive : true;
     clearTimeout(this.focusTimeout);
 
-    this.currentSlide.setAttribute('tabindex', '0');
+    this.currentSlide.setAttribute('tabindex', '-1');
 
     if (canFocus) {
         this.focusTimeout = setTimeout(function () {

assets/js/theme/index.js

@@ -10,6 +10,7 @@ import './design-system/dropdowns';
 import './design-system/font';
 import './design-system/mainMenu';
 import './design-system/modal';
+import './design-system/navAccessibility';
 import './design-system/notes';
 import './design-system/search';
 import './design-system/toc';

assets/sass/_theme/configuration/zindex.sass

 // Z-index
 $zindex-aside: 48 !default
 $zindex-body-overlay: 51 !default
+$zindex-dropdown: 3 !default
 $zindex-footer: 50 !default
 $zindex-header: 52 !default
 $zindex-lightbox: 80 !default

assets/sass/_theme/design-system/dropdown.sass

@@ -15,7 +15,7 @@
         background-color: var(--dropdown-background)
         display: none
         position: absolute
-        z-index: 2
+        z-index: $zindex-dropdown
         @include media-breakpoint-down(desktop)
             right: var(--grid-gutter-negative)
             left: var(--grid-gutter-negative)

assets/sass/_theme/design-system/header.sass

@@ -176,7 +176,6 @@ header#document-header
             display: none
             padding: 0
             position: relative
-            text-transform: uppercase
             line-height: 1
             &:focus
                 box-shadow: none
@@ -191,6 +190,7 @@ header#document-header
             span:first-of-type
                 @include meta
                 font-size: pxToRem(14)
+                text-transform: uppercase
             span:last-of-type
                 background: none
                 @include icon-block(menu-line, before)

assets/sass/_theme/sections/diplomas.sass

@@ -74,8 +74,8 @@ ul.diplomas
                 @include h4
 
 .diplomas-select
-    text-align: right
     @include dropdown
+    text-align: right
     .dropdown-menu
         a
             font-size: $body-size

layouts/_default/baseof.html

@@ -15,7 +15,7 @@
     {{- partial "header/accessibility.html" -}}
     {{- partial "hooks/before-header" . -}}
     {{- partial "header/header.html" . -}}
-    <main{{ if .Params.contents }} class="page-with-blocks"{{ end }} id="main" tabindex="-1">
+    <main{{ if .Params.contents }} class="page-with-blocks"{{ end }} id="main">
       {{ if and (site.Params.search.active) (eq site.Params.search.position "fixed")}}
         {{ partial "header/search.html"
           (dict

layouts/partials/header/accessibility.html

-<nav aria-label="{{ i18n "commons.accessibility.shortcut_navigation"}}" class="nav-accessibility">
+<nav aria-label="{{ i18n "commons.accessibility.shortcut_navigation"}}" class="nav-accessibility" id="nav-accessibility">
   <ul>
     <li><a href="#main">{{ i18n "commons.accessibility.main_content" }}</a></li>
     <li class="nav-accessibility__menu"><a href="#navigation">{{ i18n "commons.accessibility.menu" }}</a></li>