Digital Collections Accessibility Sprint 5

config/config.tamu.yml

@@ -1,8 +1,8 @@
 rest:
   ssl: true
-  host: api-dev.library.tamu.edu
+  host: oaktrust-dev.library.tamu.edu
   port: 443
-  nameSpace: /dspace7
+  nameSpace: /server
 
 mediaViewer:
   image: true

src/app/shared/dso-page/dso-edit-menu/dso-edit-menu.component.html

@@ -1,4 +1,7 @@
-<div class="dso-edit-menu d-flex" role="menubar">
+<!-- TAMU Customization - aria role menubar only when menuitem are present -->
+<div class="dso-edit-menu d-flex" [attr.role]="(hasSubSections | async) ? 'menubar' : null">
+<!-- <div class="dso-edit-menu d-flex" role="menubar"> -->
+<!-- END TAMU Customization - aria role menubar only when menuitem are present -->
   @for (section of (sections | async); track section) {
     <div class="ms-1">
       <ng-container

src/app/shared/dso-page/dso-edit-menu/dso-edit-menu.component.ts

@@ -7,7 +7,12 @@ import {
   Injector,
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { AuthorizationDataService } from 'src/app/core/data/feature-authorization/authorization-data.service';
+// TAMU Customization - aria role menubar only when menuitem are present
+import { Observable } from 'rxjs';
+
+import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
+// import { AuthorizationDataService } from 'src/app/core/data/feature-authorization/authorization-data.service';
+// END TAMU Customization - aria role menubar only when menuitem are present
 
 import { MenuComponent } from '../../menu/menu.component';
 import { MenuService } from '../../menu/menu.service';
@@ -34,6 +39,17 @@ export class DsoEditMenuComponent extends MenuComponent {
    */
   menuID = MenuID.DSO_EDIT;
 
+  // TAMU Customization - aria role menubar only when menuitem are present
+  /**
+   * Whether the DSO_EDIT menu has sub sections.
+   * 
+   * This is used to determine if the menu items will be
+   * rendered within the role="menubar".
+   * 
+   * @type {Observable<boolean>}
+   */
+  hasSubSections: Observable<boolean>;
+  // END TAMU Customization - aria role menubar only when menuitem are present
 
   constructor(protected menuService: MenuService,
               protected injector: Injector,
@@ -44,4 +60,11 @@ export class DsoEditMenuComponent extends MenuComponent {
     super(menuService, injector, authorizationService, route, themeService);
   }
 
+  // TAMU Customization - aria role menubar only when menuitem are present
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.hasSubSections = this.menuService.hasSubSections(this.menuID, null);
+  }
+  // END TAMU Customization - aria role menubar only when menuitem are present
+
 }

src/app/shared/starts-with/date/starts-with-date.component.html

@@ -4,8 +4,14 @@
       {{ 'browse.startsWith.jump' | translate }}
     </span>
     <div class="col-6 col-md-2">
+      <!-- TAMU Customization - starts with form accessibility updates -->
+      <label class="sr-only" for="year-select">{{ 'browse.startsWith.year' | translate }}</label>
+      <!-- END TAMU Customization - starts with form accessibility updates -->
       <select id="year-select" class="form-select" (change)="setStartsWithYearEvent($event)" [attr.aria-label]="'browse.startsWith.choose_year.label' |translate">
-        <option [value]="-1" [selected]="!startsWithYear">
+        <!-- TAMU Customization - starts with form accessibility updates -->
+        <option [value]="-1" [selected]="!startsWithYear" aria-label="">
+        <!-- <option [value]="-1" [selected]="!startsWithYear"> -->
+        <!-- END TAMU Customization - starts with form accessibility updates -->
           {{ 'browse.startsWith.choose_year' | translate }}
         </option>
         @for (option of startsWithOptions; track option) {
@@ -18,13 +24,24 @@
       </select>
     </div>
     <div class="col-6 col-md-2">
+      <!-- TAMU Customization - starts with form accessibility updates -->
+      <label class="sr-only" for="month-select">{{ 'browse.startsWith.month' | translate }}</label>
+      <!-- END TAMU Customization - starts with form accessibility updates -->
       <select id="month-select" class="form-select" (change)="setStartsWithMonthEvent($event)" [attr.aria-label]="'browse.startsWith.months.none.label' |translate">
         @for (option of monthOptions; track option) {
+          <!-- TAMU Customization - starts with form accessibility updates -->
           <option
             [value]="option"
-            [selected]="option === startsWithMonth ? 'selected': null">
+            [selected]="option === startsWithMonth ? 'selected': null"
+            [attr.aria-label]="option === 'none' ? '' : 'browse.startsWith.months.' + option | translate">
             {{ 'browse.startsWith.months.' + option | translate }}
           </option>
+          <!-- <option
+            [value]="option"
+            [selected]="option === startsWithMonth ? 'selected': null">
+            {{ 'browse.startsWith.months.' + option | translate }}
+          </option> -->
+          <!-- END TAMU Customization - starts with form accessibility updates -->
         }
       </select>
     </div>

src/assets/i18n/en.json5

@@ -1077,6 +1077,10 @@
 
   "browse.startsWith.jump": "Filter results by year or month",
 
+  "browse.startsWith.year": "Filter results by year",
+
+  "browse.startsWith.month": "Filter results by month",
+
   "browse.startsWith.months.april": "April",
 
   "browse.startsWith.months.august": "August",

src/themes/tamu/app/community-list-page/community-list/community-list.component.html

@@ -55,8 +55,8 @@
         <button #toggle type="button" class="btn btn-default btn-transparent" cdkTreeNodeToggle
           [attr.aria-label]="(node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) }"
           (click)="toggleExpanded(node)"
-          (keyup.enter)="toggleExpanded(node)"
-          (keyup.space)="toggleExpanded(node)"
+          (keydown.enter)="toggleExpanded(node)"
+          (keydown.space)="toggleExpanded(node)"
           data-test="expand-button"
           role="button"
           tabindex="0">

src/themes/tamu/app/search-page/search-page.component.html

@@ -0,0 +1,7 @@
+<!-- TAMU Customization - search page single h1 -->
+<h1 class="sr-only">{{ 'search-page.heading' | translate }}</h1>
+<!-- END TAMU Customization - search page single h1 -->
+<!-- TAMU Customization - search page complete heading structure -->
+<h2 class="sr-only">{{ 'search-page.configuration.heading' | translate }}</h2>
+<!-- END TAMU Customization - search page complete heading structure -->
+<ds-search [showCsvExport]="true" [trackStatistics]="true" />

src/themes/tamu/app/search-page/search-page.component.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { SearchConfigurationService } from '../../../../app/core/shared/search/search-configuration.service';
+import { SEARCH_CONFIG_SERVICE } from '../../../../app/my-dspace-page/my-dspace-configuration.service';
+import { SearchPageComponent as BaseComponent } from '../../../../app/search-page/search-page.component';
+import { ThemedSearchComponent } from '../../../../app/shared/search/themed-search.component';
+
+@Component({
+  selector: 'ds-themed-search-page',
+  // styleUrls: ['./search-page.component.scss'],
+  templateUrl: './search-page.component.html',
+  providers: [
+    {
+      provide: SEARCH_CONFIG_SERVICE,
+      useClass: SearchConfigurationService,
+    },
+  ],
+  standalone: true,
+  imports: [
+    TranslateModule,
+    ThemedSearchComponent,
+  ],
+})
+export class SearchPageComponent extends BaseComponent {
+}

src/themes/tamu/app/shared/search/search-results/search-results.component.html

@@ -0,0 +1,67 @@
+@if ((activeFilters$ | async).length > 0 && (appliedFilters$ | async).length === 0) {
+  <div class="row">
+    <div class="col-12">
+      <div class="filters-badge-skeleton-container">
+        <div class="filter-badge-skeleton">
+          <ngx-skeleton-loader [count]="(activeFilters$ | async).length" />
+        </div>
+      </div>
+    </div>
+  </div>
+}
+
+<div class="d-flex justify-content-between">
+  <!-- TAMU Customization - single h1 on search page -->
+  <!--
+  @if (!disableHeader) {
+    <h1>{{ (configuration ? configuration + '.search.results.head' : 'search.results.head') | translate }}</h1>
+  }
+  -->
+  <h2 [ngClass]="{ 'sr-only' : disableHeader }">{{ (configuration ? configuration + '.search.results.head' : 'search.results.head') | translate }}</h2>
+  <!-- END TAMU Customization - single h1 on search page -->
+  @if (showCsvExport) {
+    <ds-search-export-csv [searchConfig]="searchConfig" [total]="searchResults?.payload?.totalElements"></ds-search-export-csv>
+  }
+</div>
+@if (searchResults && searchResults?.hasSucceeded && !searchResults?.isLoading && searchResults?.payload?.page.length > 0) {
+  <div @fadeIn>
+    <ds-viewable-collection
+      [config]="searchConfig.pagination"
+      [sortConfig]="searchConfig.sort"
+      [objects]="searchResults"
+      [hideGear]="true"
+      [showRSS]="true"
+      [selectable]="selectable"
+      [selectionConfig]="selectionConfig"
+      [linkType]="linkType"
+      [context]="context"
+      [hidePaginationDetail]="hidePaginationDetail"
+      [showThumbnails]="showThumbnails"
+      (contentChange)="contentChange.emit($event)"
+      (deselectObject)="deselectObject.emit($event)"
+      (selectObject)="selectObject.emit($event)">
+    </ds-viewable-collection>
+  </div>
+}
+
+@if (isLoading()) {
+  <ds-search-results-skeleton
+    [showThumbnails]="showThumbnails"
+    [numberOfResults]="searchConfig.pagination.pageSize"
+  ></ds-search-results-skeleton>
+}
+
+@if (showError()) {
+  <ds-error
+  message="{{errorMessageLabel() | translate}}"></ds-error>
+}
+@if (searchResults?.payload?.page.length === 0 || searchResults?.statusCode === 400) {
+  <div>
+    {{ 'search.results.no-results' | translate }}
+    <a [routerLink]="['/search']"
+      [queryParams]="{ query: surroundStringWithQuotes(searchConfig?.query) }"
+      queryParamsHandling="merge" role="link" tabindex="0">
+      {{"search.results.no-results-link" | translate}}
+    </a>
+  </div>
+}

src/themes/tamu/app/shared/search/search-results/search-results.component.ts

@@ -0,0 +1,39 @@
+import { AsyncPipe, CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import {
+  fadeIn,
+  fadeInOut,
+} from '../../../../../../app/shared/animations/fade';
+import { ErrorComponent } from '../../../../../../app/shared/error/error.component';
+import { ObjectCollectionComponent } from '../../../../../../app/shared/object-collection/object-collection.component';
+import { SearchExportCsvComponent } from '../../../../../../app/shared/search/search-export-csv/search-export-csv.component';
+import { SearchResultsSkeletonComponent } from '../../../../../../app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component';
+import { SearchResultsComponent as BaseComponent } from '../../../../../../app/shared/search/search-results/search-results.component';
+
+@Component({
+  selector: 'ds-themed-search-results',
+  templateUrl: './search-results.component.html',
+  styleUrls: ['../../../../../../app/shared/search/search-results/search-results.component.scss'],
+  animations: [
+    fadeIn,
+    fadeInOut,
+  ],
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    ErrorComponent,
+    NgxSkeletonLoaderModule,
+    ObjectCollectionComponent,
+    RouterLink,
+    SearchExportCsvComponent,
+    SearchResultsSkeletonComponent,
+    CommonModule,
+    TranslateModule,
+  ],
+})
+export class SearchResultsComponent extends BaseComponent {
+}

src/themes/tamu/app/shared/starts-with/text/starts-with-text.component.html

@@ -0,0 +1,20 @@
+<form class="w-100" [formGroup]="formData" (ngSubmit)="submitForm(formData.value)">
+  <div class="mb-3">
+    <div class="row">
+      <div class="form-group input-group col-sm-12 col-md-6 col-auto">
+        <input class="form-control" [attr.aria-label]="'browse.startsWith.input' | translate" placeholder="{{'browse.startsWith.placeholder' | translate}}" type="text" name="startsWith" formControlName="startsWith" [value]="getStartsWith()" />
+        <span class="input-group-append">
+          <button class="btn btn-primary" type="submit"><i class="fas fa-book-open"></i> {{'browse.startsWith.submit' | translate}}</button>
+        </span>
+      </div>
+    </div>
+    <!-- TAMU Customization - starts with input hint accessibility update -->
+    <small class="text-muted">
+      <span aria-hidden="true">{{'browse.startsWith.hint' | translate}}. </span>
+      <span aria-hidden="true">{{'browse.startsWith.click_here' | translate}}</span>
+      <span><a class="text-decoration-underline" [attr.aria-label]="'browse.startsWith.type_text' | translate" [routerLink]="['../../search']">{{'browse.startsWith.general_search' | translate}}</a>.</span>
+    </small>
+    <!-- <small class="text-muted">{{'browse.startsWith.type_text' | translate}}</small> -->
+    <!-- END TAMU Customization - starts with input hint accessibility update -->
+  </div>
+</form>

src/themes/tamu/app/shared/starts-with/text/starts-with-text.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+// TAMU Customizations
+import { RouterLink } from '@angular/router';
+// END TAMU Customizations
+import { TranslateModule } from '@ngx-translate/core';
+
+import { StartsWithTextComponent as BaseComponent } from '../../../../../../app/shared/starts-with/text/starts-with-text.component';
+import { StartsWithType } from '../../../../../../app/shared/starts-with/starts-with-type';
+import { renderStartsWithFor } from '../../../../../../app/shared/starts-with/starts-with-decorator';
+
+
+@Component({
+  selector: 'ds-starts-with-text',
+  // styleUrls: ['./starts-with-text.component.scss'],
+  styleUrls: ['../../../../../../app/shared/starts-with/text/starts-with-text.component.scss'],
+  templateUrl: './starts-with-text.component.html',
+  // templateUrl: '../../../../../../app/shared/starts-with/text/starts-with-text.component.html',
+  standalone: true,
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    // TAMU Customizations
+    RouterLink,
+    // END TAMU Customizations
+    TranslateModule,
+  ],
+})
+@renderStartsWithFor(StartsWithType.text)
+export class StartsWithTextComponent extends BaseComponent {
+}

src/themes/tamu/assets/i18n/en.json5

@@ -78,4 +78,21 @@
   "nav.mydspace": "My OAKTrust",
 
   "register-page.registration.info": "Register an account to subscribe to collections for email updates, and submit new items to OAKTrust.",
+
+  "search-page.heading": "Search OAKTrust",
+
+  "search-page.configuration.heading": "Search Configuration",
+
+  "browse.startsWith.input": "To browse a location in the index",
+
+  "browse.startsWith.hint": "To browse a location in the index, enter the first few letters",
+
+  "browse.startsWith.click_here": "Click here for a ",
+
+  "browse.startsWith.general_search": "general search",
+
+  "browse.startsWith.type_text": "Click here for a general search",
+
+  "browse.startsWith.placeholder": "Enter the first few letters",
+
 }

src/themes/tamu/eager-theme.module.ts

@@ -8,11 +8,14 @@ import { HomeNewsComponent } from './app/home-page/home-news/home-news.component
 import { NavbarComponent } from './app/navbar/navbar.component';
 
 // TAMU Customizations
-import { LoginPageComponent } from './app/login-page/login-page.component';
-import { LogoutPageComponent } from './app/logout-page/logout-page.component';
 import { CommunityListComponent } from './app/community-list-page/community-list/community-list.component';
 import { CommunityPageSubCollectionListComponent } from './app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component';
 import { CommunityPageSubCommunityListComponent } from './app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component';
+import { LoginPageComponent } from './app/login-page/login-page.component';
+import { LogoutPageComponent } from './app/logout-page/logout-page.component';
+import { SearchPageComponent } from './app/search-page/search-page.component';
+import { SearchResultsComponent } from './app/shared/search/search-results/search-results.component';
+import { StartsWithTextComponent } from './app/shared/starts-with/text/starts-with-text.component';
 import { SubmissionSectionLicenseComponent } from './app/submission/sections/license/section-license.component';
 // END TAMU Customizations
 
@@ -34,6 +37,9 @@ const DECLARATIONS = [
   CommunityPageSubCommunityListComponent,
   LoginPageComponent,
   LogoutPageComponent,
+  SearchPageComponent,
+  SearchResultsComponent,
+  StartsWithTextComponent,
   SubmissionSectionLicenseComponent,
   // END TAMU Customizations
 ];