fix(tree-view): ensure node text and screen reader text are separate

vmware-clarity · Nov 9, 2022 · 21988ab · 21988ab
1 parent e2d6d02
commit 21988ab
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/projects/angular/src/data/tree-view/tree-node.html b/projects/angular/src/data/tree-view/tree-node.html
@@ -49,8 +49,8 @@
   <div class="clr-treenode-content" (mousedown)="focusTreeNode()">
     <ng-content></ng-content>
     <div class="clr-sr-only" *ngIf="featuresService.selectable">
-      <span *ngIf="ariaSelected">selected</span>
-      <span *ngIf="!ariaSelected">unselected</span>
+      <span *ngIf="ariaSelected"> selected</span>
+      <span *ngIf="!ariaSelected"> unselected</span>
     </div>
   </div>
 </div>

diff --git a/projects/angular/src/data/tree-view/tree-node.spec.ts b/projects/angular/src/data/tree-view/tree-node.spec.ts
@@ -344,14 +344,14 @@ export default function (): void {
         this.clarityDirective.selected = ClrSelectedState.SELECTED;
         this.detectChanges();
         expect(contentContainer.getAttribute('aria-selected')).toBe('true');
-        expect(contentContainer.textContent.trim()).toBe('Hello world selected');
+        expect(contentContainer.textContent.trim().replace(/\s+/g, ' ')).toBe('Hello world selected');
       });
 
       it('adds the aria-selected attribute and screen reader text to unselected tree nodes', function (this: Context) {
         this.clarityDirective.selected = ClrSelectedState.UNSELECTED;
         this.detectChanges();
         expect(contentContainer.getAttribute('aria-selected')).toBe('false');
-        expect(contentContainer.textContent.trim()).toBe('Hello world unselected');
+        expect(contentContainer.textContent.trim().replace(/\s+/g, ' ')).toBe('Hello world unselected');
       });
 
       it('does not add the aria-selected attribute or screen reader text to non-selectable tree nodes', function (this: Context) {