Merge pull request #2441 from ORCID/lmendoza/9571-qa-unable-to-access…

…-work-type-dropdown-with-keyboard Lmendoza/9571 qa unable to access work type dropdown with keyboard
ORCID · Jan 8, 2025 · 534fd9f · 534fd9f
2 parents 3f2c852 + c9bb2eb
commit 534fd9f
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 7 deletions.
diff --git a/src/app/cdk/deep-select-input/deep-select-input.module.ts b/src/app/cdk/deep-select-input/deep-select-input.module.ts
@@ -12,6 +12,7 @@ import {
 import { MatMenuModule } from '@angular/material/menu'
 import { MatButtonModule } from '@angular/material/button'
 import { MatLegacyInputModule } from '@angular/material/legacy-input'
+import { MatIconModule } from '@angular/material/icon'
 
 @NgModule({
   declarations: [DeepSelectInputComponent],
@@ -23,6 +24,7 @@ import { MatLegacyInputModule } from '@angular/material/legacy-input'
     SharedModule,
     MatLegacyMenuModule,
     MatLegacyInputModule,
+    MatIconModule,
   ],
   exports: [DeepSelectInputComponent],
 })

diff --git a/src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.html b/src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.html
@@ -5,17 +5,18 @@
     (click)="clickHoverMenuTrigger.openMenu()"
   >
     <input
-      type="text"
       #clickHoverMenuTrigger="matMenuTrigger"
       [matMenuTriggerFor]="matMenu"
       (keydown)="onSpaceBar($event)"
-      readonly
-      matInput
-      [errorStateMatcher]="getMatcher()"
       [attr.placeholder]="selectItemLabel"
+      [ariaLabel]="ariaLabel"
+      readonly
       formControlName="formControl"
       [value]="selectedItem?.label"
+      matInput
+      [errorStateMatcher]="getMatcher()"
     />
+    <mat-icon matSuffix>arrow_drop_down</mat-icon>
     <mat-error *ngIf="invalid" i18n="@@works.selectAWorkType">
       Select a work type
     </mat-error>

diff --git a/src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.scss b/src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.scss
@@ -102,3 +102,7 @@ button.mat-button-wrap-text:not(.mobile):not(.secondaryItem) {
 .not-selectable-label {
   padding: 0 16px;
 }
+
+input{
+  cursor: pointer;
+}
diff --git a/src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.ts b/src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.ts
@@ -50,7 +50,9 @@ export class DeepSelectInputComponent implements ControlValueAccessor {
   @Input() formControlRef: FormControl<any>
   @ViewChild('clickHoverMenuTrigger') clickHoverMenuTrigger: MatMenuTrigger
   @ViewChild('matMenu') matMenu: MatMenuTrigger
+  @Input('aria-label') ariaLabel = 'Deep select input'
   selectItemLabel = $localize`:@@works.pleaseSelectWork:Please select a work type`
+  ariaLabelWorkType = $localize`:@@works.workType:Work type`
 
   subMenus: { [key: string]: any } = {}
   selectedItem: DeepSelectMenu
@@ -76,7 +78,7 @@ export class DeepSelectInputComponent implements ControlValueAccessor {
   }
 
   onSpaceBar(event: KeyboardEvent) {
-    if (event.code === 'Space') {
+    if (event.code === 'Space' || event.code === 'Enter') {
       event.preventDefault()
       event.stopPropagation()
       this.clickHoverMenuTrigger.openMenu()

diff --git a/src/app/record/components/work-form/work-form/work-form.component.html b/src/app/record/components/work-form/work-form/work-form.component.html
@@ -42,6 +42,7 @@
         [menu]="workTypeMenu"
         [formControlRef]="workTypeControl"
         formControlName="workType"
+        [aria-label]="ariaLabelWorkType"
       >
       </app-deep-select-input>
     </div>

diff --git a/src/app/record/components/work-form/work-form/work-form.component.scss b/src/app/record/components/work-form/work-form/work-form.component.scss
@@ -97,3 +97,11 @@ app-deep-select-input {
   width: 100%;
   max-width: 402px;
 }
+
+:host {
+  ::ng-deep {
+    .mat-form-field-appearance-outline .mat-select-arrow-wrapper {
+      transform: none;
+    }
+  }
+}
diff --git a/src/app/record/components/work-form/work-form/work-form.component.ts b/src/app/record/components/work-form/work-form/work-form.component.ts
@@ -69,6 +69,8 @@ export class WorkFormComponent implements OnInit {
   languageLabelAriaLabel = $localize`:@@shared.languageLabelAriaLabel:Select the language used in this form`
   selectCountryLocationLabel = $localize`:@@shared.selectCountryLocationLabel:Select a country or location of publication`
   ariaLabelWork = $localize`:@@shared.ariaLabelWork:Work`
+  ariaLabelWorkType = $localize`:@@works.workType:Work type`
+
 
   @Input() work: Work
   @Input() userRecord: UserRecord

diff --git a/src/app/types/works.endpoint.ts b/src/app/types/works.endpoint.ts
@@ -85,7 +85,7 @@ export const WorkCategoriesLabel = {
   [WorkCategories.other_output]: $localize`:@@works.other:Other`,
   [WorkCategories.dissemination]: $localize`:@@works.dissemination:Dissemination`,
   [WorkCategories.creative]: $localize`:@@works.creative:Creative`,
-  [WorkCategories.dataAndProccesses]: $localize`:@@works.data:Data and processes`,
+  [WorkCategories.dataAndProccesses]: $localize`:@@works.data:Data and process`,
   [WorkCategories.legalAndIp]: $localize`:@@works.legal:Legal and IP`,
   [WorkCategories.teachingAndSupervision]: $localize`:@@works.teaching:Teaching and supervision`,
 }

diff --git a/src/locale/properties/works/works.en.properties b/src/locale/properties/works/works.en.properties
@@ -258,7 +258,7 @@ works.otherLegal=Other legal or IP output
 works.teachingDescription=Working with students
 works.otherTeaching=Other teaching or supervision output
 works.creative=Creative
-works.data=Data and processes
+works.data=Data and process
 works.legal=Legal and IP
 works.teaching=Teaching and supervision
 works.blogPost=Blog post