From edbe041e854313af198744c7c27242e023b74656 Mon Sep 17 00:00:00 2001
From: Michael Spaxman <seanforyou23@gmail.com>
Date: Wed, 27 Jun 2018 02:12:18 +0200
Subject: [PATCH] fix(toolbar): give accessible name to sort and more actions
 button (#380)

* fix(toolbar): give accessible name to sort button

hide icons from screen readers
use accessible names
ensure accessible names appear for cursor navigation or rotor

* [issue-379] make ariaLabels configurable with sensible defaults

add optional ariaLabel property to ActionConfig
set default text in case ariaLabel isn't present in action component
add optional ariaLabel property to ToolbarView
use ariaLabel if set in toolbar component, otherwise use tooltip

* Update action-config.ts

renamed ariaLabel as moreActionsAriaLabel since this is used only for the kebab button

* Update action.component.html

removed unlocalizable, default text
---
 src/app/action/action-config.ts                        | 5 +++++
 src/app/action/action.component.html                   | 3 ++-
 src/app/filter/filter-fields.component.html            | 4 ++--
 src/app/sort/sort.component.html                       | 3 ++-
 src/app/toolbar/example/toolbar-example.component.html | 4 ++--
 src/app/toolbar/toolbar-view.ts                        | 5 +++++
 src/app/toolbar/toolbar.component.html                 | 7 +++++--
 7 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/app/action/action-config.ts b/src/app/action/action-config.ts
index 68ac23857..d2fc0cbec 100644
--- a/src/app/action/action-config.ts
+++ b/src/app/action/action-config.ts
@@ -10,6 +10,11 @@ export class ActionConfig {
    */
   moreActions?: Action[];
 
+  /**
+   * Text announced to screen readers for the action config button
+   */
+  moreActionsAriaLabel?: string;
+  
   /**
    * Set to true to disable secondary actions
    */
diff --git a/src/app/action/action.component.html b/src/app/action/action.component.html
index dfaf352da..ec6ac16f1 100644
--- a/src/app/action/action.component.html
+++ b/src/app/action/action.component.html
@@ -23,7 +23,8 @@
      *ngIf="config.moreActions?.length > 0">
   <button class="btn btn-link dropdown-toggle" type="button" dropdownToggle
           [ngClass]="{'disabled': config.moreActionsDisabled}"
-          (click)="initMoreActionsDropup($event)">
+          (click)="initMoreActionsDropup($event)"
+          [attr.aria-label]="config.moreActionsAriaLabel">
     <span class="fa fa-ellipsis-v"></span>
   </button>
   <ul class="dropdown-menu-right dropdown-menu" aria-labelledby="dropdownKebab" *dropdownMenu>
diff --git a/src/app/filter/filter-fields.component.html b/src/app/filter/filter-fields.component.html
index ffbbeb92c..4ef593e35 100644
--- a/src/app/filter/filter-fields.component.html
+++ b/src/app/filter/filter-fields.component.html
@@ -5,7 +5,7 @@
               tooltip="Filter by" placement="{{config?.tooltipPlacement}}"
               [disabled]="config.disabled === true">
         {{currentField?.title}}
-        <span class="caret"></span>
+        <span aria-hidden="true" class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu" *dropdownMenu>
         <li role="menuitem" *ngFor="let field of config?.fields"
@@ -30,7 +30,7 @@
         <button type="button" class="btn btn-default dropdown-toggle" dropdownToggle
                 [disabled]="config.disabled === true">
           <span class="filter-option pull-left">{{currentValue || currentField?.placeholder}}</span>
-          <span class="caret"></span>
+          <span aria-hidden="true" class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu" *dropdownMenu>
           <li role="menuitem" *ngIf="currentField?.placeholder">
diff --git a/src/app/sort/sort.component.html b/src/app/sort/sort.component.html
index 6a3d1d8ba..6ab108d47 100644
--- a/src/app/sort/sort.component.html
+++ b/src/app/sort/sort.component.html
@@ -3,7 +3,7 @@
     <button type="button" class="btn btn-default dropdown-toggle" dropdownToggle
             [disabled]="config.disabled === true">
       {{currentField?.title}}
-      <span class="caret"></span>
+      <span aria-hidden="true" class="caret"></span>
     </button>
     <ul class="dropdown-menu" role="menu" *dropdownMenu>
       <li role="menuitem" *ngFor="let item of config?.fields" [ngClass]="{'selected': item === currentField}">
@@ -13,6 +13,7 @@
     </ul>
   </div>
   <button class="btn btn-link" type="button"
+          aria-label="Sort Direction"
           [disabled]="config.disabled === true"
           (click)="onChangeDirection()">
     <span class="sort-direction" [ngClass]="getIconStyleClass()"></span>
diff --git a/src/app/toolbar/example/toolbar-example.component.html b/src/app/toolbar/example/toolbar-example.component.html
index baf8b2dba..5d52f7c50 100644
--- a/src/app/toolbar/example/toolbar-example.component.html
+++ b/src/app/toolbar/example/toolbar-example.component.html
@@ -19,7 +19,7 @@ <h4>Toolbar Component Example</h4>
           <ng-template #actionTemplate>
             <span class="dropdown primary-action" dropdown>
               <button class="btn btn-default dropdown-toggle" type="button" dropdownToggle>
-                Menu Action<span class="caret"></span>
+                Menu Action<span aria-hidden="true" class="caret"></span>
               </button>
               <ul class="dropdown-menu" role="menu" *dropdownMenu>
                 <li role="menuitem">
@@ -37,7 +37,7 @@ <h4>Toolbar Component Example</h4>
               </ul>
             </span>
             <button class="btn btn-default primary-action" type="button" (click)="doAdd()">
-              <span class="fa fa-plus"></span>
+              <span aria-hidden="true" class="fa fa-plus"></span>
               Add Action
             </button>
           </ng-template>
diff --git a/src/app/toolbar/toolbar-view.ts b/src/app/toolbar/toolbar-view.ts
index eb0b9961b..1a4ae07a6 100644
--- a/src/app/toolbar/toolbar-view.ts
+++ b/src/app/toolbar/toolbar-view.ts
@@ -21,4 +21,9 @@ export class ToolbarView {
    * A tooltip for the view selector
    */
   tooltip?: string;
+
+  /**
+   * Text announced to screen readers for the action config button
+   */
+  ariaLabel?: string;
 }
diff --git a/src/app/toolbar/toolbar.component.html b/src/app/toolbar/toolbar.component.html
index 99d332be4..6d9e07fc5 100644
--- a/src/app/toolbar/toolbar.component.html
+++ b/src/app/toolbar/toolbar.component.html
@@ -26,9 +26,12 @@
              *ngIf="viewTemplate !== undefined || (config.views)">
           <ng-template [ngTemplateOutlet]="viewTemplate" [ngTemplateOutletContext]="{}"></ng-template>
           <span *ngIf="config.views">
-            <button *ngFor="let view of config.views" class="btn btn-link"
+            <button *ngFor="let view of config.views"
+                    class="btn btn-link"
                     [ngClass]="{'active': isViewSelected(view), 'disabled': view.disabled === true}"
-                    title={{view.tooltip}}  (click)="viewSelected(view)">
+                    [attr.aria-label]="view.ariaLabel || view.tooltip"
+                    title={{view.tooltip}}
+                    (click)="viewSelected(view)">
               <i class="{{view.iconStyleClass}}"></i>
             </button>
           </span>