Issue 410 accessibility improvements

src/app/+dashboard/about/about.component.html

@@ -9,7 +9,7 @@
 </div>
 
 <div class="container mt-2">
-  <h3 class="text-primary">{{ 'DASHBOARD.ABOUT.TITLE' | translate }}</h3>
+  <h3 class="text-primary" id="about-title">{{ 'DASHBOARD.ABOUT.TITLE' | translate }}</h3>
   <p>Scholars@TAMU is a profile system that hosts searchable expertise for faculty and TAMU organizations by gathering data from institution-level/enterprise systems,
     publicly available research data (e.g., grants and publications), and other authoritative sources. The data is compiled into a profile that you can edit to best represent your
     scholarship and expertise.This system helps to:
@@ -22,9 +22,9 @@ <h3 class="text-primary">{{ 'DASHBOARD.ABOUT.TITLE' | translate }}</h3>
 
   <p><strong>Information Sheets</strong></p>
   <ul>
-    <li><a href="https://scholars.library.tamu.edu/pdf/Scholars%20Admin%20Info%20Sheet.pdf">Benefits for Administrators</a></li>
-    <li><a href="https://scholars.library.tamu.edu/pdf/Scholars%20Faculty%20Info%20Sheet.pdf">Benefits for Faculty</a></li>
-    <li><a href="https://scholars.library.tamu.edu/pdf/infoSheet_ScholarsVersion.pdf">Enhanced Features for Scholars@TAMU (Updates of September 2019)</a></li>
+    <li><a href="https://scholars.library.tamu.edu/pdf/Scholars%20Admin%20Info%20Sheet.pdf" target="_blank">Benefits for Administrators</a></li>
+    <li><a href="https://scholars.library.tamu.edu/pdf/Scholars%20Faculty%20Info%20Sheet.pdf" target="_blank">Benefits for Faculty</a></li>
+    <li><a href="https://scholars.library.tamu.edu/pdf/infoSheet_ScholarsVersion.pdf" target="_blank">Enhanced Features for Scholars@TAMU (Updates of September 2019)</a></li>
   </ul>
 
   <div id="v2">
@@ -59,7 +59,7 @@ <h4 class="text-primary">Data Re-use</h4>
   </div>
   <p>The Scholars@TAMU team continue to provide a system of aggregate services, outreach and training to the TAMU community, add data to profiles, and explore new features for Scholars@TAMU as we try to meet the diverse needs of the Texas A&amp;M University scholarly community.</p>
 
-  <span class="h3 text-primary">{{ 'DASHBOARD.ABOUT.NEW_SCHOLARS_TITLE' | translate }}</span>
+  <span class="h3 text-primary" id="new-scholars-title">{{ 'DASHBOARD.ABOUT.NEW_SCHOLARS_TITLE' | translate }}</span>
 
   <p><strong>Manage Your Profile</strong></p>
 
@@ -106,10 +106,10 @@ <h4 class="text-primary">Data Re-use</h4>
 
   <span class="h3 text-primary">{{ 'DASHBOARD.ABOUT.ABOUT_PROJECT' | translate }}</span>
 
-  <p>Scholars@TAMU is a system provided by the&#160;<a href="https://library.tamu.edu">Texas A&amp;M University Libraries</a>.
-    It is an implementation of the open-source&#160;<a href="http://www.vivoweb.org/info/about-vivo">VIVO</a>&#160;networking tool,
+  <p>Scholars@TAMU is a system provided by the&#160;<a href="https://library.tamu.edu" target="_blank" rel="noopener noreferrer">Texas A&amp;M University Libraries</a>.
+    It is an implementation of the open-source&#160;<a href="http://www.vivoweb.org/info/about-vivo" target="_blank" rel="noopener noreferrer">VIVO</a>&#160;networking tool,
     developed at&#160;<a href="http://vivo.cornell.edu/about">Cornell University</a>.
-    If you have further questions, please see our&#160;<a href="httsp://scholars.library.tamu.edu/faq.php">FAQ</a>&#160;or&#160;
+    If you have further questions, please see our&#160;<a href="httsp://scholars.library.tamu.edu/faq.php" target="_blank" rel="noopener noreferrer">FAQ</a>&#160;or&#160;
     <a href="https://scholars.library.tamu.edu/contact.php">contact the team</a>.
   </p>
 
@@ -124,7 +124,7 @@ <h4 class="text-primary">Data Re-use</h4>
   <span class="h4 text-primary">Early Beta Version in 2016</span>
 
   <div id="about-iframe-video" class="container mt-4 mb-4">
-    <iframe allowfullscreen="allowfullscreen" frameborder="0" height="300" src="https://www.youtube.com/embed/XTs0LmChNWM?rel=0"></iframe>
+    <iframe title="Introduction to Scholars@TAMU video" allowfullscreen="allowfullscreen" frameborder="0" height="300" src="https://www.youtube.com/embed/XTs0LmChNWM?rel=0"></iframe>
   </div>
 
 </div>

src/app/+dashboard/home/home.component.html

@@ -31,6 +31,7 @@
     </div>
   </div>
 </div>
+
 <div class="home-recent mt-2 mb-2" *ngIf="home | async; let home">
   <div class="container">
     <div class="row">
@@ -46,6 +47,7 @@
     </div>
   </div>
 </div>
+
 <div class="sustainable-development-goals mt-2 mb-4">
   <div class="container">
     <div class="row">
@@ -61,7 +63,7 @@
         </div>
       </div>
       <div class="col-md-9">
-        <scholars-sustainable-development-goals></scholars-sustainable-development-goals>
+        <scholars-sustainable-development-goals aria-label="Sustainable development goals section"></scholars-sustainable-development-goals>
       </div>
     </div>
   </div>
@@ -70,17 +72,22 @@
 <ng-template #homeSearchBox>
   <div class="row justify-content-center">
     <div class="col-lg-6 col-md-8 col-sm-10 col-xs-12">
-      <scholars-search-box [styles]="getSearchStyles() | async" [view]="discoveryView | async" placeholder="{{ 'SHARED.SEARCH_BOX.PLACEHOLDER' | translate }}"></scholars-search-box>
+      <scholars-search-box 
+        aria-label="Search box" 
+        [styles]="getSearchStyles() | async" 
+        [view]="discoveryView | async" 
+        placeholder="{{ 'SHARED.SEARCH_BOX.PLACEHOLDER' | translate }}">
+      </scholars-search-box>
     </div>
   </div>
 </ng-template>
 
 <ng-template #homeStats>
   <div class="row justify-content-center home-stats">
     <div class="col-lg-6 col-md-8 col-sm-10 col-xs-12 d-flex flex-row justify-content-center">
-      <scholars-stats-box label="People" classifier="Person"></scholars-stats-box>
-      <scholars-stats-box label="Organizations" classifier="Organization"></scholars-stats-box>
-      <scholars-stats-box label="Research" classifier="Document"></scholars-stats-box>
+      <scholars-stats-box label="People" classifier="Person" aria-label="People statistics"></scholars-stats-box>
+      <scholars-stats-box label="Organizations" classifier="Organization" aria-label="Organizations statistics"></scholars-stats-box>
+      <scholars-stats-box label="Research" classifier="Document" aria-label="Research statistics"></scholars-stats-box>
     </div>
   </div>
 </ng-template>

src/app/+directory/directory.component.html

@@ -7,16 +7,16 @@
     </div>
   </div>
 </div>
-<scholars-sidebar *ngIf="directoryView | async; let directoryView">
+<scholars-sidebar *ngIf="directoryView | async; let directoryView" role="complementary">
   <div class="container mt-2" *ngIf="queryParams | async; let queryParams">
     <div class="headers-row row flex-column-reverse flex-md-row">
       <div class="col-md-8">
-        <span class="h3 text-primary">{{ directoryView.name }}</span>
+        <span id="sidebar-title" class="h3 text-primary">{{ directoryView.name }}</span>
       </div>
       <div class="col-md-4 text-right">
         <span *ngIf="hasExport(directoryView)" class="column-export">
           <a [href]="getDirectoryExportUrl(queryParams, directoryView)" download class="btn">
-            <span class="fa fa-share" aria-hidden="true"></span>
+            <span class="fa fa-share" [attr.aria-hidden]="true"></span>
             <span>{{ 'DIRECTORY.EXPORT' | translate }}</span>
           </a>
         </span>
@@ -27,15 +27,15 @@
         <span *ngIf="showFilter(directoryView, filter)">
           <span class="mr-1">{{getFilterField(directoryView, filter) | formalize}}:</span>
           <span class="mr-2">{{getFilterValue(directoryView, filter) | formalize}}</span>
-          <a class="fa fa-close" [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getDirectoryQueryParamsRemovingFilter(queryParams, filter)"></a>
+          <a class="fa fa-close" [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getDirectoryQueryParamsRemovingFilter(queryParams, filter)" [attr.aria-label]="'DIRECTORY.CLEAR_FILTER' | translate"></a>
         </span>
       </span>
       <span *ngIf="showClearFilters(directoryView, filters)" class="badge badge-light p-2 mr-2 mb-2">
         <a [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getDirectoryQueryParamsClearingFilters(queryParams, directoryView)">Clear</a>
       </span>
     </div>
-    <div class="index">
-      <a class="option" [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getDirectoryQueryParamsResetting(queryParams, directoryView)">
+    <div class="index" role="navigation" [attr.aria-label]="'DIRECTORY.INDEX' | translate">
+      <a class="option" [routerLink]="getDirectoryRouterLink(directoryView)" [queryParams]="getDirectoryQueryParamsResetting(queryParams, directoryView)" >
         <span *ngIf="isActive(directoryView, queryParams, 'All')" class="fa fa-caret-right mr-1"></span>
         <span>{{ 'DIRECTORY.ALL' | translate }}</span>
       </a>

src/app/+discovery/discovery.component.html

@@ -7,11 +7,11 @@
     </div>
   </div>
 </div>
-<scholars-sidebar *ngIf="discoveryView | async; let discoveryView">
+<scholars-sidebar *ngIf="discoveryView | async; let discoveryView" role="complementary">
   <div class="container mt-2" *ngIf="queryParams | async; let queryParams">
     <div class="headers-row row flex-column-reverse flex-md-row">
       <div class="col-md-8">
-        <span class="h4 text-primary">
+        <span id="sidebar-title" class="h4 text-primary">
           <span>{{discoveryView.name}}</span>
           <span *ngIf="query | async; let query">
             <span> {{ 'DISCOVERY.RESULTS' | translate }}:</span>
@@ -22,7 +22,7 @@
       <div class="col-md-4 text-right">
         <span *ngIf="hasExport(discoveryView)" class="column-export">
           <a [href]="getDiscoveryExportUrl(queryParams, discoveryView)" download class="btn">
-            <span class="fa fa-share" aria-hidden="true"></span>
+            <span class="fa fa-share" [attr.aria-hidden]="true"></span>
             <span>{{ 'DISCOVERY.EXPORT' | translate }}</span>
           </a>
         </span>
@@ -33,7 +33,7 @@
         <span *ngIf="showFilter(discoveryView, filter)">
           <span class="mr-1">{{getFilterField(discoveryView, filter) | formalize}}:</span>
           <span class="mr-2">{{getFilterValue(discoveryView, filter) | formalize}}</span>
-          <a class="fa fa-close" [routerLink]="getDiscoveryRouterLink(discoveryView)" [queryParams]="getDiscoveryQueryParamsRemovingFilter(queryParams, filter)"></a>
+          <a class="fa fa-close" [routerLink]="getDiscoveryRouterLink(discoveryView)" [queryParams]="getDiscoveryQueryParamsRemovingFilter(queryParams, filter)" [attr.aria-label]="'SEARCH_BOX.CLEAR_FILTER' | translate"></a>
         </span>
       </span>
       <span *ngIf="showClearFilters(discoveryView, filters)" class="badge badge-light p-2 mr-2 mb-2">
@@ -42,7 +42,8 @@
     </div>
     <ul role="tablist" class="list-unstyled mt-3 nav" *ngIf="discoveryViews | async; let discoveryViews" [ngClass]="{ 'nav-tabs': showTabs(windowDimensions | async), 'nav-pills flex-column': !showTabs(windowDimensions | async) }">
       <li class="nav-item" *ngFor="let discoveryView of discoveryViews">
-        <a class="nav-link font-weight-bold" [routerLink]="getDiscoveryRouterLink(discoveryView)" [queryParams]="getDiscoveryQueryParamsSwitchingDiscoveryView(queryParams, discoveryView)" [class.active]="isActive(discoveryView, url | async)">{{ discoveryView.name }}</a>
+        <a class="nav-link font-weight-bold" [routerLink]="getDiscoveryRouterLink(discoveryView)" [queryParams]="getDiscoveryQueryParamsSwitchingDiscoveryView(queryParams, discoveryView)" [class.active]="isActive(discoveryView, url | async)" role="tab" [attr.aria-label]="false"
+        >{{ discoveryView.name }}</a>
       </li>
     </ul>
     <scholars-pagination [page]="page" [ngSwitch]="discoveryView.layout" [pageSizeOptionsType]="'list'">

src/app/+display/display.component.html

@@ -10,7 +10,7 @@
 <div *ngIf="ready | async" [@fadeIn]>
   <div class="container" *ngIf="individual | async; let individual">
     <div *ngIf="displayView | async; let displayView" class="row">
-      <div *ngIf="showAsideLeft(displayView, individual)" class="d-none d-lg-block col-lg-3 p-0">
+      <div *ngIf="showAsideLeft(displayView, individual)" class="d-none d-lg-block col-lg-3 p-0" role="complementary">
         <ng-container *ngTemplateOutlet="aside"></ng-container>
       </div>
       <div [ngClass]="{ 'col-lg-9': showAside(displayView, individual), 'col-lg-12': !showAside(displayView, individual) }">
@@ -21,16 +21,16 @@
         </div>
         <div class="row mt-4 mb-4">
           <div class="col-12">
-            <ul class="nav" [ngClass]="{ 'nav-tabs': !isMobile(windowDimensions | async), 'flex-column nav-pills': isMobile(windowDimensions | async) }">
+            <ul class="nav" [ngClass]="{ 'nav-tabs': !isMobile(windowDimensions | async), 'flex-column nav-pills': isMobile(windowDimensions | async) }" role="tablist">
               <li class="nav-item" *ngFor="let tab of getTabsToShow(displayView.tabs, individual)">
-                <a class="nav-link" [routerLink]="getDisplayViewTabRoute(displayView, tab)" [routerLinkActive]="['active']">{{tab.name}}</a>
+                <a class="nav-link" [routerLink]="getDisplayViewTabRoute(displayView, tab)" [routerLinkActive]="['active']" role="tab" [attr.aria-controls]="tab.name">{{tab.name}}</a>
               </li>
             </ul>
             <router-outlet></router-outlet>
           </div>
         </div>
       </div>
-      <div *ngIf="showAsideRight(displayView, individual)" class="d-none d-lg-block col-lg-3 p-0">
+      <div *ngIf="showAsideRight(displayView, individual)" class="d-none d-lg-block col-lg-3 p-0" role="complementary">
         <ng-container *ngTemplateOutlet="aside"></ng-container>
       </div>
       <ng-template #aside>

src/app/+display/section/section.component.html

@@ -1,11 +1,11 @@
 <div class="card-header font-weight-bold text-primary text-capitalize">
-  <span>{{section.name}}</span>
+  <span>{{ section.name }}</span>
   <div class="float-right" *ngIf="section.shared">
     <div class="embed-dropdown d-inline-block" placement="bottom-right" ngbDropdown>
-      <i class="fa fa-lg fa-share-alt" aria-hidden="true" ngbDropdownToggle></i>
+      <i class="fa fa-lg fa-share-alt" ngbDropdownToggle ></i>
       <div class="dropdown-menu" ngbDropdownMenu>
         <div class="form-group col-12">
-          <label>{{ 'DISPLAY.EMBEDDABLE.LABEL' | translate }}</label>
+          <label>{{ "DISPLAY.EMBEDDABLE.LABEL" | translate }}</label>
           <div class="input-group">
             <textarea class="form-control" type="text" rows="4" ng-bind-html [value]="getEmbedSnippet()" #embedCode></textarea>
             <span class="input-group-btn ml-2">
@@ -37,4 +37,4 @@
   <div *ngFor="let subsection of section.subsections">
     <scholars-subsection [subsection]="subsection" [individual]="individual"></scholars-subsection>
   </div>
-</div>
+</div>

src/app/+display/subsection/subsection.component.html

@@ -2,7 +2,7 @@
   <div *ngIf="getResources() | async as resources">
     <scholars-pagination *ngIf="resources.length > 0" [page]="page" [pageSizeOptions]="pageSizeOptions" [queryPrefix]="subsection.name">
       <div class="mb-3">
-        <h5 class="font-weight-bold">{{subsection.name}}<span class="badge badge-light ml-2">{{resources.length}}</span></h5>
+        <h5 class="font-weight-bold">{{subsection.name}}<span class="badge badge-light ml-2" aria-live="polite">{{resources.length}}</span></h5>
         <ul class="list-group">
           <li class="list-group-item border-0" *ngFor="let resource of getResourcesPage(resources, subsection.sort, page | async)">
             <div [innerHtml]="subsection.templateFunction(resource) | safeHtml"></div>
@@ -11,4 +11,4 @@ <h5 class="font-weight-bold">{{subsection.name}}<span class="badge badge-light m
       </div>
     </scholars-pagination>
   </div>
-</div>
+</div>

src/app/+visualization/co-author-network/co-author-network.component.html

@@ -1,21 +1,21 @@
 <div *ngIf="individual | async; let individual" [@fadeIn]>
   <div class="float-right">
     <div class="text-nowrap" *ngIf="individual.researcherOn !== undefined">
-      <img src="assets/images/co_investigator_icon.png" height="25" width="25" alt="{{ 'VISUALIZATION.NETWORK.COINVESTIGATOR.ICON_ALT' | translate }}n">
+      <img src="assets/images/co_investigator_icon.png" height="25" width="25" alt="{{ 'VISUALIZATION.NETWORK.COINVESTIGATOR.ICON_ALT' | translate }}">
       <span class="ml-2">
         <a [routerLink]="['/visualization', individual.id, 'Co-investigator Network']">{{ 'VISUALIZATION.NETWORK.COINVESTIGATOR.LABEL' | translate }}</a>
       </span>
     </div>
   </div>
-  <div class="h1"><a href="display/{{individual.id}}">{{individual.name}}</a></div>
+  <div class="h1"><a href="display/{{individual.id}}" [attr.aria-label]="'VISUALIZATION.NETWORK.CLICK_TO_VIEW_PROFILE' | translate">{{individual.name}}</a></div>
   <div class="h2">{{ 'VISUALIZATION.NETWORK.COAUTHOR.LABEL' | translate }}</div>
   <div *ngIf="dataNetwork | async; let dataNetwork" class="mb-4">
     <scholars-chord-diagram
       [dataNetwork]="dataNetwork"
       sourceTooltipKey="VISUALIZATION.NETWORK.COAUTHOR.TOOLTIP.SOURCE"
       targetTooltipKey="VISUALIZATION.NETWORK.COAUTHOR.TOOLTIP.TARGET"
       ribbonTooltipKey="VISUALIZATION.NETWORK.COAUTHOR.TOOLTIP.RIBBON"
-    ></scholars-chord-diagram>
+      ></scholars-chord-diagram>
     <div class="row">
       <div class="col">
         <div class="alert alert-warning" role="alert">

src/app/+visualization/co-investigator-network/co-investigator-network.component.html

@@ -7,7 +7,7 @@
       </span>
     </div>
   </div>
-  <div class="h1"><a href="display/{{individual.id}}">{{individual.name}}</a></div>
+  <div class="h1"><a href="display/{{individual.id}}" [attr.aria-label]="'VISUALIZATION.NETWORK.COINVESTIGATOR.CLICK_TO_VIEW_PROFILE' | translate">{{individual.name}}</a></div>
   <div class="h2">{{ 'VISUALIZATION.NETWORK.COINVESTIGATOR.LABEL' | translate }}</div>
   <div *ngIf="dataNetwork | async; let dataNetwork" class="mb-4">
     <scholars-chord-diagram

src/app/footer/copyright/copyright.component.html

@@ -1,11 +1,11 @@
 <div class="copyright">
   <ul class="list-inline text-center" *ngIf="footer | async; let footer">
     <li class="list-inline-item"><span>{{footer.copyright}}</span></li>
-    <li class="list-inline-item"><span>|</span></li>
+    <li class="list-inline-item"><span aria-hidden="true">|</span></li>
     <li class="list-inline-item"><a href="https://scholars.library.tamu.edu/vivo_editor/pages/terms_scholars">{{ 'FOOTER.COPYRIGHT.TERMS' | translate }}</a></li>
-    <li class="list-inline-item"><span>|</span></li>
+    <li class="list-inline-item"><span aria-hidden="true">|</span></li>
     <li class="list-inline-item"><a href="https://vivo.lyrasis.org/">{{ 'FOOTER.COPYRIGHT.POWERED_BY' | translate }}</a></li>
-    <li class="list-inline-item"><span>-</span></li>
+    <li class="list-inline-item"><span aria-hidden="true">-</span></li>
     <li class="list-inline-item"><a href="https://github.com/TAMULib/scholars-discovery">{{ 'FOOTER.COPYRIGHT.SCHOLARS_DISCOVERY' | translate }}</a></li>
   </ul>
   <!-- <ul class="list-inline text-center">

src/app/footer/footer.component.html

@@ -1,7 +1,9 @@
 <scholars-copyright></scholars-copyright>
 <div class="footer">
   <ul class="list-inline text-center" *ngIf="footer | async; let footer">
-    <li class="list-inline-item" *ngFor="let link of footer.links"><a href="{{link.uri}}">{{link.label}}</a></li>
+    <li class="list-inline-item" *ngFor="let link of footer.links">
+      <a href="{{link.uri}}" >{{link.label}}</a>
+    </li>
     <li class="list-inline-item" *ngIf="(isSuperAdmin | async) === true">
       <a [routerLink]="['/admin']">{{ 'FOOTER.ADMINISTRATION' | translate }}</a>
     </li>

src/app/header/banner/banner.component.html

@@ -1,8 +1,8 @@
 <div class="banner">
   <div class="container" *ngIf="banner | async; let banner">
-    <a [routerLink]="['/']">
-      <img *ngIf="banner.imageUri" src="{{banner.imageUri}}" alt="{{ 'HEADER.BANNER.LOGO_ALT' | translate }}">
-      <h1 hidden="!banner.imageUri" class="font-weight-bold text-white">{{banner.altText}}</h1>
+    <a [routerLink]="['/']" aria-label="Go to homepage">
+      <img *ngIf="banner.imageUri" src="{{banner.imageUri}}" alt="{{ 'HEADER.BANNER.LOGO_ALT' | translate }}" aria-hidden="false">
+      <h1 hidden="!banner.imageUri" class="font-weight-bold text-white" [attr.aria-hidden]="banner.imageUri ? 'true' : 'false'">{{banner.altText}}</h1>
     </a>
   </div>
-</div>
+</div>