Lib: Improve markup and a11y for search-input

[xak]

The search-input component markup varies too much between the collapsed and open states and does not include the appropriate ARIA attributes.

https://haltersweb.github.io/Accessibility/autocomplete.html

The core markup structure below does not include popover containers that should serve only as presentation.

Basic

<form action="#" class="fd-search-input" aria-label="Search">
	<div class="fd-input-group fd-input-group--after">
		<input type="text" class="fd-input" placeholder="Search products">
		<span class="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button ">
			<button type="button" class="fd-button--light sap-icon--search"></button>
		</span>
	</div>
</form>

Collapsed

<form action="#" class="fd-search-input is-collapsed" aria-label="Search">
	<div class="fd-input-group fd-input-group--after">
		<input type="text" class="fd-input" placeholder="Search products" aria-hidden="true" id="FpY7i729">
		<span class="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button ">
			<button type="button" class="fd-button--light sap-icon--search" aria-label="Expand Search" aria-controls="FpY7i729" aria-expanded="false"></button>
		</span>
	</div>
</form>

With auto-complete

<form action="#" class="fd-search-input" aria-label="Search">
	<div class="fd-input-group fd-input-group--after">
		<input type="text" class="fd-input" id="sOXnf825" placeholder="Search products" autocomplete="off" aria-owns="lz8Mb177" aria-autocomplete="both">
		<span class="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button ">
			<button type="button" class="fd-button--light sap-icon--search"></button>
		</span>
	</div>
	<ul class="fd-menu__list" id="lz8Mb177" role="listbox">
		<li class="fd-menu__item" role="option" aria-selected="false"><strong>Sear</strong>ch Result A</li>
		<li class="fd-menu__item" role="option" aria-selected="false"><strong>Sear</strong>ch Result B</li>
		<li class="fd-menu__item" role="option" aria-selected="false"><strong>Sear</strong>ch Result C</li>
		<li class="fd-menu__item" role="option" aria-selected="false"><strong>Sear</strong>ch Result D</li>
	</ul>
</form>

Bugs

The shellbar implementation is currently broken when using the open state/