Merge pull request #155 from devgeniem/TMS-931

TMS-931: General accessibility fixes

Author: eebbi

CHANGELOG.MD

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [1.8.4] - 2023-05-24
+
+## Fixed
+
+- TMS-931: Change back-to-top button to focus main-content
+- TMS-931: Add screen-reader info for links that go to external sites
+- TMS-931: Remove entry__content containers display: grid and add a max-width & centering margins to prevent overflow with zoomed in browsers
+- TMS-931: Navigation accessibility fixes
+- TMS-931: Program search accessibility fixes for zoomed in browsers
+- TMS-931: Added description-list element to single programs info-component
+
 ## [1.8.3] - 2023-05-02
 
 ## Fixed

assets/scripts/back-to-top.js

@@ -23,6 +23,11 @@ export default class BackToTop {
         $( 'html, body' ).animate( {
             scrollTop: 0,
         }, 200 );
+
+        // Clear the current hash if the user has used 'skip to content' button
+        window.location.hash = '';
+        // Add main-content as the location hash
+        window.location.hash = '#main-content';
     }
 
     /**

assets/scripts/external-links.js

@@ -22,6 +22,13 @@ export default class ExternalLinks {
         const domain = window.location.hostname;
         const icon = Common.makeIcon( 'external', 'icon--medium ml-1' );
 
+        // Translations are defined in models/strings.php,
+        // and loaded to windows.s in lib/Assets.php.
+        const translations = window.s.common || {
+            target_blank: 'Opens in a new window',
+            external_link: 'The link takes you to an external website',
+        };
+
         // Links in regular context
         $( '#main-content a[href*="//"]:not(.button, .logo-wall__link, .link-list a, [href*="' + domain + '"])' ).append( icon ); // eslint-disable-line
 
@@ -46,13 +53,17 @@ export default class ExternalLinks {
             $( this ).children( '.icon' ).attr( 'aria-hidden', 'true' );
         } );
 
-        // Translations are defined in models/strings.php,
-        // and loaded to windows.s in lib/Assets.php.
-        const translations = window.s.common || {
-            target_blank: 'Opens in a new window',
-        };
+        // Add screen reader text that informs if the link is an external website
+        $( '#main-content a[href*="//"]:not([href*="' + domain + '"])' ).append( `<span class="is-sr-only external-info">(${ translations.external_link })</span>` ); // eslint-disable-line
 
         // Add instructional text for screen readers on links which open a new window/tab
-        $( 'a[target="_blank"]' ).append( `<span class="is-sr-only">(${ translations.target_blank })</span>` );
+        if ( $( 'a[target="_blank"]' ).children( '.external-info' ).length > 0 ) {
+            // Append the info with external link info
+            $( 'a[target="_blank"] .external-info' ).append( `(${ translations.target_blank })</span>` );
+        }
+        else {
+            // Append info to the link as its own element
+            $( 'a[target="_blank"]' ).append( `<span class="is-sr-only">(${ translations.target_blank })</span>` );
+        }
     }
 }

assets/styles/ui-components/_entry.scss

@@ -1,4 +1,10 @@
 .entry {
+    &__content {
+        max-width: 58.5rem;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
     &__content,
     .topical-content .field-body {
         > p {

assets/styles/ui-components/header/_primary-nav.scss

@@ -12,6 +12,7 @@ $navbar-item-dropdown-accent-color: $primary !default;
     font-family: $family-secondary;
     display: flex;
     justify-content: center;
+    flex-wrap: wrap;
 
     .navbar-item {
         padding: $theme-spacing-three-quarters 0;
@@ -116,6 +117,8 @@ $navbar-item-dropdown-accent-color: $primary !default;
             grid-template-columns: 1fr 1fr 1fr 1fr;
             grid-column-gap: $gap;
             text-transform: none;
+            list-style: none;
+            padding-left: 0;
 
             .navbar-item {
                 padding: 1.411rem 0;

assets/styles/ui-components/header/_secondary-nav.scss

@@ -8,17 +8,14 @@ $secondary-navbar-item-font-weight: 600 !default;
 
 .secondary-menu {
     font-size: .9em;
+    flex-wrap: wrap;
 
-    li {
-        &:not(:first-child) {
-            @include from($desktop) {
-                margin-left: .5rem;
-            }
+    @include from($desktop) {
+        gap: .5rem;
+    }
 
-            @include from($fullhd) {
-                margin-left: 1rem;
-            }
-        }
+    @include from($fullhd) {
+        gap: 1rem;
     }
 
     a {

assets/styles/views/_page-program.scss

@@ -16,6 +16,12 @@
         grid-template-columns: 1fr 1fr;
     }
 
+    &__item {
+        .info-column {
+            max-width: 100%;
+        }
+    }
+
     a {
         &:focus {
             @extend .button-state-focus;