Merge pull request #508 from appuniversum/feature/accessibility-update

Accessibility update / Tested for frontend-subsidiepunt

Author: Windvis

addon/components/au-main-header.gts

@@ -13,7 +13,9 @@ export interface AuMainHeaderSignature {
     appTitle: string;
     brandLink?: string;
     contactRoute?: string;
+    contactLabel?: string;
     homeRoute?: string;
+    navigationAriaLabel?: string;
   };
   Blocks: {
     default: [];
@@ -22,6 +24,16 @@ export interface AuMainHeaderSignature {
 }
 
 export default class AuMainHeader extends Component<AuMainHeaderSignature> {
+  get contactLabel() {
+    if (this.args.contactLabel) return this.args.contactLabel;
+    else return 'Contacteer ons';
+  }
+
+  get navigationAriaLabel() {
+    if (this.args.navigationAriaLabel) return this.args.navigationAriaLabel;
+    else return 'Informatie en instellingen';
+  }
+
   @action
   headerLinkFocus() {
     document.querySelector<HTMLElement>('#main')?.focus();
@@ -49,7 +61,10 @@ export default class AuMainHeader extends Component<AuMainHeaderSignature> {
           Naar de hoofdinhoud
         </a>
       </div>
-      <nav class="au-c-main-header__actions">
+      <nav
+        aria-label={{this.navigationAriaLabel}}
+        class="au-c-main-header__actions"
+      >
         <ul class="au-c-list-horizontal">
           {{#if @contactRoute}}
             <li class="au-c-list-horizontal__item">
@@ -58,7 +73,7 @@ export default class AuMainHeader extends Component<AuMainHeaderSignature> {
                 @skin="secondary"
                 @icon={{QuestionCircleIcon}}
               >
-                Contacteer ons
+                {{this.contactLabel}}
               </AuLink>
             </li>
           {{/if}}
@@ -79,12 +94,7 @@ class NavigationNarrator extends Component {
   }
 
   <template>
-    <div
-      aria-live="assertive"
-      aria-controls="main"
-      aria-atomic="true"
-      aria-relevant="all"
-    >
+    <div aria-live="assertive" aria-atomic="true" aria-relevant="all">
       <span class="au-u-hidden-visually">
         {{this.activeRoute}}
       </span>

stories/5-components/Brand/AuMainHeader.stories.js

@@ -13,6 +13,16 @@ export default {
       control: 'text',
       description: 'Pass a route for the contact link',
     },
+    contactLabel: {
+      control: 'text',
+      description:
+        'Set the label for the contact link (default: Contacteer ons)',
+    },
+    navigationAriaLabel: {
+      control: 'text',
+      description:
+        'Set the aria-label for the navigation (default: Informatie en instellingen)',
+    },
   },
   parameters: {
     layout: 'padded',
@@ -26,6 +36,8 @@ const Template = (args) => ({
       @appTitle={{this.appTitle}}
       @homeRoute={{this.homeRoute}}
       @contactRoute={{this.contactRoute}}
+      @contactLabel={{this.contactLabel}}
+      @navigationAriaLabel={{this.navigationAriaLabel}}
     >
       <AuDropdown @title="Demo dropdown" @alignment="right" role="menu">
         <AuButton @skin="link" @icon="logout" role="menuitem">
@@ -42,4 +54,6 @@ Component.args = {
   appTitle: 'App title',
   homeRoute: 'home',
   contactRoute: 'contact',
+  contactLabel: 'Contacteer ons',
+  navigationAriaLabel: 'Informatie en instellingen',
 };

stories/5-components/Navigation/AuDropdown.stories.js

@@ -47,6 +47,7 @@ export default {
 
 const Template = (args) => ({
   template: hbs`
+    {{! template-lint-disable require-context-role }}
     <AuDropdown
       @title={{this.title}}
       @alignment={{this.alignment}}
@@ -57,20 +58,22 @@ const Template = (args) => ({
       @hideText={{this.hideText}}
       @alert={{this.alert}}
       @onClose={{this.onClose}}
-      role="menu"
     >
       <AuButton @skin="link" @icon="switch" role="menuitem">
         Switch profile
       </AuButton>
       <AuButton @skin="link" @icon="logout" role="menuitem">
         Afmelden
       </AuButton>
-    </AuDropdown>`,
+    </AuDropdown>
+    {{! template-lint-enable require-context-role }}
+  `,
   context: args,
 });
 
 const TemplateSeparator = (args) => ({
   template: hbs`
+    {{! template-lint-disable require-context-role }}
     <AuDropdown
       @title={{this.title}}
       @alignment={{this.alignment}}
@@ -81,7 +84,6 @@ const TemplateSeparator = (args) => ({
       @hideText={{this.hideText}}
       @alert={{this.alert}}
       @onClose={{this.onClose}}
-      role="menu"
     >
       <AuButton @skin="link" role="menuitem">
         Agendapunt toevoegen
@@ -103,9 +105,12 @@ const TemplateSeparator = (args) => ({
       <AuButton @alert="true" @skin="link" @icon="bin" role="menuitem">
         Verwijder
       </AuButton>
-    </AuDropdown>`,
+    </AuDropdown>
+    {{! template-lint-enable require-context-role }}
+  `,
   context: args,
 });
+/* prettier-ignore-end */
 
 export const Component = Template.bind({});
 Component.args = {

styles/components/_c-data-table.scss

@@ -191,7 +191,7 @@
   position: relative;
   text-decoration: underline;
   text-decoration-color: var(--au-gray-300);
-  color: var(--au-gray-600);
+  color: var(--au-gray-700);
   transition: color var(--au-transition);
 
   &:hover {

styles/components/_c-help-text.scss

@@ -6,8 +6,8 @@
    ========================================================================== */
 
 $au-help-text-color: var(--au-gray-900) !default;
-$au-help-text-secondary-color: var(--au-gray-600) !default;
-$au-help-text-tertiary-color: var(--au-gray-600) !default;
+$au-help-text-secondary-color: var(--au-gray-700) !default;
+$au-help-text-tertiary-color: var(--au-gray-700) !default;
 $au-help-text-warning-color: var(--au-orange-700) !default;
 $au-help-text-error-color: var(--au-red-700) !default;
 $au-help-text-font-size: var(--au-small) !default;