feat: Add accessible label to fieldset/group

Signed-off-by: Akshat Patel <[email protected]>

Author: Akshat55

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";
@@ -19,6 +20,10 @@ import { takeUntil } from "rxjs/operators";
 	selector: "ibm-tile-group",
 	template: `
 		<fieldset>
+			<legend *ngIf="legend" class="bx--label">
+				<ng-container *ngIf="!isTemplate(legend)">{{legend}}</ng-container>
+				<ng-template *ngIf="isTemplate(legend)" [ngTemplateOutlet]="legend"></ng-template>
+			</legend>
 			<ng-content select="ibm-selection-tile"></ng-content>
 		</fieldset>`,
 	providers: [
@@ -40,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.
 	 *
@@ -127,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="Radio 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>