hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3367 from Andrea-Guevara/AccessibilityInVocabularyTreeview

Browse Source 
Accessibility in vocabulary treeview
This commit is contained in:
Tim Donohue
2024-12-19 12:08:37 -06:00
committed by GitHub
parent aba988a6a4 73d39abfe5
commit 225a2b6736
2 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
View File

@@ -2,20 +2,24 @@
<div class="treeview-header row mb-1">
<div class="col-12">
<div class="input-group">
<input type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()"
<input #searchInput type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()"
[attr.aria-label]="'vocabulary-treeview.search.form.search-placeholder' | translate"
[placeholder]="'vocabulary-treeview.search.form.search-placeholder' | translate">
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-primary" type="button" (click)="search()" [disabled]="!isSearchEnabled()">
<button class="btn btn-outline-primary" type="button" (click)="search()" [disabled]="!isSearchEnabled()"
[attr.aria-label]="'vocabulary-treeview.search.form.search' | translate">
{{'vocabulary-treeview.search.form.search' | translate}}
</button>
<button class="btn btn-outline-secondary" type="button" (click)="reset()">
<button class="btn btn-outline-secondary" type="button" (click)="reset()"
[attr.aria-label]="'vocabulary-treeview.search.form.reset' | translate">
{{'vocabulary-treeview.search.form.reset' | translate}}
</button>
<button *ngIf="showAdd && this.vocabularyOptions.closed" class="btn btn-outline-primary" type="button" (click)="add()">
<button *ngIf="showAdd && this.vocabularyOptions.closed" class="btn btn-outline-primary" type="button" (click)="add()"
[attr.aria-label]="'vocabulary-treeview.search.form.add' | translate">
{{'vocabulary-treeview.search.form.add' | translate}}
</button>
<button class="btn btn-outline-primary" type="button" (click)="add()" [disabled]="this.vocabularyOptions.closed">
<button class="btn btn-outline-primary" type="button" (click)="add()" [disabled]="this.vocabularyOptions.closed"
[attr.aria-label]="'vocabulary-treeview.search.form.add' | translate">
{{'vocabulary-treeview.search.form.add' | translate}}
</button>
</div>
@@ -24,9 +28,11 @@
</div>
<div class="treeview-container">
<ds-loading *ngIf="loading | async" [showMessage]="false"></ds-loading>
<h2 *ngIf="(loading | async) !== true && dataSource.data.length === 0" class="h4 text-center text-muted mt-4" >
<span>{{'vocabulary-treeview.search.no-result' | translate}}</span>
</h2>
<div aria-live="polite">
<h2 *ngIf="(loading | async) !== true && dataSource.data.length === 0" class="h4 text-center text-muted mt-4" >
<span>{{'vocabulary-treeview.search.no-result' | translate}}</span>
</h2>
</div>
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
<!-- Leaf node -->
<cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="d-flex">
@@ -91,13 +97,15 @@
</cdk-tree-node>
<cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMore" cdkTreeNodePadding>
<button class="btn btn-outline-secondary btn-sm" (click)="loadMore(node.loadMoreParentItem)">
<button class="btn btn-outline-secondary btn-sm" (click)="loadMore(node.loadMoreParentItem)"
[attr.aria-label]="'vocabulary-treeview.load-more' | translate">
{{'vocabulary-treeview.load-more' | translate}}...
</button>
</cdk-tree-node>
<cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMoreRoot">
<button class="btn btn-outline-secondary btn-sm" (click)="loadMoreRoot(node)">
<button class="btn btn-outline-secondary btn-sm" (click)="loadMoreRoot(node)"
[attr.aria-label]="'vocabulary-treeview.load-more' | translate">
{{'vocabulary-treeview.load-more' | translate}}...
</button>
</cdk-tree-node>

10
src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
View File

@@ -8,6 +8,7 @@ import {
} from '@angular/common';
import {
Component,
ElementRef,
EventEmitter,
Input,
OnChanges,
@@ -15,6 +16,7 @@ import {
OnInit,
Output,
SimpleChanges,
ViewChild,
} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
@@ -70,6 +72,11 @@ export type VocabularyTreeItemType = FormFieldMetadataValueObject | VocabularyEn
})
export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges {
/**
* Implemented to manage focus on input
*/
@ViewChild('searchInput') searchInput!: ElementRef;
/**
* The {@link VocabularyOptions} object
*/
@@ -332,6 +339,9 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges
this.storedNodeMap = new Map<string, TreeviewFlatNode>();
this.vocabularyTreeviewService.restoreNodes();
}
if (this.searchInput) {
this.searchInput.nativeElement.focus();
}
}
add() {