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

@@ -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
    */

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>

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">

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>

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>

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;
 }

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>