feat(search): Remove ariaLabelledby input

Author: esuau

src/search/search.component.ts

@@ -2,7 +2,8 @@ import {
 	Component,
 	Input,
 	EventEmitter,
-	Output
+	Output,
+	HostBinding
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
 
@@ -34,56 +35,53 @@ export class SearchChange {
 @Component({
 	selector: "ibm-search",
 	template: `
-		<div class="bx--form-item">
-			<div
-				class="bx--search"
+		<div
+			class="bx--search"
+			[ngClass]="{
+				'bx--search--sm': size === 'sm',
+				'bx--search--lg': size === 'lg',
+				'bx--search--light': theme === 'light'
+			}"
+			role="search">
+			<label class="bx--label" [for]="id">Search</label>
+			<input
+				class="bx--search-input"
+				type="text"
+				role="search"
+				[id]="id"
+				[value]="value"
+				[placeholder]="placeholder"
+				[disabled]="disabled"
+				[required]="required"
+				(input)="onSearch($event.target.value)"/>
+			<svg
+				class="bx--search-magnifier"
+				width="16"
+				height="16"
+				viewBox="0 0 16 16">
+				<path
+					d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
+					fill-rule="nonzero"/>
+			</svg>
+			<button
+				class="bx--search-close"
 				[ngClass]="{
-					'bx--search--sm': size === 'sm',
-					'bx--search--lg': size === 'lg',
-					'bx--search--light': theme === 'light'
+					'bx--search-close--hidden': !value || value === 0
 				}"
-				role="search">
-				<label class="bx--label" [for]="id">Search</label>
-				<input
-					class="bx--search-input"
-					type="text"
-					role="search"
-					[id]="id"
-					[value]="value"
-					[placeholder]="placeholder"
-					[disabled]="disabled"
-					[required]="required"
-					[attr.aria-labelledby]="ariaLabelledby"
-					(input)="onSearch($event.target.value)"/>
+				title="Clear search input"
+				[attr.aria-label]="ariaLabel"
+				(click)="clearSearch()">
 				<svg
-					class="bx--search-magnifier"
 					width="16"
 					height="16"
-					viewBox="0 0 16 16">
+					viewBox="0 0 16 16"
+					xmlns="http://www.w3.org/2000/svg">
 					<path
-						d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
-						fill-rule="nonzero"/>
+						d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414
+							8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+						fill-rule="evenodd"/>
 				</svg>
-				<button
-					class="bx--search-close"
-					[ngClass]="{
-						'bx--search-close--hidden': !value || value === 0
-					}"
-					title="Clear search input"
-					[attr.aria-label]="ariaLabel"
-					(click)="clearSearch()">
-					<svg
-						width="16"
-						height="16"
-						viewBox="0 0 16 16"
-						xmlns="http://www.w3.org/2000/svg">
-						<path
-							d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414
-							   8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
-							fill-rule="evenodd"/>
-					</svg>
-				</button>
-			</div>
+			</button>
 		</div>
 	`,
 	providers: [
@@ -100,6 +98,8 @@ export class Search implements ControlValueAccessor {
 	 */
 	static searchCount = 0;
 
+	@HostBinding("class.bx--form-item") containerClass = true;
+
 	/**
 	 * `light` or `dark` search theme.
 	 */
@@ -137,11 +137,6 @@ export class Search implements ControlValueAccessor {
 	 */
 	// tslint:disable-next-line:no-input-rename
 	@Input("aria-label") ariaLabel = "Clear search input";
-	/**
-	 * Used to set the `aria-labelledby` attribute on the input element.
-	 */
-	// tslint:disable-next-line:no-input-rename
-	@Input("aria-labelledby") ariaLabelledby: string;
 	/**
 	 * Emits event notifying other classes when a change in state occurs in the input.
 	 */