@financial-times/dotcom-ui-header 13.8.1 → 13.9.1-beta.1

package/src/__test__/output/component.spec.tsx

@@ -67,6 +67,38 @@ describe('dotcom-ui-header', () => {
     expect(mobileHeader).not.toBeNull()
   })
 
+  it('renders one search widget anchor in the primary search row', () => {
+    const { container } = render(commonHeader)
+    const primarySearch = container.querySelector('#o-header-search-primary')
+    const primarySearchMain = primarySearch?.querySelector('.o-header__search-main')
+    const primaryForm = primarySearch?.querySelector('.o-header__search-form')
+    const primaryAnchor = primarySearch?.querySelector('[data-o-header-search-widget-anchor="primary"]')
+    const primaryAnchors = container.querySelectorAll('[data-o-header-search-widget-anchor="primary"]')
+    const widgetAnchors = container.querySelectorAll('[data-o-header-search-widget-anchor]')
+
+    expect(primarySearchMain).not.toBeNull()
+    expect(primaryForm?.parentElement).toBe(primarySearchMain)
+    expect(primarySearchMain?.nextElementSibling).toBe(primaryAnchor)
+    expect(primaryAnchors).toHaveLength(1)
+    expect(widgetAnchors).toHaveLength(2)
+  })
+
+  it('renders one search widget anchor in sticky search', () => {
+    const { container } = render(commonHeader)
+    const searchMainNodes = container.querySelectorAll('.o-header__search-main')
+    const stickySearch = container.querySelector('#o-header-search-sticky')
+    const stickySearchMain = stickySearch?.querySelector('.o-header__search-main')
+    const stickyForm = stickySearch?.querySelector('.o-header__search-form')
+    const stickyAnchor = stickySearch?.querySelector('[data-o-header-search-widget-anchor="sticky"]')
+    const stickyAnchors = container.querySelectorAll('[data-o-header-search-widget-anchor="sticky"]')
+
+    expect(searchMainNodes).toHaveLength(2)
+    expect(stickySearchMain).not.toBeNull()
+    expect(stickyForm?.parentElement).toBe(stickySearchMain)
+    expect(stickySearchMain?.nextElementSibling).toBe(stickyAnchor)
+    expect(stickyAnchors).toHaveLength(1)
+  })
+
   describe('When the user is subscribed', () => {
     it('renders the expected logged in user header links', () => {
       const { container } = render(subscribedUserHeader)

package/src/components/search/partials.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 const Search = ({ instance }) => {
   const inputId = `o-header-search-term-${instance}`
+
   return (
     <div
       id={`o-header-search-${instance}`}
@@ -11,19 +12,22 @@ const Search = ({ instance }) => {
       data-o-header-search
     >
       <div className="o-header__container">
-        <form
-          className="o-header__search-form"
-          action="/search"
-          role="search"
-          aria-label="Site search"
-          data-n-topic-search
-        >
-          <label htmlFor={inputId} 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">
-                Search the <abbr title="Financial Times">FT</abbr>
+        <div className="o-header__search-main">
+          <form
+            className="o-header__search-form"
+            action="/search"
+            role="search"
+            aria-label="Site search"
+            data-n-topic-search
+          >
+          <div className="o-header__search-term o-forms-field o-forms-field--optional">
+            <label htmlFor={inputId}>
+              <span className="o-forms-title o-header__visually-hidden">
+                <span className="o-forms-title__main">
+                  Search the <abbr title="Financial Times">FT</abbr>
+                </span>
               </span>
-            </span>
+            </label>
             <span className="o-forms-input o-forms-input--text o-forms-input--suffix">
               <input
                 id={inputId}
@@ -37,7 +41,7 @@ const Search = ({ instance }) => {
                 role="combobox"
                 aria-controls={`suggestions-${inputId}`}
               />
-              <button className="o-header__search-submit" type="submit">
+              <button className="o-header__search-submit" type="submit" aria-label="search">
                 <span aria-hidden="true" className="o-header__search-icon"></span>
                 <span>Search</span>
               </button>
@@ -47,13 +51,16 @@ const Search = ({ instance }) => {
                 aria-controls={`o-header-search-${instance}`}
                 title="Close search bar"
                 data-trackable="close"
+                aria-label="close"
               >
                 <span className="o-header__visually-hidden">Close search bar</span>
                 <span>Close</span>
               </button>
             </span>
-          </label>
-        </form>
+          </div>
+          </form>
+        </div>
+        <div className="o-header__search-widget-anchor" data-o-header-search-widget-anchor={instance} />
       </div>
     </div>
   )

package/src/components/sub-navigation/SubNavDropdown.tsx

@@ -7,30 +7,31 @@ interface DropdownItem {
 }
 
 interface SubNavDropdownProps {
+  id: string
   items: DropdownItem[]
+  ariaLabelledBy: string
   title?: string
 }
 
-const SubNavDropdown: React.FC<SubNavDropdownProps> = ({ items, title }) => {
+const SubNavDropdown: React.FC<SubNavDropdownProps> = ({ id, items, ariaLabelledBy, title }) => {
   return (
     <div
+      id={id}
       className="o-header__subnav-dropdown"
-      data-o-header-subnav-dropdown
-      aria-hidden="true"
-      aria-expanded="false"
+      data-o-header-subnav-dropdown-modal
       role="dialog"
       aria-modal="true"
-      aria-label={title || 'Navigation menu'}
+      aria-labelledby={ariaLabelledBy}
     >
       {title && <h2 className="o-header__subnav-dropdown-title">{title}</h2>}
-      <span
+      <button
         className="o-header__subnav-dropdown-close"
         data-o-header-subnav-dropdown-close
         aria-label="Close menu"
-        role="button"
+        type="button"
       >
         <span className="o-header__subnav-dropdown-close-icon" />
-      </span>
+      </button>
       <ul className="o-header__subnav-dropdown-list">
         {items.map((item, index) => (
           <li key={index} className="o-header__subnav-dropdown-item">

package/src/components/sub-navigation/SubNavWithDropdown.tsx

@@ -10,18 +10,27 @@ interface SubNavWithDropdownProps {
 
 const SubNavWithDropdown: React.FC<SubNavWithDropdownProps> = ({ item, selected }) => {
   const dropdownItems = item.subnavDropdownOptions || []
+  const labelSlug = item.label?.toLowerCase().replace(/\s+/g, '-')
+  const buttonId = `subnav-dropdown-button-${labelSlug}`
+  const modalId = `subnav-dropdown-modal-${labelSlug}`
 
   return (
-    <span
-      role="button"
-      tabIndex={0}
-      className={`o-header__subnav-link ${selected}`}
-      {...ariaSelected(item)}
-      data-trackable={item.label}
-    >
-      {item.label}
-      <SubNavDropdown items={dropdownItems} title={item.label} />
-    </span>
+    <div data-o-header-subnav-dropdown-parent>
+      <button
+        id={buttonId}
+        type="button"
+        className={`o-header__subnav-link ${selected}`}
+        {...ariaSelected(item)}
+        data-trackable={item.label}
+        aria-controls={modalId}
+        aria-haspopup="dialog"
+        aria-expanded="false"
+        data-o-header-subnav-dropdown-button
+      >
+        {item.label}
+      </button>
+      <SubNavDropdown id={modalId} ariaLabelledBy={buttonId} items={dropdownItems} title={item.label} />
+    </div>
   )
 }
 

package/src/components/sub-navigation/subNavDropdown.scss

@@ -1,7 +1,7 @@
 @import '@financial-times/o3-foundation/css/professional.css';
 
-.o-header__subnav-link:has([data-o-header-subnav-dropdown]) {
-  cursor: pointer;
+[data-o-header-subnav-dropdown-parent] {
+  cursor: default;
   display: inline-block;
   position: relative;
 }
@@ -50,8 +50,21 @@
   }
 }
 
+[data-o-header-subnav-dropdown-button] {
+  background-color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  &:focus,
+  &:focus-visible {
+    box-shadow: var(--o3-focus-use-case-outline-color);
+  }
+  cursor: default !important; // On desktop the hover action will open the modal with click doing nothing additional. Therefore the pointer is misleading.
+}
+
 @media (hover: none) {
-  .o-header__subnav-link:has([data-o-header-subnav-dropdown]) {
+  [data-o-header-subnav-dropdown-parent] {
     -webkit-tap-highlight-color: transparent;
   }
 
@@ -61,8 +74,8 @@
   * limited to iOS to prevent android widening the layout when items overflow.
   */
   @supports (-webkit-touch-callout: none) {
-    .o-header__subnav:has([data-o-header-subnav-dropdown][aria-hidden='false']) .o-header__subnav-wrap-outside,
-    .o-header__subnav:has([data-o-header-subnav-dropdown][aria-hidden='false']) .o-header__subnav-wrap-inside {
+    .o-header__subnav:has([data-o-header-subnav-dropdown-button][aria-expanded='true']) .o-header__subnav-wrap-outside,
+    .o-header__subnav:has([data-o-header-subnav-dropdown-button][aria-expanded='true']) .o-header__subnav-wrap-inside {
       overflow: visible;
     }
   }

package/src/header.scss

@@ -16,6 +16,38 @@
   display: none;
 }
 
+.o-header__search-widget-anchor[data-o-header-search-widget-anchor] {
+  display: none;
+}
+
+// Grid layout on large sizes to create right hand rail for widget anchor
+@include oGridRespondTo('L') {
+  .o-header__search--primary .o-header__container,
+  .o-header__search--sticky .o-header__container {
+    max-width: none;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 840px) minmax(0, 1fr);
+    column-gap: var(--o3-spacing-3xs);
+  }
+
+  .o-header__search--primary .o-header__search-main,
+  .o-header__search--sticky .o-header__search-main {
+    grid-column: 2;
+    grid-row: 1;
+    min-width: 0;
+  }
+
+  .o-header__search--primary .o-header__search-widget-anchor[data-o-header-search-widget-anchor='primary'],
+  .o-header__search--sticky .o-header__search-widget-anchor[data-o-header-search-widget-anchor='sticky'] {
+    grid-column: 3;
+    display: block;
+    width: 100%;
+    min-width: 0;
+    overflow-x: hidden;
+    overflow-y: visible;
+  }
+}
+
 // Import the dropdown navigation styles
 @import 'components/dropdown-navigation/dropdownNavigation.scss';