Merge pull request #2518 from Akshat55/tile-group-accessibility

fix: Tile group accessibility

Author: zvonimirfras

src/tiles/selection-tile.component.ts

@@ -7,32 +7,30 @@ import {
 	HostListener,
 	AfterViewInit
 } from "@angular/core";
-import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { I18n } from "carbon-components-angular/i18n";
 
 @Component({
 	selector: "ibm-selection-tile",
 	template: `
+		<input
+			#input
+			[tabindex]="disabled ? null : 0"
+			class="bx--tile-input"
+			[id]="id"
+			[disabled]="disabled"
+			[type]="(multiple ? 'checkbox': 'radio')"
+			[value]="value"
+			[name]="name"
+			(change)="onChange($event)"/>
 		<label
 			class="bx--tile bx--tile--selectable"
-			tabindex="disabled ? null : 0"
 			[for]="id"
 			[ngClass]="{
 				'bx--tile--is-selected' : selected,
 				'bx--tile--light': theme === 'light',
 				'bx--tile--disabled' : disabled
 			}"
 			[attr.aria-label]="i18n.get('TILES.TILE') | async">
-			<input
-				#input
-				tabindex="-1"
-				class="bx--tile-input"
-				[id]="id"
-				[disabled]="disabled"
-				[type]="(multiple ? 'checkbox': 'radio')"
-				[value]="value"
-				[name]="name"
-				(change)="onChange($event)"/>
 			<div class="bx--tile__checkmark">
 				<svg width="16" height="16" viewBox="0 0 16 16">
 					<path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"

src/tiles/tile-group.component.ts

@@ -7,7 +7,8 @@ import {
 	HostBinding,
 	ContentChildren,
 	QueryList,
-	OnDestroy
+	OnDestroy,
+	TemplateRef
 } from "@angular/core";
 import { SelectionTile } from "./selection-tile.component";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
@@ -17,7 +18,14 @@ import { takeUntil } from "rxjs/operators";
 
 @Component({
 	selector: "ibm-tile-group",
-	template: `<ng-content select="ibm-selection-tile"></ng-content>`,
+	template: `
+		<fieldset>
+			<legend *ngIf="legend" class="bx--label">
+				<ng-template *ngIf="isTemplate(legend); else legendLabel;" [ngTemplateOutlet]="legend"></ng-template>
+				<ng-template #legendLabel>{{legend}}</ng-template>
+			</legend>
+			<ng-content select="ibm-selection-tile"></ng-content>
+		</fieldset>`,
 	providers: [
 		{
 			provide: NG_VALUE_ACCESSOR,
@@ -37,6 +45,8 @@ export class TileGroup implements AfterContentInit, OnDestroy {
 	 */
 	@Input() multiple = false;
 
+	@Input() legend: string | TemplateRef<any>;
+
 	/**
 	 * Emits an event when the tile selection changes.
 	 *
@@ -124,4 +134,8 @@ export class TileGroup implements AfterContentInit, OnDestroy {
 	registerOnTouched(fn: any) {
 		this.onTouched = fn;
 	}
+
+	public isTemplate(value) {
+		return value instanceof TemplateRef;
+	}
 }

src/tiles/tiles.stories.ts

@@ -136,7 +136,7 @@ storiesOf("Components|Tiles", module)
 				Edit on Carbon UI Builder
 			</a>
 			<br><br>
-			<ibm-tile-group (selected)="selected($event)" [multiple]="false">
+			<ibm-tile-group (selected)="selected($event)" [multiple]="false" legend="Radio tile group">
 				<ibm-selection-tile value="tile1" [disabled]="disabled" [selected]="true" [theme]="theme">Selectable Tile</ibm-selection-tile>
 				<ibm-selection-tile value="tile2" [disabled]="disabled" [theme]="theme">Selectable Tile</ibm-selection-tile>
 				<ibm-selection-tile value="tile3" [disabled]="disabled" [theme]="theme">Selectable Tile</ibm-selection-tile>
@@ -174,7 +174,7 @@ storiesOf("Components|Tiles", module)
 				Edit on Carbon UI Builder
 			</a>
 			<br><br>
-			<ibm-tile-group (selected)="selected($event)" [multiple]="true">
+			<ibm-tile-group (selected)="selected($event)" [multiple]="true" legend="Multi-select tile group">
 				<ibm-selection-tile value="tile1" [selected]="true" [theme]="theme" [disabled]="disabled">Selectable Tile</ibm-selection-tile>
 				<ibm-selection-tile value="tile2" [theme]="theme" [disabled]="disabled">Selectable Tile</ibm-selection-tile>
 				<ibm-selection-tile value="tile3" [theme]="theme" [disabled]="disabled">Selectable Tile</ibm-selection-tile>