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 #3768 from tdonohue/port_3367_to_7x

Browse Source 
[Port dspace-7_x] Accessibility in vocabulary treeview
This commit is contained in:
Tim Donohue
2024-12-19 14:31:25 -06:00
committed by GitHub
parent 81522586dd a8ff6a41e0
commit a8e658a399
2 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,17 +2,20 @@
<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 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>
@@ -21,9 +24,11 @@
</div>
<div class="treeview-container">
<ds-themed-loading *ngIf="loading | async" [showMessage]="false"></ds-themed-loading>
<h2 *ngIf="!(loading | async) && 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) && 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">
@@ -88,13 +93,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

@@ -1,5 +1,5 @@
import { FlatTreeControl } from '@angular/cdk/tree';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, OnChanges, SimpleChanges } from '@angular/core';
import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { Store } from '@ngrx/store';
@@ -29,6 +29,11 @@ import { AlertType } from '../../alert/alert-type';
})
export class VocabularyTreeviewComponent implements OnDestroy, OnInit, OnChanges {
/**
* Implemented to manage focus on input
*/
@ViewChild('searchInput') searchInput!: ElementRef;
/**
* The {@link VocabularyOptions} object
*/
@@ -294,6 +299,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() {