From 5fa744676e70562699a7802b2e3d4d0e14ac8298 Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Date: Wed, 8 Jan 2025 15:32:23 -0600 Subject: [PATCH 1/4] 9571-qa-unable-to-access-work-type-dropdown-with-keyboard --- .../deep-select-input/deep-select-input.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index ebd47bb6e..6d347fbaa 100644 --- 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 @@ -76,7 +76,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() From 25d15732145c80c6f643fd4ba509cbc5f8f589a3 Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Date: Wed, 8 Jan 2025 15:33:59 -0600 Subject: [PATCH 2/4] 9575-qa-fix-typo-work-type-field --- src/app/types/works.endpoint.ts | 2 +- src/locale/properties/works/works.en.properties | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/types/works.endpoint.ts b/src/app/types/works.endpoint.ts index e8ec76c4a..d86d367d9 100644 --- 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 index 0f37a3dfb..920671fcc 100644 --- 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 From 4d527d64cb39ba17234e8a9a7a7b567deee89680 Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Date: Wed, 8 Jan 2025 16:03:48 -0600 Subject: [PATCH 3/4] 9572-qa-tweak-the-work-type-field-so-it-looks-like-a-dropdown --- .../cdk/deep-select-input/deep-select-input.module.ts | 2 ++ .../deep-select-input/deep-select-input.component.html | 9 +++++---- .../deep-select-input/deep-select-input.component.scss | 4 ++++ .../deep-select-input/deep-select-input.component.ts | 2 ++ .../work-form/work-form/work-form.component.html | 1 + .../work-form/work-form/work-form.component.scss | 8 ++++++++ 6 files changed, 22 insertions(+), 4 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 index 72f22f74a..901003b68 100644 --- 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 index 57e7e9f27..ae9f53d12 100644 --- 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()" > + arrow_drop_down Select a work type 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 index 4d6c9b130..ed4590f09 100644 --- 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 index 6d347fbaa..7aa0fd52b 100644 --- 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 @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 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 index b5eb13c92..a4c99a33c 100644 --- 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]="ariaLabelWork" > 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 index 9b2d2793f..f911c8306 100644 --- 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; + } + } +} From c9bb2ebbdd70bf6db7752848b4338f1f5eb51596 Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Date: Wed, 8 Jan 2025 16:09:25 -0600 Subject: [PATCH 4/4] lmendoza/9571-qa-unable-to-access-work-type-dropdown-with-keyboard --- .../deep-select-input/deep-select-input.component.html | 2 +- .../components/work-form/work-form/work-form.component.html | 2 +- .../components/work-form/work-form/work-form.component.ts | 2 ++ 3 files changed, 4 insertions(+), 2 deletions(-) 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 index ae9f53d12..04c447680 100644 --- 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 @@ -9,7 +9,7 @@ [matMenuTriggerFor]="matMenu" (keydown)="onSpaceBar($event)" [attr.placeholder]="selectItemLabel" - [ariaLabel]="ariaLabelWorkType" + [ariaLabel]="ariaLabel" readonly formControlName="formControl" [value]="selectedItem?.label" 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 index a4c99a33c..e106b1c91 100644 --- 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,7 +42,7 @@ [menu]="workTypeMenu" [formControlRef]="workTypeControl" formControlName="workType" - [aria-label]="ariaLabelWork" + [aria-label]="ariaLabelWorkType" > 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 index 4ea5207cf..4254aba47 100644 --- 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