Merge pull request #404 from appuniversum/feature/accessibility-fixes

Accessibility fixes
appuniversum · Jul 18, 2023 · e4af9d7 · e4af9d7
2 parents ee4f477 + bece517
commit e4af9d7
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 13 deletions.
diff --git a/addon/components/au-accordion.hbs b/addon/components/au-accordion.hbs
@@ -10,8 +10,6 @@
       <div>
         <AuButton
           @skin="tertiary"
-          aria-hidden="true"
-          focusable="false"
           aria-expanded="{{if this.openAccordion 'true' 'false'}}"
           data-test-accordion-button
         >
@@ -28,7 +26,7 @@
           @icon={{this.iconOpen}}
           @alignment="left"
           @size="large"
-          @ariaHidden="true"
+          @ariaHidden={{true}}
           data-test-accordion-icon-open={{this.iconOpen}}
         />
         <span class="au-u-hidden-visually">
@@ -39,7 +37,7 @@
           @icon={{this.iconClosed}}
           @alignment="left"
           @size="large"
-          @ariaHidden="true"
+          @ariaHidden={{true}}
           data-test-accordion-icon-closed={{this.iconClosed}}
         />
         <span class="au-u-hidden-visually">

diff --git a/addon/components/au-brand.hbs b/addon/components/au-brand.hbs
@@ -2,6 +2,7 @@
   <a
     href={{@link}}
     class="au-c-brand au-c-brand--link {{this.tagline}}"
+    aria-labelledby="{{this.id}}-brandTitle"
     ...attributes
   >
     <div class="au-c-brand__logo">
@@ -22,7 +23,10 @@
       </svg>
     </div>
     <p class="au-c-brand__logotype">
-      <span class="au-c-brand__main">Vlaanderen</span>
+      <span
+        id="{{this.id}}-brandTitle"
+        class="au-c-brand__main"
+      >Vlaanderen</span>
       {{#if @tagline}}
         <span class="au-c-brand__tagline">{{@tagline}}</span>
       {{/if}}

diff --git a/addon/components/au-card.hbs b/addon/components/au-card.hbs
@@ -27,12 +27,12 @@
           aria-expanded="{{if this.sectionOpen 'true' 'false'}}"
         >
           {{#if this.sectionOpen}}
-            <AuIcon @icon="remove" @size="large" @ariaHidden="true" />
+            <AuIcon @icon="remove" @size="large" @ariaHidden={{true}} />
             <span class="au-u-hidden-visually au-c-card__toggle-false">
               Verberg
             </span>
           {{else}}
-            <AuIcon @icon="add" @size="large" @ariaHidden="true" />
+            <AuIcon @icon="add" @size="large" @ariaHidden={{true}} />
             <span class="au-u-hidden-visually au-c-card__toggle-true">
               Toon
             </span>
@@ -58,12 +58,12 @@
           aria-expanded="{{if this.sectionOpen 'true' 'false'}}"
         >
           {{#if this.sectionOpen}}
-            <AuIcon @icon="nav-up" @size="large" @ariaHidden="true" />
+            <AuIcon @icon="nav-up" @size="large" @ariaHidden={{true}} />
             <span class="au-u-hidden-visually au-c-card__toggle-false">
               Verberg
             </span>
           {{else}}
-            <AuIcon @icon="nav-down" @size="large" @ariaHidden="true" />
+            <AuIcon @icon="nav-down" @size="large" @ariaHidden={{true}} />
             <span class="au-u-hidden-visually au-c-card__toggle-true">
               Toon
             </span>

diff --git a/addon/components/au-content-header.hbs b/addon/components/au-content-header.hbs
@@ -1,4 +1,4 @@
-<div role="banner" class="au-c-content-header {{this.pictureSize}}">
+<div class="au-c-content-header {{this.pictureSize}}">
   <picture class="au-c-content-header__bg">
     {{yield}}
   </picture>

diff --git a/addon/components/au-icon.hbs b/addon/components/au-icon.hbs
@@ -1,7 +1,11 @@
 <svg
   role="img"
   class="au-c-icon au-c-icon--{{@icon}} {{this.alignment}} {{this.size}}"
-  aria-hidden="{{if @ariaHidden 'false' 'true'}}"
+  aria-hidden="{{if
+    (or (eq @ariaHidden true) (eq @ariaHidden 'true'))
+    'true'
+    'false'
+  }}"
   ...attributes
 >
   <use

diff --git a/app/styles/ember-appuniversum/_p-ember-power-select.scss b/app/styles/ember-appuniversum/_p-ember-power-select.scss
@@ -22,7 +22,7 @@ $ember-power-select-selected-background: var(--au-gray-200) !default;
 
 // Texts
 $ember-power-select-text-color: inherit !default;
-$ember-power-select-placeholder-color: var(--au-gray-600) !default;
+$ember-power-select-placeholder-color: var(--au-gray-700) !default;
 $ember-power-select-highlighted-color: var(--au-blue-700) !default;
 $ember-power-select-disabled-option-color: var(--au-gray-200) !default;
 $ember-power-select-multiple-selection-color: var(--au-gray-900) !default;

diff --git a/stories/5-components/Forms/PowerSelect/SingleSelect.stories.js b/stories/5-components/Forms/PowerSelect/SingleSelect.stories.js
@@ -33,6 +33,7 @@ const Template = (args) => ({
       @options={{this.options}}
       @selected={{this.selected}}
       @onChange={{fn (mut this.selected)}}
+      @placeholder={{this.placeholder}}
       as |singleselect|>
       {{singleselect}}
     </PowerSelect>`,

diff --git a/tests/dummy/app/components/au-icon-list.hbs b/tests/dummy/app/components/au-icon-list.hbs
@@ -7,7 +7,7 @@
         @icon={{icon.name}}
         @size="large"
         @alignment="left"
-        @ariaHidden="true"
+        @ariaHidden={{true}}
       />
       <p>{{icon.name}}</p>
     </div>