mirrors/nomulus
1
0
Fork 0
mirror of https://github.com/google/nomulus synced 2025-12-23 06:15:42 +00:00
Code Issues Releases Wiki Activity

Improve console screen reader interaction (#2656)

Browse Source
This commit is contained in:
Pavlo Tkach
2025-01-31 11:46:25 -05:00
committed by GitHub
parent 6952e0f653
commit 40b6984ffb
8 changed files with 62 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
console-webapp/src/app/app.module.ts
View File

@@ -59,6 +59,7 @@ import { UserDataService } from './shared/services/userData.service';
import { SnackBarModule } from './snackbar.module';
import { SupportComponent } from './support/support.component';
import { TldsComponent } from './tlds/tlds.component';
import { ForceFocusDirective } from './shared/directives/forceFocus.directive';
@NgModule({
declarations: [SelectedRegistrarWrapper],
@@ -78,6 +79,7 @@ export class SelectedRegistrarModule {}
HeaderComponent,
HomeComponent,
LocationBackDirective,
ForceFocusDirective,
UserLevelVisibility,
NavigationComponent,
NewRegistrarComponent,

2
console-webapp/src/app/billingInfo/billingInfo.component.html
View File

@@ -1,5 +1,5 @@
<app-selected-registrar-wrapper>
<h1 class="mat-headline-4">Billing Info</h1>
<h1 class="mat-headline-4" forceFocus>Billing Info</h1>
<div class="console-app__billing">
<div>
<div class="console-app__billing-subhead">

3
console-webapp/src/app/domains/domainList.component.html
View File

@@ -1,6 +1,6 @@
<app-selected-registrar-wrapper>
<div class="console-app-domains">
<h1 class="mat-headline-4">Domains</h1>
<h1 class="mat-headline-4" forceFocus>Domains</h1>
<div
class="console-app-domains__actions-wrapper"
@@ -81,6 +81,7 @@
<button
mat-flat-button
aria-label="Delete Selected Domains"
[attr.aria-hidden]="!selection.hasValue()"
(click)="deleteSelectedDomains()"
>
Delete Selected Domains

2
console-webapp/src/app/registrar/registrarsTable.component.html
View File

@@ -3,7 +3,7 @@
} @else {
<div class="console-app__registrars">
<div class="console-app__registrars-header">
<h1 class="mat-headline-4">Registrars</h1>
<h1 class="mat-headline-4" forceFocus>Registrars</h1>
<div class="spacer"></div>
<button
mat-stroked-button

2
console-webapp/src/app/resources/resources.component.html
View File

@@ -1,4 +1,4 @@
<h1 class="mat-headline-4">Resources</h1>
<h1 class="mat-headline-4" forceFocus>Resources</h1>
<div class="console-app__resources">
<div>
<div class="console-app__resources-subhead">Technical resources</div>

2
console-webapp/src/app/settings/settings.component.html
View File

@@ -1,6 +1,6 @@
<app-selected-registrar-wrapper>
<div class="console-settings">
<h1 class="mat-headline-4">Settings</h1>
<h1 class="mat-headline-4" forceFocus>Settings</h1>
<nav
mat-tab-nav-bar
mat-stretch-tabs="false"

30
console-webapp/src/app/shared/directives/forceFocus.directive.ts Normal file
View File

@@ -0,0 +1,30 @@
// Copyright 2025 The Nomulus Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Directive, ElementRef, effect } from '@angular/core';
@Directive({
selector: '[forceFocus]',
})
export class ForceFocusDirective {
constructor(private el: ElementRef) {
effect(this.processElement.bind(this));
}
processElement() {
this.el.nativeElement.tabIndex = '1';
this.el.nativeElement.focus();
this.el.nativeElement.tabIndex = '-1';
}
}

40
console-webapp/src/app/users/users.component.html
View File

@@ -1,10 +1,10 @@
<app-selected-registrar-wrapper cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
<app-selected-registrar-wrapper>
@if(isLoading) {
<div class="console-app__users-spinner">
<mat-spinner />
</div>
} @else if(selectingExistingUser) {
<div class="console-app__users">
<div class="console-app__users" cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
<h1 class="mat-headline-4">Add existing user</h1>
<p>
<button
@@ -58,24 +58,32 @@
}
</div>
} @else if(usersService.currentlyOpenUserEmail()) {
<app-user-edit></app-user-edit>
<div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
<app-user-edit></app-user-edit>
</div>
} @else if(isNew) {
<h1 class="mat-headline-4">New User Form</h1>
<div class="spacer"></div>
<p>
<button
mat-icon-button
aria-label="Back to users list"
(click)="isNew = false"
>
<mat-icon>arrow_back</mat-icon>
</button>
</p>
<app-user-edit-form [isNew]="true" (onEditComplete)="createNewUser($event)" />
<div cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
<h1 class="mat-headline-4">New User Form</h1>
<div class="spacer"></div>
<p>
<button
mat-icon-button
aria-label="Back to users list"
(click)="isNew = false"
>
<mat-icon>arrow_back</mat-icon>
</button>
</p>
<app-user-edit-form
[isNew]="true"
(onEditComplete)="createNewUser($event)"
/>
</div>
} @else {
<div class="console-app__users">
<div class="console-app__users-header">
<h1 class="mat-headline-4">Users</h1>
<h1 class="mat-headline-4" forceFocus>Users</h1>
<div class="spacer"></div>
<div class="console-app__users-header-buttons">
<button