Fixed #10670 - Tree | aria-label support for the toggler icon

primefaces · Sep 24, 2021 · d57db40 · d57db40
1 parent 4b9ea75
commit d57db40
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/app/components/tree/tree.ts b/src/app/components/tree/tree.ts
@@ -25,7 +25,7 @@ import {RippleModule} from 'primeng/ripple';
                     [draggable]="tree.draggableNodes" (dragstart)="onDragStart($event)" (dragend)="onDragStop($event)" [attr.tabindex]="0"
                     [ngClass]="{'p-treenode-selectable':tree.selectionMode && node.selectable !== false,'p-treenode-dragover':draghoverNode, 'p-highlight':isSelected()}" role="treeitem"
                     (keydown)="onKeyDown($event)" [attr.aria-posinset]="this.index + 1" [attr.aria-expanded]="this.node.expanded" [attr.aria-selected]="isSelected()" [attr.aria-label]="node.label">
-                    <button type="button" class="p-tree-toggler p-link" (click)="toggle($event)" pRipple tabindex="-1">
+                    <button type="button" [attr.aria-label]="tree.togglerAriaLabel" class="p-tree-toggler p-link" (click)="toggle($event)" pRipple tabindex="-1">
                         <span class="p-tree-toggler-icon pi pi-fw" [ngClass]="{'pi-chevron-right':!node.expanded,'pi-chevron-down':node.expanded}"></span>
                     </button>
                     <div class="p-checkbox p-component" [ngClass]="{'p-checkbox-disabled': node.selectable === false}" *ngIf="tree.selectionMode == 'checkbox'" [attr.aria-checked]="isSelected()">
@@ -66,7 +66,7 @@ import {RippleModule} from 'primeng/ripple';
                         <td class="p-treenode" [ngClass]="{'p-treenode-collapsed':!node.expanded}">
                             <div class="p-treenode-content" tabindex="0" [ngClass]="{'p-treenode-selectable':tree.selectionMode,'p-highlight':isSelected()}" (click)="onNodeClick($event)" (contextmenu)="onNodeRightClick($event)"
                                 (touchend)="onNodeTouchEnd()" (keydown)="onNodeKeydown($event)">
-                                <span class="p-tree-toggler pi pi-fw" [ngClass]="{'pi-plus':!node.expanded,'pi-minus':node.expanded}" *ngIf="!isLeaf()" (click)="toggle($event)"></span>
+                                <span [attr.aria-label]="tree.togglerAriaLabel" class="p-tree-toggler pi pi-fw" [ngClass]="{'pi-plus':!node.expanded,'pi-minus':node.expanded}" *ngIf="!isLeaf()" (click)="toggle($event)"></span>
                                 <span [class]="getIcon()" *ngIf="node.icon||node.expandedIcon||node.collapsedIcon"></span>
                                 <span class="p-treenode-label">
                                     <span *ngIf="!tree.getTemplateForNode(node)">{{node.label}}</span>
@@ -626,6 +626,8 @@ export class Tree implements OnInit,AfterContentInit,OnChanges,OnDestroy,Blockab
 
     @Input() ariaLabel: string;
 
+    @Input() togglerAriaLabel: string;
+
     @Input() ariaLabelledBy: string;
 
     @Input() validateDrop: boolean;

diff --git a/src/app/showcase/components/tree/treedemo.html b/src/app/showcase/components/tree/treedemo.html
@@ -466,9 +466,9 @@ <h5>Flex Scroll</h5>
 
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;button type="button" (click)="showDialog()" pButton icon="pi pi-external-link" label="View"&gt;&lt;/button&gt;
-&lt;p-dialog header="Flexible ScrollHeight" [(visible)]="dialogVisible" [style]="&#123;width: '50vw'&#125;" [baseZIndex]="10000" [maximizable]="true" [modal]="true" 
+&lt;p-dialog header="Flexible ScrollHeight" [(visible)]="dialogVisible" [style]="&#123;width: '50vw'&#125;" [baseZIndex]="10000" [maximizable]="true" [modal]="true"
     [resizable]="true" [contentStyle]="&#123;height: '300px'&#125;" styleClass="p-fluid"&gt;
-    &lt;p-tree [value]="files2" scrollHeight="flex"&gt;&lt;/p-tree&gt;   
+    &lt;p-tree [value]="files2" scrollHeight="flex"&gt;&lt;/p-tree&gt;
 &lt;/p-dialog&gt;
 </app-code>
 
@@ -653,6 +653,12 @@ <h5>Properties</h5>
                             <td>pi pi-spinner</td>
                             <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
                         </tr>
+                        <tr>
+                            <td>togglerAriaLabel</td>
+                            <td>string</td>
+                            <td></td>
+                            <td>Defines a string that labels the toggler icon for accessibility.</td>
+                        </tr>
                         <tr>
                             <td>validateDrop</td>
                             <td>boolean</td>
@@ -930,16 +936,16 @@ <h5>Dependencies</h5>
 export class TreeBasicDemo implements OnInit &#123;
 
     files1: TreeNode[];
-    
+
     files2: TreeNode[];
-    
+
     constructor(private nodeService: NodeService) &#123; &#125;
 
     ngOnInit() &#123;
         this.nodeService.getFiles().then(files => this.files1 = files);
         this.nodeService.getFiles().then(files => this.files2 = files);
     &#125;
-    
+
     expandAll()&#123;
         this.files2.forEach( node => &#123;
             this.expandRecursive(node, true);
@@ -951,7 +957,7 @@ <h5>Dependencies</h5>
             this.expandRecursive(node, false);
         &#125; );
     &#125;
-    
+
     private expandRecursive(node:TreeNode, isExpand:boolean)&#123;
         node.expanded = isExpand;
         if (node.children)&#123;