mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-21 09:35:38 -05:00
Improve accessibility for wizard steps navigation (#17669)
Our extension is relying on the wizard dialog. During accessibility testing it was discovered that wizard step buttons are being reported as links by the screen reader (NVDA, JAWS). Claimed expected behavior by the tester is that they should be announced as buttons. I discussed this issue with accessibility SMEs and they said it is perfectly fine to keep them as links. They did mention that they would probably design the UX differently from the start, but given that we already have it this way, links are fine. They did suggest to add few additional ARIA attributes to the link elements: - `aria-current="step"` if the link is for the currently active step. This literally just announces "current step" at the end, when you focus on a link - `aria-disabled="true"` makes it say "**unavailable**; link; *<step number>*" when in NVDA "browse" mode and move to the grayed-out link. So this change implements the said improvements.
This commit is contained in:
@@ -26,7 +26,7 @@ export class WizardNavigationParams implements IBootstrapParams {
|
||||
<ng-container *ngFor="let item of _params.wizard.pages; let i = index">
|
||||
<div class="wizardNavigation-pageNumber">
|
||||
<div class="wizardNavigation-connector" [ngClass]="{'invisible': !hasTopConnector(i), 'active': isActive(i)}"></div>
|
||||
<a [tabindex]="isActive(i) ? 0 : -1" [attr.href]="isActive(i) ? '' : null" [title]="item.title" (click)="navigate(i)" (keydown)="onKey($event,i)">
|
||||
<a [tabindex]="isActive(i) ? 0 : -1" [attr.href]="isActive(i) ? '' : null" [title]="item.title" (click)="navigate(i)" (keydown)="onKey($event,i)" [attr.aria-current]="isCurrentPage(i) ? 'step' : null" [attr.aria-disabled]="isActive(i) ? null : 'true'">
|
||||
<span class="wizardNavigation-dot" [ngClass]="{'active': isActive(i), 'currentPage': isCurrentPage(i)}">{{i+1}}</span>
|
||||
</a>
|
||||
<div class="wizardNavigation-connector" [ngClass]="{'invisible': !hasBottomConnector(i), 'active': isActive(i)}"></div>
|
||||
|
||||
Reference in New Issue
Block a user