fix(table): fix accessibility issues

UjjwalUpadhyay123-bit · May 20, 2020 · 2d5a3e7 · 2d5a3e7
1 parent 655bcc9
commit 2d5a3e7
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 3 deletions.
diff --git a/src/checkbox/checkbox.component.ts b/src/checkbox/checkbox.component.ts
@@ -61,13 +61,13 @@ export type CheckboxValue = boolean | "on" | "off";
 			[checked]="checked"
 			[disabled]="disabled"
 			[indeterminate]="indeterminate"
-			[attr.aria-label]="ariaLabel"
 			[attr.aria-labelledby]="ariaLabelledby"
 			[attr.aria-checked]="(indeterminate ? 'mixed' : checked)"
 			(change)="onChange($event)"
 			(click)="onClick($event)">
 		<label
 			[for]="id"
+			[attr.aria-label]="ariaLabel"
 			class="bx--checkbox-label"
 			[ngClass]="{
 				'bx--skeleton' : skeleton

diff --git a/src/radio/radio.component.ts b/src/radio/radio.component.ts
@@ -39,6 +39,7 @@ import { RadioChange } from "./radio-change.class";
 		<div *ngIf="skeleton" class="bx--radio-button bx--skeleton"></div>
 		<label
 			class="bx--radio-button__label"
+			[attr.aria-label]="ariaLabel"
 			[ngClass]="{
 				'bx--skeleton': skeleton
 			}"
@@ -80,6 +81,12 @@ export class Radio {
 		}
 		return `label-${this.id}`;
 	}
+
+	/**
+	 * Used to set the `aria-label` attribute on the input label.
+	 */
+	@Input() ariaLabel = "";
+
 	/**
 	 * Sets the HTML required attribute
 	 */

diff --git a/src/table/cell/table-checkbox.component.ts b/src/table/cell/table-checkbox.component.ts
@@ -17,6 +17,7 @@ import { TableRowSize } from "../table.component";
 		<ibm-checkbox
 			*ngIf="!skeleton"
 			inline="true"
+			[name]="name"
 			[aria-label]="getLabel() | i18nReplace:getSelectionLabelValue(row) | async"
 			[size]="(size !== 'sm' ? 'md' : 'sm')"
 			[checked]="selected"
@@ -30,6 +31,8 @@ export class TableCheckbox {
 
 	@Input() selected = false;
 
+	@Input() name = "";
+
 	get disabled(): boolean {
 		return this.row ? !!(this.row as TableRow).disabled : false;
 	}

diff --git a/src/table/cell/table-radio.component.ts b/src/table/cell/table-radio.component.ts
@@ -15,6 +15,7 @@ import { Observable } from "rxjs";
 		<ibm-radio
 			*ngIf="!skeleton"
 			[attr.aria-label]="getLabel() | i18nReplace:getSelectionLabelValue(row) | async"
+			[ariaLabel]="getLabel() | i18nReplace:getSelectionLabelValue(row) | async"
 			[checked]="selected"
 			(change)="change.emit()">
 		</ibm-radio>

diff --git a/src/table/head/table-head-checkbox.component.ts b/src/table/head/table-head-checkbox.component.ts
@@ -17,6 +17,7 @@ import { TableRowSize } from "../table.component";
 			*ngIf="!skeleton"
 			inline="true"
 			[size]="(size !== 'sm' ? 'md' : 'sm')"
+			[name]="name"
 			[checked]="checked"
 			[indeterminate]="indeterminate"
 			(click)="change.emit()"
@@ -28,6 +29,7 @@ import { TableRowSize } from "../table.component";
     `]
 })
 export class TableHeadCheckbox {
+	private static tableSelectAllCount = 0;
 	/**
 	 * Size of the table rows.
 	 */
@@ -39,6 +41,8 @@ export class TableHeadCheckbox {
 
 	@Input() skeleton = false;
 
+	@Input() name = `select-all-${TableHeadCheckbox.tableSelectAllCount++}`;
+
 	@Input()
 	set ariaLabel(value: string | Observable<string>) {
 		this._ariaLabel.override(value);

diff --git a/src/table/head/table-head.component.ts b/src/table/head/table-head.component.ts
@@ -47,6 +47,7 @@ import { TableRowSize } from "../table.component";
 				[ariaLabel]="getCheckboxHeaderLabel()"
 				[size]="size"
 				[skeleton]="skeleton"
+				[name]="model.getHeaderId('select')"
 				(change)="onSelectAllCheckboxChange()"
 				[id]="model.getId('select')">
 			</th>

diff --git a/src/table/table-model.class.ts b/src/table/table-model.class.ts
@@ -180,8 +180,14 @@ export class TableModel implements PaginationModel {
 	 */
 	protected _data: TableItem[][] = [[]];
 
+	/**
+	 * The number of models instantiated, this is to make sure each table has a different
+	 * model count for unique id generation.
+	 */
+	protected tableModelCount = 0;
+
 	constructor() {
-		TableModel.COUNT++;
+		this.tableModelCount = TableModel.COUNT++;
 	}
 
 	/**
@@ -191,7 +197,7 @@ export class TableModel implements PaginationModel {
 	 * @param row the row of the header to generate an id for
 	 */
 	getId(column: HeaderType, row = 0): string {
-		return `table-header-${row}-${column}-${TableModel.COUNT}`;
+		return `table-header-${row}-${column}-${this.tableModelCount}`;
 	}
 
 	/**