Merge pull request #1777 from Financial-Times/am/o-header

The new `o-header`

components/o-header/MIGRATION.md

@@ -1,5 +1,92 @@
 # Migration Guide
 
+## Migrating from v13 to v14
+
+`o-header v14` includes important markup changes to the search bar. Please review the changelog carefully:
+
+1. **Search Input Field Updates**:
+
+   - As of this writing, the search input field appears in three places:
+     1. `<drawer />` (o-header/src/tsx/drawer.tsx)
+     2. `<sticky />` (o-header/src/tsx/sticky.tsx)
+     3. `<search />` (o-header/src/tsx/search.tsx)
+   - All input tags have had their `type` attributes changed from `type="text"` to `type="search"`. This update benefits screen reader users and ensures the input field has the correct semantic type.
+   - This may be a breaking change if you are migrating to `v14`, especially if you use the `type` attribute to query the input field element. Please check that your selectors work as intended.
+
+2. **UI Changes**:
+
+   - The `X` button has been replaced with a text button labeled `Close`.
+   - The wrapper containing the search bar now overlays the content underneath it.
+   - There are minor changes to the UI, such as adjustments to the form width and bar height, but these should not affect functionality.
+
+3. Markup Changes
+
+- **Search Button:**
+
+  - The search icon is now its own `span` tag rather than being added in SCSS through `@include oButtonsContent`.
+
+  ```diff
+  - <button class="o-header__search-submit" type="submit">Search</button>
+  + <button class="o-header__search-submit" type="submit">
+  +   <span aria-hidden="true" class="o-header__search-icon"></span>
+  +   <span>Search</span>
+  + </button>
+  ```
+
+- **Close Button:**
+
+  - The Close button is no longer an icon and has a text `<span>` label "Close".
+
+  ```diff
+  - <button
+  -   class="o-header__search-close o--if-js"
+  -   type="button"
+  -   aria-controls="o-header-search-js"
+  -   title="Close search bar"
+  - >
+  -   <span class="o-header__visually-hidden">Close search bar</span>
+  - </button>
+  + <button
+  +   class="o-header__search-close o--if-js"
+  +   type="button"
+  +   aria-controls="o-header-search"
+  +   title="Close search bar"
+  +   data-o-toggle--js="true"
+  +   aria-expanded="true"
+  + >
+  +   <span class="o-header__visually-hidden">Close search bar</span>
+  +   <span>Close</span>
+  + </button>
+  ```
+
+- **Input Fields:**
+
+  - All input fields have had their `type` attributes changed from `text` to `search`. The difference
+    between the three input fields (sticky, drawer, and search containers) is in their `id` attributes. _Check if `id` is correct before copying._
+
+  ```diff
+  - <input
+  -   id="o-header-search-term"
+  -   name="q"
+  -   type="text"
+  -   autocomplete="off"
+  -   autocorrect="off"
+  -   autocapitalize="none"
+  -   spellcheck="false"
+  -   placeholder="Search for stories, topics or securities"
+  - />
+  + <input
+  +   id="o-header-search-term"
+  +   name="q"
+  +   type="search"
+  +   autocomplete="off"
+  +   autocorrect="off"
+  +   autocapitalize="none"
+  +   spellcheck="false"
+  +   placeholder="Search for stories, topics, or securities"
+  + />
+  ```
+
 ## Migrating from v12 to v13
 
 o-header v13 includes markup changes to the drawer. This updates the edition switcher; moves the close button to align with where the hamburger icon would be when closed; and updates the search bar both in the drawer and on desktop. To migrate:

components/o-header/src/scss/_variables.scss

@@ -2,12 +2,13 @@ $o-header-is-silent: true !default;
 
 $_o-header-column-item-margin-s: 10px;
 $_o-header-column-item-margin-l: 20px;
-$_o-header-padding-x: 14px;
+$_o-header-padding-x: 12px;
 $_o-header-padding-y: 8px;
 $_o-header-buttons-theme: 'mono';
 $_o-header-mega-padding-x: 24px;
 $_o-header-mega-padding-y: 18px;
 $_o-header-mega-z-index: 1;
+$_o-header-z-index: 1;
 $_o-header-drawer-z-index: 100;
 $_o-header-drawer-width: 320px;
 $_o-header-drawer-divide-height: 40px;
@@ -29,4 +30,5 @@ $_o-header-icon-size-large: 40;
 $_o-header-icon-size: 25;
 $_o-header-icon-size-small: 15;
 
-$_o-header-features: 'top', 'subnav', 'search', 'nav', 'anon', 'drawer', 'megamenu', 'sticky', 'simple', 'transparent';
+$_o-header-features: 'top', 'subnav', 'search', 'nav', 'anon', 'drawer',
+	'megamenu', 'sticky', 'simple', 'transparent';

components/o-header/src/scss/features/_drawer.scss

@@ -140,7 +140,7 @@
 	.o-header__drawer-search {
 		padding: 0px $_o-header-drawer-padding-x;
 
-		@include oGridRespondTo('oHeaderL') {
+		@include oGridRespondTo('M') {
 			display: none;
 		}
 

components/o-header/src/scss/features/_search.scss

@@ -1,12 +1,20 @@
 @mixin _oHeaderSearch() {
 	.o-header__search {
-		padding-left: 0;
-		padding-right: 0;
-		padding-top: 0;
+		background-color: oColorsByName('white-60');
+		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+		position: absolute;
+		z-index: $_o-header-z-index;
+		width: 100%;
 		padding-bottom: $_o-header-padding-y;
-		text-align: center;
 
-		&[aria-hidden="false"] {
+		.o-header__container {
+			max-width: 840px;
+			display: flex;
+			flex-direction: column;
+			margin: 0 auto;
+		}
+
+		&[aria-hidden='false'] {
 			display: block;
 		}
 	}
@@ -15,14 +23,6 @@
 		display: none;
 	}
 
-	.o-header__search-form {
-		display: flex;
-		align-items: center;
-		margin: 0 auto;
-		max-width: 640px;
-		position: relative;
-	}
-
 	.o-header__search-term {
 		@include oTypographySans($scale: -1);
 		box-sizing: border-box;
@@ -46,29 +46,42 @@
 		}
 	}
 
+	.o-header__search-icon {
+		@include oIconsContent($icon-name: 'search', $size: 38, $color: white);
+
+		@include oGridRespondTo($until: 'S') {
+			display: none;
+		}
+	}
+
 	.o-header__search-submit {
-		@include oButtonsContent($opts: (
-			'type': 'primary',
-			'icon-only': true,
-			'icon': 'search',
-			'size': 'big'
-		));
+		@include oButtonsContent(
+			$opts: (
+				'type': 'primary',
+				'size': 'big',
+			)
+		);
+		display: flex;
+		gap: 10px;
+		align-items: center;
 		margin-left: $_o-header-padding-x;
-		padding-left: 40px;
+		padding: 0px oSpacingByName('s6') 0px oSpacingByName('s4');
 		background-position: inherit;
+
+		@include oGridRespondTo($until: 'S') {
+			padding: 0px oSpacingByName('s4');
+		}
 	}
 
 	.o-header__search-close {
-		@include oIconsContent('cross', _oHeaderGet('search-close'), $size: $_o-header-icon-size-large);
+		@include oTypographySans($scale: 1);
+		text-decoration: underline;
+		background: none;
+		padding: 0;
 		border: 0;
 		margin-left: $_o-header-padding-x;
-		vertical-align: middle;
-		// Match the search button's hover/focus state.
-		&:hover {
-			opacity: 0.75;
-		}
 
-		@include oGridRespondTo($until: 'M') {
+		@include oGridRespondTo($until: 'S') {
 			display: none;
 		}
 	}

components/o-header/src/scss/features/_top.scss

@@ -125,7 +125,7 @@
 
 		// when used in tandem with the menu toggle, hide this on smaller screen sizes
 		.o-header__top-icon-link--menu + & {
-			@include oGridRespondTo($until: 'L') {
+			@include oGridRespondTo($until: 'M') {
 				display: none;
 			}
 		}

components/o-header/src/tsx/drawer.tsx

@@ -82,7 +82,7 @@ function DrawerSearch() {
 					<span className="o-forms-input o-forms-input--text o-forms-input--suffix">
 						<input
 							id="o-header-drawer-search-term"
-							type="text"
+							type="search"
 							autoComplete="off"
 							autoCorrect="off"
 							autoCapitalize="off"

components/o-header/src/tsx/search.tsx

@@ -2,9 +2,11 @@
 // 	<!-- Pick only one of the two <div> if you don't need to support both core and enhanced -->
 
 export function Search() {
+	const searchDivId = 'o-header-search';
+
 	return (
 		<div
-			id="o-header-search"
+			id={searchDivId}
 			className="o-header__row o-header__search"
 			role="search"
 			data-o-header-search>
@@ -13,9 +15,10 @@ export function Search() {
 					<button
 						className="o-header__search-close o--if-js"
 						type="button"
-						aria-controls="o-header-search-js"
+						aria-controls={searchDivId}
 						title="Close search bar">
 						<span className="o-header__visually-hidden">Close search bar</span>
+						<span>Close</span>
 					</button>
 				</SearchForm>
 			</div>
@@ -37,14 +40,16 @@ export function CoreSearch() {
 }
 
 function SearchForm(props) {
+	const searchFieldId = 'o-header-search-term';
+
 	return (
 		<form
 			className="o-header__search-form"
 			action="/search"
 			role="search"
 			aria-label="Site search">
 			<label
-				htmlFor="o-header-search-term-js"
+				htmlFor={searchFieldId}
 				className="o-header__search-term o-forms-field o-forms-field--optional">
 				<span className="o-forms-title o-header__visually-hidden">
 					<span className="o-forms-title__main">
@@ -53,17 +58,18 @@ function SearchForm(props) {
 				</span>
 				<span className="o-forms-input o-forms-input--text o-forms-input--suffix">
 					<input
-						id={`o-header-search-term`}
+						id={searchFieldId}
 						name="q"
-						type="text"
+						type="search"
 						autoComplete="off"
 						autoCorrect="off"
 						autoCapitalize="off"
 						spellCheck={false}
 						placeholder="Search for stories, topics or securities"
 					/>
 					<button className="o-header__search-submit" type="submit">
-						Search
+						<span aria-hidden="true" className="o-header__search-icon"></span>
+						<span>Search</span>
 					</button>
 					{props.children}
 				</span>

components/o-header/src/tsx/sticky.tsx

@@ -78,9 +78,12 @@ const Navigation = ({navBarItems}: {navBarItems: TNavMenuItem[]}) => (
 );
 
 const StickySearch = () => {
+	const stickySearchDivId = 'o-header-search-sticky';
+	const inputFieldId = 'o-header-search-term-js';
+
 	return (
 		<div
-			id="o-header-search-sticky"
+			id={stickySearchDivId}
 			className="o-header__row o-header__search o--if-js"
 			role="search"
 			data-o-header-search>
@@ -91,7 +94,7 @@ const StickySearch = () => {
 					role="search"
 					aria-label="Site search">
 					<label
-						htmlFor="o-header-search-term-js"
+						htmlFor={inputFieldId}
 						className="o-header__search-term o-forms-field o-forms-field--optional">
 						<span className="o-forms-title o-header__visually-hidden">
 							<span className="o-forms-title__main">
@@ -100,22 +103,26 @@ const StickySearch = () => {
 						</span>
 						<span className="o-forms-input o-forms-input--text o-forms-input--suffix">
 							<input
-								id="o-header-search-term-js"
+								id={inputFieldId}
 								name="q"
-								type="text"
+								type="search"
 								placeholder="Search for stories, topics or securities"
 							/>
 							<button className="o-header__search-submit" type="submit">
-								Search
+								<span
+									aria-hidden="true"
+									className="o-header__search-icon"></span>
+								<span>Search</span>
 							</button>
 							<button
-								className="o-header__search-close"
+								className="o-header__search-close o--if-js"
 								type="button"
-								aria-controls="o-header-search-sticky"
+								aria-controls={stickySearchDivId}
 								title="Close search bar">
 								<span className="o-header__visually-hidden">
 									Close search bar
 								</span>
+								<span>Close</span>
 							</button>
 						</span>
 					</label>