fix: improve PPI widget accessibility

Author: ReneeSleepy

src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.html

@@ -7,47 +7,46 @@
   }
   @case ('error') {
     <div class="ppi-widget ppi-widget--error">
-      <mat-icon aria-hidden="false" aria-label="Error icon">error</mat-icon>
+      <mat-icon [attr.aria-hidden]="true">error</mat-icon>
       <span>{{ view.message }}</span>
       <button mat-button (click)="retry()">Retry</button>
     </div>
   }
   @case ('unavailable') {
     <div class="ppi-widget ppi-widget--muted">
-      <mat-icon aria-hidden="false" aria-label="Info icon">info</mat-icon>
+      <mat-icon [attr.aria-hidden]="true">info</mat-icon>
       <span>{{ view.message }}</span>
     </div>
   }
   @case ('disabled') {
     <div class="ppi-widget ppi-widget--muted">
-      <mat-icon aria-hidden="false" aria-label="Disabled icon">block</mat-icon>
+      <mat-icon [attr.aria-hidden]="true">block</mat-icon>
       <span>{{ view.message }}</span>
     </div>
   }
   @case ('hidden') {
     <div class="ppi-widget ppi-widget--muted">
-      <mat-icon aria-hidden="false" aria-label="Hidden icon">visibility_off</mat-icon>
+      <mat-icon [attr.aria-hidden]="true">visibility_off</mat-icon>
       <span>{{ view.message }}</span>
     </div>
   }
   @case ('no-data') {
     <div class="ppi-widget ppi-widget--muted">
-      <mat-icon aria-hidden="false" aria-label="No data icon">hourglass_empty</mat-icon>
+      <mat-icon [attr.aria-hidden]="true">hourglass_empty</mat-icon>
       <span>No peer submissions yet</span>
     </div>
   }
   @case ('stale') {
     <div class="ppi-widget ppi-widget--warning">
-      <mat-icon aria-hidden="false" aria-label="Outdated data warning">history</mat-icon>
+      <mat-icon [attr.aria-hidden]="true">history</mat-icon>
       <span>{{ view.message }}</span>
       <span class="ppi-widget__stale-badge">Data may be outdated</span>
     </div>
   }
   @case ('success') {
     <div class="ppi-widget">
-      <span
-        >{{ view.data?.submittedPercentage }}% of peers at your target grade have submitted</span
-      >
+      <span aria-label="Peer submission progress">{{ view.data?.submittedPercentage }}% of peers at your target grade have submitted</span>
     </div>
   }
 }
+

src/app/projects/states/dashboard/directives/task-dashboard/directives/task-description-card/ppi-widget/ppi-widget.component.spec.ts

@@ -1,13 +1,13 @@
-import {beforeEach, describe, expect, it, vi} from 'vitest';
-import {SimpleChange} from '@angular/core';
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatButtonModule} from '@angular/material/button';
-import {MatIconModule} from '@angular/material/icon';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {Observable, Subject, of, throwError} from 'rxjs';
-import {PeerProgressIndicator} from 'src/app/api/models/peer-progress-indicator';
-import {Task} from 'src/app/api/models/task';
-import {TaskDefinition} from 'src/app/api/models/task-definition';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { SimpleChange } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { Observable, Subject, of, throwError } from 'rxjs';
+import { PeerProgressIndicator } from 'src/app/api/models/peer-progress-indicator';
+import { Task } from 'src/app/api/models/task';
+import { TaskDefinition } from 'src/app/api/models/task-definition';
 import {
   DISABLED_STATE,
   NORMAL_STATE,
@@ -16,24 +16,24 @@ import {
   UNAVAILABLE_STATE,
   ZERO_PERCENT_STATE,
 } from 'src/app/api/services/mock';
-import {PeerProgressIndicatorService} from 'src/app/api/services/peer-progress-indicator.service';
-import {PpiWidgetComponent} from './ppi-widget.component';
+import { PeerProgressIndicatorService } from 'src/app/api/services/peer-progress-indicator.service';
+import { PpiWidgetComponent } from './ppi-widget.component';
 
 describe('PpiWidgetComponent', () => {
   let component: PpiWidgetComponent;
   let fixture: ComponentFixture<PpiWidgetComponent>;
   let getIndicator: ReturnType<typeof vi.fn>;
 
-  const mockTask = {project: {unit: {id: 1}, targetGrade: 2}} as unknown as Task;
-  const mockTaskDef = {id: 99} as unknown as TaskDefinition;
+  const mockTask = { project: { unit: { id: 1 }, targetGrade: 2 } } as unknown as Task;
+  const mockTaskDef = { id: 99 } as unknown as TaskDefinition;
 
   beforeEach(async () => {
     getIndicator = vi.fn();
 
     await TestBed.configureTestingModule({
       declarations: [PpiWidgetComponent],
       imports: [MatIconModule, MatProgressSpinnerModule, MatButtonModule],
-      providers: [{provide: PeerProgressIndicatorService, useValue: {getIndicator}}],
+      providers: [{ provide: PeerProgressIndicatorService, useValue: { getIndicator } }],
     }).compileComponents();
 
     fixture = TestBed.createComponent(PpiWidgetComponent);
@@ -44,7 +44,7 @@ describe('PpiWidgetComponent', () => {
 
   function load(response$: Observable<PeerProgressIndicator>) {
     getIndicator.mockReturnValue(response$);
-    component.ngOnChanges({task: new SimpleChange(null, mockTask, true)});
+    component.ngOnChanges({ task: new SimpleChange(null, mockTask, true) });
     fixture.detectChanges();
   }
 
@@ -97,7 +97,7 @@ describe('PpiWidgetComponent', () => {
     const subject: Subject<PeerProgressIndicator> = new Subject();
     getIndicator.mockReturnValue(subject.asObservable());
 
-    component.ngOnChanges({task: new SimpleChange(null, mockTask, true)});
+    component.ngOnChanges({ task: new SimpleChange(null, mockTask, true) });
     expect(component.view.state).toBe('loading');
 
     subject.next(NORMAL_STATE);
@@ -108,7 +108,7 @@ describe('PpiWidgetComponent', () => {
     const subject: Subject<PeerProgressIndicator> = new Subject();
     getIndicator.mockReturnValue(subject.asObservable());
 
-    component.ngOnChanges({task: new SimpleChange(null, mockTask, true)});
+    component.ngOnChanges({ task: new SimpleChange(null, mockTask, true) });
     expect(component.view.state).toBe('loading');
 
     subject.error(new Error('network down'));
@@ -133,13 +133,36 @@ describe('PpiWidgetComponent', () => {
       .mockReturnValueOnce(first.asObservable())
       .mockReturnValueOnce(second.asObservable());
 
-    component.ngOnChanges({task: new SimpleChange(null, mockTask, true)});
-    component.ngOnChanges({task: new SimpleChange(null, mockTask, true)});
+    component.ngOnChanges({ task: new SimpleChange(null, mockTask, true) });
+    component.ngOnChanges({ task: new SimpleChange(null, mockTask, true) });
 
     first.next(NORMAL_STATE);
     expect(component.view.state).toBe('loading');
 
     second.next(SUPPRESSED_STATE);
     expect(component.view.state).toBe('hidden');
   });
+
+  it('hides decorative icons from screen readers', () => {
+    load(throwError(() => new Error('network down')));
+    fixture.detectChanges();
+
+    const icons = fixture.nativeElement.querySelectorAll('mat-icon');
+
+    icons.forEach((icon: HTMLElement) => {
+      expect(icon.getAttribute('aria-hidden')).toBe('true');
+    });
+  });
+
+  it('provides an accessible name for the peer progress value', () => {
+    load(of(NORMAL_STATE));
+    fixture.detectChanges();
+
+    const value = fixture.nativeElement.querySelector(
+      '.ppi-widget:not(.ppi-widget--muted) span[aria-label="Peer submission progress"]',
+    );
+
+    expect(value).toBeTruthy();
+    expect(value.textContent).toContain('42%');
+  });
 });