Merge pull request #1252 from 4Science/#1171

Fix accessibility issues #1172 #1167  #1171

Author: tdonohue

src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss

@@ -19,11 +19,15 @@
 .drag-handle {
   visibility: hidden;
   &:hover {
-    cursor: grab;
+    cursor: move;
   }
 }
 
-:host ::ng-deep .bitstream-row:hover .drag-handle {
+.bitstream-row-drag-handle:hover {
+  cursor: move;
+}
+
+:host ::ng-deep .bitstream-row:hover .drag-handle, :host ::ng-deep .bitstream-row-drag-handle:focus .drag-handle {
   visibility: visible !important;
 }
 
@@ -40,3 +44,9 @@
 .cdk-drag-animating {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
+
+.cdk-drop-list-dragging {
+  .bitstream-row-drag-handle, .drag-handle {
+    cursor: grabbing;
+  }
+}

src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.html

@@ -21,7 +21,7 @@
           <ds-item-edit-bitstream [fieldUpdate]="updates[uuid]"
                                   [bundleUrl]="bundle.self"
                                   [columnSizes]="columnSizes">
-            <div class="d-flex align-items-center" slot="drag-handle" cdkDragHandle>
+            <div class="d-flex align-items-center bitstream-row-drag-handle" slot="drag-handle" cdkDragHandle tabindex="0">
               <ds-item-edit-bitstream-drag-handle></ds-item-edit-bitstream-drag-handle>
             </div>
           </ds-item-edit-bitstream>

src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component.html

@@ -1,5 +1,5 @@
 <ng-template #handleView>
-  <div class="drag-handle text-muted float-left p-1 mr-2">
+  <div class="drag-handle text-muted float-left p-1 mr-2" tabindex="0">
     <i class="fas fa-grip-vertical fa-fw" [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
   </div>
 </ng-template>

src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html

@@ -29,7 +29,7 @@
             <span>{{metadata?.value}}</span>
         </div>
         <div *ngIf="(editable | async)" class="field-container">
-            <textarea class="form-control" type="textarea" [(ngModel)]="metadata.value" [dsDebounce]
+            <textarea class="form-control" type="textarea" attr.aria-labelledby="fieldValue" [(ngModel)]="metadata.value" [dsDebounce]
                       (onDebounce)="update()"></textarea>
         </div>
     </div>
@@ -40,7 +40,7 @@
             <span>{{metadata?.language}}</span>
         </div>
         <div *ngIf="(editable | async)" class="field-container">
-            <input class="form-control" type="text" [(ngModel)]="metadata.language" [dsDebounce]
+            <input class="form-control" type="text" attr.aria-labelledby="fieldLang" [(ngModel)]="metadata.language" [dsDebounce]
                    (onDebounce)="update()"/>
         </div>
     </div>

src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html

@@ -25,9 +25,9 @@
     <table class="table table-responsive table-striped table-bordered" *ngIf="((updates$ | async)| dsObjectValues).length > 0">
         <tbody>
         <tr>
-            <th>{{'item.edit.metadata.headers.field' | translate}}</th>
-            <th>{{'item.edit.metadata.headers.value' | translate}}</th>
-            <th class="text-center">{{'item.edit.metadata.headers.language' | translate}}</th>
+            <th><span id="fieldName">{{'item.edit.metadata.headers.field' | translate}}</span></th>
+            <th><span id="fieldValue">{{'item.edit.metadata.headers.value' | translate}}</span></th>
+            <th class="text-center"><span id="fieldLang">{{'item.edit.metadata.headers.language' | translate}}</span></th>
             <th class="text-center">{{'item.edit.metadata.headers.edit' | translate}}</th>
         </tr>
         <tr *ngFor="let updateValue of ((updates$ | async)| dsObjectValues); trackBy: trackUpdate"

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html

@@ -1,4 +1,5 @@
 <li class="nav-item dropdown"
+    (keyup.enter)="activateSection($event)"
     (mouseenter)="activateSection($event)"
     (mouseleave)="deactivateSection($event)">
     <a href="#" class="nav-link dropdown-toggle" routerLinkActive="active"

src/app/search-navbar/search-navbar.component.html

@@ -1,10 +1,10 @@
 <div id="search-navbar-container" [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
   <div class="d-inline-block position-relative">
     <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on">
-      <input #searchInput [@toggleAnimation]="isExpanded" id="query" name="query"
+      <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
              class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1">
-      <a class="submit-icon" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()">
+      <a class="submit-icon" [routerLink]="" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()">
         <em class="fas fa-search fa-lg fa-fw"></em>
       </a>
     </form>

src/app/search-navbar/search-navbar.component.scss

@@ -17,7 +17,7 @@ a.submit-icon {
 }
 
 @media screen and (max-width: map-get($grid-breakpoints, md)) {
-  #query:focus {
+  .query:focus {
     max-width: 250px !important;
     width: 40vw !important;
   }

src/app/shared/auth-nav-menu/auth-nav-menu.component.html

@@ -2,25 +2,26 @@
   <li *ngIf="!(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item"
       (click)="$event.stopPropagation();">
     <div ngbDropdown #loginDrop display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="#" id="dropdownLogin" (click)="$event.preventDefault()" ngbDropdownToggle
-         class="px-1">{{ 'nav.login' | translate }}</a>
-      <div id="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
-           aria-labelledby="dropdownLogin">
+      <a href="#" class="dropdownLogin px-1 " [attr.aria-label]="'nav.login' |translate" (click)="$event.preventDefault()" ngbDropdownToggle>
+        {{ 'nav.login' | translate }}
+      </a>
+      <div class="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
+           [attr.aria-label]="'nav.login' |translate">
         <ds-log-in
           [isStandalonePage]="false"></ds-log-in>
       </div>
     </div>
   </li>
   <li *ngIf="!(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
-    <a id="loginLink" routerLink="/login" routerLinkActive="active" class="px-1">
+    <a routerLink="/login" routerLinkActive="active" class="loginLink px-1">
       {{ 'nav.login' | translate }}<span class="sr-only">(current)</span>
     </a>
   </li>
   <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
     <div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="#" id="dropdownUser" role="button" [attr.aria-label]="'nav.logout' |translate" (click)="$event.preventDefault()" [title]="'nav.logout' | translate" class="px-1" ngbDropdownToggle>
+      <a href="#" role="button" [attr.aria-label]="'nav.logout' |translate" (click)="$event.preventDefault()" [title]="'nav.logout' | translate" class="px-1" ngbDropdownToggle>
         <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
-      <div id="logoutDropdownMenu" ngbDropdownMenu aria-labelledby="dropdownUser">
+      <div class="logoutDropdownMenu" ngbDropdownMenu [attr.aria-label]="'nav.logout' |translate">
         <ds-user-menu></ds-user-menu>
       </div>
     </div>

src/app/shared/auth-nav-menu/auth-nav-menu.component.scss

@@ -1,9 +1,9 @@
-#loginDropdownMenu, #logoutDropdownMenu {
+.loginDropdownMenu, .logoutDropdownMenu {
   min-width: 330px;
   z-index: 1002;
 }
 
-#loginDropdownMenu {
+.loginDropdownMenu {
   min-height: 260px;
 }
 

src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts

@@ -208,7 +208,7 @@ describe('AuthNavMenuComponent', () => {
         });
 
         it('should render login dropdown menu', () => {
-          const loginDropdownMenu = deNavMenuItem.query(By.css('div[id=loginDropdownMenu]'));
+          const loginDropdownMenu = deNavMenuItem.query(By.css('div.loginDropdownMenu'));
           expect(loginDropdownMenu.nativeElement).toBeDefined();
         });
       });
@@ -320,7 +320,7 @@ describe('AuthNavMenuComponent', () => {
       });
 
       it('should render login link', () => {
-        const loginDropdownMenu = deNavMenuItem.query(By.css('a[id=loginLink]'));
+        const loginDropdownMenu = deNavMenuItem.query(By.css('.loginLink'));
         expect(loginDropdownMenu.nativeElement).toBeDefined();
       });
     });

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html

@@ -2,7 +2,8 @@
      [formGroup]="group"
      [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
     <label *ngIf="!isCheckbox && hasLabel"
-           [for]="model.id"
+           [id]="'label_' + model.id"
+           [for]="id"
            [innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
            [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
     <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: model"></ng-container>

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html

@@ -15,7 +15,9 @@
              [cdkDragDisabled]="dragDisabled"
              [cdkDragPreviewClass]="'ds-submission-reorder-dragging'">
           <!-- Item content -->
-          <i class="drag-icon fas fa-grip-vertical fa-fw" [class.invisible]="dragDisabled"></i>
+          <div class="drag-handle" [class.invisible]="dragDisabled" tabindex="0">
+            <i class="drag-icon fas fa-grip-vertical fa-fw"  ></i>
+          </div>
           <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
           <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
                                              [bindId]="false"

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss

@@ -26,8 +26,20 @@
 
 }
 
+.drag-handle {
+  &:hover {
+    cursor: move;
+  }
+
+  &:focus {
+    .drag-icon {
+      visibility: visible;
+    }
+  }
+}
+
 .cdk-drop-list-dragging {
-  .cdk-drag {
+  .drag-handle {
     cursor: grabbing;
     .drag-icon {
       visibility: hidden;

src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html

@@ -1,6 +1,7 @@
 <div [formGroup]="group" class="input-group">
 
     <input ngbDatepicker class="form-control" #datepicker="ngbDatepicker"
+           [attr.aria-labelledby]="'label_' + model.id"
            [class.is-invalid]="showErrorMessages"
            [displayMonths]="model.getAdditional('displayMonths', config['displayMonths'])"
            [id]="id"
@@ -26,6 +27,7 @@
 
         <button class="btn btn-outline-secondary"
                 type="button"
+                [attr.aria-labelledby]="'label_' + model.id"
                 [class.disabled]="model.disabled"
                 [disabled]="model.disabled"
                 (click)="datepicker.toggle()">

src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html

@@ -11,6 +11,7 @@
       <div  *ngFor="let item of columnItems" class="custom-control custom-checkbox">
 
           <input type="checkbox" class="custom-control-input"
+                 [attr.aria-labelledby]="'label_' + model.id"
                  [attr.tabindex]="item.index"
                  [checked]="item.value"
                  [id]="item.id"

src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html

@@ -11,6 +11,7 @@
          [authorityValue]="model.value"
          (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted(sdRef, $event)"></i>
       <input class="form-control"
+             [attr.aria-labelledby]="'label_' + model.id"
              [attr.autoComplete]="model.autoComplete"
              [class.is-invalid]="showErrorMessages"
              [id]="model.id"
@@ -30,6 +31,7 @@
     <div *ngIf="isLookupName()" class="col" >
       <input  class="form-control"
               [ngClass]="{}"
+              [attr.aria-labelledby]="'label_' + model.id"
               [attr.autoComplete]="model.autoComplete"
               [class.is-invalid]="showErrorMessages"
               [id]="id"
@@ -84,7 +86,7 @@
        class="dropdown-menu scrollable-dropdown-menu w-100"
        aria-haspopup="true"
        aria-expanded="false"
-       aria-labelledby="scrollableDropdownMenuButton">
+       [attr.aria-labelledby]="'label_' + model.id">
     <div class="scrollable-menu"
          aria-labelledby="scrollableDropdownMenuButton"
          infiniteScroll
@@ -112,7 +114,7 @@
 </div>
 
 <ng-template #hasInfo let-entry="entry">
-  <ul class="list-unstyled mb-0">
+  <ul class="list-unstyled mb-0" [attr.aria-labelledby]="'label_' + model.id">
     <li class="list-item text-truncate text-primary font-weight-bold">{{entry.value}}</li>
     <li class="list-item text-truncate text-secondary" *ngFor="let item of entry.otherInformation | dsObjNgFor" >
       {{ 'form.other-information.' + item.key | translate }} : {{item.value}}
@@ -121,7 +123,7 @@
 </ng-template>
 
 <ng-template #noInfo let-entry="entry">
-  <ul class="list-unstyled mb-0">
+  <ul class="list-unstyled mb-0" [attr.aria-labelledby]="'label_' + model.id">
     <li class="list-item text-truncate text-primary font-weight-bold">{{entry.value}}</li>
   </ul>
 </ng-template>

src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html

@@ -30,6 +30,7 @@
      (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted($event)"></i>
   <input #instance="ngbTypeahead"
          class="form-control"
+         [attr.aria-labelledby]="'label_' + model.id"
          [attr.autoComplete]="model.autoComplete"
          [class.is-invalid]="showErrorMessages"
          [id]="model.id"
@@ -50,19 +51,24 @@
   <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
 </div>
 
-<input *ngIf="(isHierarchicalVocabulary() | async)"
-       class="form-control custom-select"
-       [attr.autoComplete]="model.autoComplete"
-       [class.is-invalid]="showErrorMessages"
-       [id]="id"
-       [name]="model.name"
-       [placeholder]="model.placeholder"
-       [readonly]="model.readOnly"
-       [type]="model.inputType"
-       [value]="currentValue?.display"
-       (focus)="onFocus($event)"
-       (change)="onChange($event)"
-       (click)="openTree($event)"
-       (keydown)="$event.preventDefault()"
-       (keypress)="$event.preventDefault()"
-       (keyup)="$event.preventDefault()">
+<div *ngIf="(isHierarchicalVocabulary() | async)" class="position-relative right-addon">
+  <i class="dropdown-toggle position-absolute tree-toggle" (click)="openTree($event)"
+     aria-hidden="true"></i>
+  <input class="form-control"
+         [attr.aria-labelledby]="'label_' + model.id"
+         [attr.autoComplete]="model.autoComplete"
+         [class.is-invalid]="showErrorMessages"
+         [class.tree-input]="!model.readOnly"
+         [id]="id"
+         [name]="model.name"
+         [placeholder]="model.placeholder"
+         [readonly]="true"
+         [type]="model.inputType"
+         [value]="currentValue?.display"
+         (focus)="onFocus($event)"
+         (change)="onChange($event)"
+         (click)="openTree($event)"
+         (keydown)="$event.preventDefault()"
+         (keypress)="$event.preventDefault()"
+         (keyup)="$event.preventDefault()">
+</div>

src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.scss

@@ -1,3 +1,5 @@
+@import '../../../../form.component';
+
 :host ::ng-deep .dropdown-menu {
   width: 100% !important;
   max-height: var(--ds-dropdown-menu-max-height);
@@ -21,3 +23,11 @@
   max-height: 85vh !important;
   overflow-y: auto;
 }
+
+.tree-toggle {
+  padding:  0.70rem 0.70rem 0 0.70rem ;
+}
+
+.tree-input[readonly]{
+  background-color: #fff;
+}

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html

@@ -1,24 +1,30 @@
-<div #sdRef="ngbDropdown" ngbDropdown class="w-100">
-  <input ngbDropdownToggle class="form-control custom-select"
-         [attr.autoComplete]="model.autoComplete"
-         [class.is-invalid]="showErrorMessages"
-         [id]="id"
-         [name]="model.name"
-         [readonly]="model.readOnly"
-         [type]="model.inputType"
-         [value]="(currentValue | async)"
-         (blur)="onBlur($event)"
-         (click)="$event.stopPropagation(); openDropdown(sdRef);"
-         (focus)="onFocus($event)"
-         (keypress)="$event.preventDefault()">
+<div #sdRef="ngbDropdown" ngbDropdown display="dynamic" placement="bottom-right" class="w-100">
+  <div class="position-relative right-addon">
+    <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
+       aria-hidden="true"></i>
+    <input class="form-control"
+           [attr.aria-label]="model.placeholder"
+           [attr.autoComplete]="model.autoComplete"
+           [class.is-invalid]="showErrorMessages"
+           [class.scrollable-dropdown-input]="!model.readOnly"
+           [id]="id"
+           [name]="model.name"
+           [readonly]="true"
+           [type]="model.inputType"
+           [value]="(currentValue | async)"
+           (blur)="onBlur($event)"
+           (click)="$event.stopPropagation(); openDropdown(sdRef);"
+           (focus)="onFocus($event)"
+           (keypress)="$event.preventDefault()">
+  </div>
 
   <div ngbDropdownMenu
        class="dropdown-menu scrollable-dropdown-menu w-100"
        aria-haspopup="true"
        aria-expanded="false"
-       aria-labelledby="scrollableDropdownMenuButton">
+       [attr.aria-label]="model.placeholder">
     <div class="scrollable-menu"
-         aria-labelledby="scrollableDropdownMenuButton"
+         [attr.aria-label]="model.placeholder"
          infiniteScroll
          [infiniteScrollDistance]="2"
          [infiniteScrollThrottle]="50"