@financial-times/dotcom-ui-header 7.2.6 → 7.3.0

package/dist/node/components/drawer/topLevelPartials.js

@@ -13,22 +13,21 @@ const Drawer = (props) => {
     const subscribeAction = props.data.subscribeAction;
     const [primary, secondary, tertiary] = props.data.drawer.items;
     const user = props.userIsLoggedIn ? props.data.user : props.data.anon;
-    return (react_1.default.createElement("div", { className: "o-header__drawer", id: "o-header-drawer", role: "navigation", "aria-label": "Drawer menu", "data-o-header-drawer": true, "data-o-header-drawer--no-js": true, "data-trackable": "drawer", "data-trackable-terminate": true },
+    return (react_1.default.createElement("div", { className: "o-header__drawer", id: "o-header-drawer", role: "modal", "aria-label": "Drawer menu", "aria-modal": "true", "data-o-header-drawer": true, "data-o-header-drawer--no-js": true, "data-trackable": "drawer", "data-trackable-terminate": true },
         react_1.default.createElement("div", { className: "o-header__drawer-inner" },
             react_1.default.createElement(DrawerTools, Object.assign({}, editions)),
             !props.userIsSubscribed && subscribeAction && react_1.default.createElement(additionalPartials_1.SubscribeButton, Object.assign({}, subscribeAction)),
             react_1.default.createElement(Search, null),
-            react_1.default.createElement("nav", { className: "o-header__drawer-menu o-header__drawer-menu--primary o-header__drawer-menu--border" },
-                editions && react_1.default.createElement(additionalPartials_1.EditionsSwitcher, Object.assign({}, editions)),
-                react_1.default.createElement("ul", { "data-component": "drawer-menu--primary__drawer-menu-list", className: "o-header__drawer-menu-list" },
-                    primary ? react_1.default.createElement(SectionPrimary, Object.assign({}, primary)) : null,
-                    secondary ? react_1.default.createElement(SectionSecondary, Object.assign({}, secondary)) : null,
-                    tertiary ? react_1.default.createElement(SectionTertiary, Object.assign({}, tertiary)) : null)),
+            react_1.default.createElement("nav", { className: "o-header__drawer-menu", "aria-label": "Edition switcher" }, editions && react_1.default.createElement(additionalPartials_1.EditionsSwitcher, Object.assign({}, editions))),
+            react_1.default.createElement("nav", { className: "o-header__drawer-menu o-header__drawer-menu--primary" },
+                primary ? react_1.default.createElement(SectionPrimary, Object.assign({}, primary)) : null,
+                secondary ? react_1.default.createElement(SectionSecondary, Object.assign({}, secondary)) : null,
+                tertiary ? react_1.default.createElement(SectionTertiary, Object.assign({}, tertiary)) : null),
             react_1.default.createElement(UserMenu, Object.assign({}, user)))));
 };
 const DrawerTools = (props) => (react_1.default.createElement("div", { className: "o-header__drawer-tools" },
-    react_1.default.createElement("button", { type: "button", className: "o-header__drawer-tools-close", title: "Close drawer menu", "aria-controls": "o-header-drawer", "data-trackable": "close" },
-        react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Close drawer menu")),
+    react_1.default.createElement("button", { type: "button", className: "o-header__drawer-tools-close", title: "Close side navigation menu", "aria-controls": "o-header-drawer", "data-trackable": "close" },
+        react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Close side navigation menu")),
     react_1.default.createElement("a", { className: "o-header__drawer-tools-logo", href: "/", "data-trackable": "logo" },
         react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Financial Times")),
     props.current && react_1.default.createElement("p", { className: "o-header__drawer-current-edition" }, `${props.current.name} Edition`)));
@@ -42,23 +41,23 @@ const Search = () => (react_1.default.createElement("div", { className: "o-heade
             react_1.default.createElement("span", { className: "o-header__visually-hidden" }, "Search")))));
 const SectionPrimary = (props) => {
     var _a;
+    const sectionId = props.label.toLowerCase().replace(' ', '-');
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("li", { className: "o-header__drawer-menu-item o-header__drawer-menu-item--heading" }, props.label),
-        ((_a = props.submenu) === null || _a === void 0 ? void 0 : _a.items).map((item, index) => (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" }, item.submenu ? (react_1.default.createElement(additionalPartials_1.DrawerParentItem, { item: item, idSuffix: `${index}` })) : (react_1.default.createElement(additionalPartials_1.DrawerSingleItem, Object.assign({}, item))))))));
+        react_1.default.createElement("h2", { id: sectionId, className: "o-header__drawer-menu-item o-header__drawer-menu-item--heading" }, props.label),
+        react_1.default.createElement("ul", { "aria-labelledby": sectionId, className: "o-header__drawer-menu-list" }, ((_a = props.submenu) === null || _a === void 0 ? void 0 : _a.items).map((item, index) => (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" }, item.submenu ? (react_1.default.createElement(additionalPartials_1.DrawerParentItem, { item: item, idSuffix: `${index}` })) : (react_1.default.createElement(additionalPartials_1.DrawerSingleItem, Object.assign({}, item)))))))));
 };
 const SectionSecondary = (props) => {
     var _a;
+    const sectionId = props.label.toLowerCase().replace(' ', '-');
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("li", { className: "o-header__drawer-menu-item o-header__drawer-menu-item--heading" }, props.label),
-        ((_a = props.submenu) === null || _a === void 0 ? void 0 : _a.items).map((item, index) => (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" }, item.submenu ? (react_1.default.createElement(additionalPartials_1.DrawerParentItem, { item: item, idSuffix: 'inner' + index })) : (react_1.default.createElement(additionalPartials_1.DrawerSingleItem, Object.assign({}, item))))))));
+        react_1.default.createElement("h2", { id: sectionId, className: "o-header__drawer-menu-item o-header__drawer-menu-item--heading" }, props.label),
+        react_1.default.createElement("ul", { "aria-labelledby": sectionId, className: "o-header__drawer-menu-list" }, ((_a = props.submenu) === null || _a === void 0 ? void 0 : _a.items).map((item, index) => (react_1.default.createElement("li", { key: item.url, className: "o-header__drawer-menu-item" }, item.submenu ? (react_1.default.createElement(additionalPartials_1.DrawerParentItem, { item: item, idSuffix: 'inner' + index })) : (react_1.default.createElement(additionalPartials_1.DrawerSingleItem, Object.assign({}, item)))))))));
 };
 const SectionTertiary = (props) => {
     var _a;
-    return (react_1.default.createElement(react_1.default.Fragment, null, ((_a = props.submenu) === null || _a === void 0 ? void 0 : _a.items).map((item, index) => {
-        const divideItem = index === 0 ? 'o-header__drawer-menu-item--divide' : '';
-        return (react_1.default.createElement("li", { "data-component": divideItem ? 'drawer-menu-item--divide' : undefined, key: item.url, className: `o-header__drawer-menu-item ${divideItem}` },
-            react_1.default.createElement(additionalPartials_1.DrawerSpecialItem, Object.assign({}, item))));
-    })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("ul", { className: "o-header__drawer-menu-list o-header__drawer-menu-list--divide" }, ((_a = props.submenu) === null || _a === void 0 ? void 0 : _a.items).map((item) => (react_1.default.createElement("li", { key: item.url, className: `o-header__drawer-menu-item` },
+            react_1.default.createElement(additionalPartials_1.DrawerSpecialItem, Object.assign({}, item))))))));
 };
 const UserMenu = (props) => (react_1.default.createElement("nav", { className: "o-header__drawer-menu o-header__drawer-menu--user", "data-trackable": "user-nav" },
     react_1.default.createElement("ul", { className: "o-header__drawer-menu-list" }, props.items.map((item) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-header",
-  "version": "7.2.6",
+  "version": "7.3.0",
   "description": "",
   "browser": "browser.js",
   "main": "component.js",
@@ -23,7 +23,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^7.2.6",
+    "@financial-times/dotcom-types-navigation": "^7.3.0",
     "n-topic-search": "^4.0.0",
     "n-ui-foundations": "^9.0.0"
   },
@@ -32,11 +32,11 @@
     "@svgr/core": "^5.0.0",
     "camelcase": "^6.0.0",
     "check-engine": "^1.10.1",
-    "@financial-times/o-header": "^10.0.0",
+    "@financial-times/o-header": "^11.0.4",
     "react": "^16.8.6"
   },
   "peerDependencies": {
-    "@financial-times/o-header": "^10.0.0",
+    "@financial-times/o-header": "^11.0.4",
     "@financial-times/logo-images": "^1.10.1",
     "react": "16.x || 17.x"
   },

package/src/components/drawer/topLevelPartials.tsx

@@ -21,8 +21,9 @@ const Drawer = (props: THeaderProps) => {
     <div
       className="o-header__drawer"
       id="o-header-drawer"
-      role="navigation"
+      role="modal"
       aria-label="Drawer menu"
+      aria-modal="true"
       data-o-header-drawer
       data-o-header-drawer--no-js
       data-trackable="drawer"
@@ -32,13 +33,13 @@ const Drawer = (props: THeaderProps) => {
         <DrawerTools {...editions} />
         {!props.userIsSubscribed && subscribeAction && <SubscribeButton {...subscribeAction} />}
         <Search />
-        <nav className="o-header__drawer-menu o-header__drawer-menu--primary o-header__drawer-menu--border">
+        <nav className="o-header__drawer-menu" aria-label="Edition switcher">
           {editions && <EditionsSwitcher {...editions} />}
-          <ul data-component="drawer-menu--primary__drawer-menu-list" className="o-header__drawer-menu-list">
-            {primary ? <SectionPrimary {...primary} /> : null}
-            {secondary ? <SectionSecondary {...secondary} /> : null}
-            {tertiary ? <SectionTertiary {...tertiary} /> : null}
-          </ul>
+        </nav>
+        <nav className="o-header__drawer-menu o-header__drawer-menu--primary">
+          {primary ? <SectionPrimary {...primary} /> : null}
+          {secondary ? <SectionSecondary {...secondary} /> : null}
+          {tertiary ? <SectionTertiary {...tertiary} /> : null}
         </nav>
         <UserMenu {...user} />
       </div>
@@ -51,11 +52,11 @@ const DrawerTools = (props: TNavEditions) => (
     <button
       type="button"
       className="o-header__drawer-tools-close"
-      title="Close drawer menu"
+      title="Close side navigation menu"
       aria-controls="o-header-drawer"
       data-trackable="close"
     >
-      <span className="o-header__visually-hidden">Close drawer menu</span>
+      <span className="o-header__visually-hidden">Close side navigation menu</span>
     </button>
     <a className="o-header__drawer-tools-logo" href="/" data-trackable="logo">
       <span className="o-header__visually-hidden">Financial Times</span>
@@ -99,52 +100,58 @@ const Search = () => (
 )
 
 const SectionPrimary = (props: TNavMenuItem) => {
+  const sectionId = props.label.toLowerCase().replace(' ', '-')
   return (
     <React.Fragment>
-      <li className="o-header__drawer-menu-item o-header__drawer-menu-item--heading">{props.label}</li>
-      {(props.submenu?.items as TNavMenuItem[]).map((item, index) => (
-        <li key={item.url} className="o-header__drawer-menu-item">
-          {item.submenu ? (
-            <DrawerParentItem item={item} idSuffix={`${index}`} />
-          ) : (
-            <DrawerSingleItem {...item} />
-          )}
-        </li>
-      ))}
+      <h2 id={sectionId} className="o-header__drawer-menu-item o-header__drawer-menu-item--heading">
+        {props.label}
+      </h2>
+      <ul aria-labelledby={sectionId} className="o-header__drawer-menu-list">
+        {(props.submenu?.items as TNavMenuItem[]).map((item, index) => (
+          <li key={item.url} className="o-header__drawer-menu-item">
+            {item.submenu ? (
+              <DrawerParentItem item={item} idSuffix={`${index}`} />
+            ) : (
+              <DrawerSingleItem {...item} />
+            )}
+          </li>
+        ))}
+      </ul>
     </React.Fragment>
   )
 }
 
-const SectionSecondary = (props: TNavMenuItem) => (
-  <React.Fragment>
-    <li className="o-header__drawer-menu-item o-header__drawer-menu-item--heading">{props.label}</li>
-    {(props.submenu?.items as TNavMenuItem[]).map((item, index) => (
-      <li key={item.url} className="o-header__drawer-menu-item">
-        {item.submenu ? (
-          <DrawerParentItem item={item} idSuffix={'inner' + index} />
-        ) : (
-          <DrawerSingleItem {...item} />
-        )}
-      </li>
-    ))}
-  </React.Fragment>
-)
+const SectionSecondary = (props: TNavMenuItem) => {
+  const sectionId = props.label.toLowerCase().replace(' ', '-')
+  return (
+    <React.Fragment>
+      <h2 id={sectionId} className="o-header__drawer-menu-item o-header__drawer-menu-item--heading">
+        {props.label}
+      </h2>
+      <ul aria-labelledby={sectionId} className="o-header__drawer-menu-list">
+        {(props.submenu?.items as TNavMenuItem[]).map((item, index) => (
+          <li key={item.url} className="o-header__drawer-menu-item">
+            {item.submenu ? (
+              <DrawerParentItem item={item} idSuffix={'inner' + index} />
+            ) : (
+              <DrawerSingleItem {...item} />
+            )}
+          </li>
+        ))}
+      </ul>
+    </React.Fragment>
+  )
+}
 
 const SectionTertiary = (props: TNavMenuItem) => (
   <React.Fragment>
-    {(props.submenu?.items as TNavMenuItem[]).map((item, index) => {
-      const divideItem = index === 0 ? 'o-header__drawer-menu-item--divide' : ''
-
-      return (
-        <li
-          data-component={divideItem ? 'drawer-menu-item--divide' : undefined}
-          key={item.url}
-          className={`o-header__drawer-menu-item ${divideItem}`}
-        >
+    <ul className="o-header__drawer-menu-list o-header__drawer-menu-list--divide">
+      {(props.submenu?.items as TNavMenuItem[]).map((item) => (
+        <li key={item.url} className={`o-header__drawer-menu-item`}>
           <DrawerSpecialItem {...item} />
         </li>
-      )
-    })}
+      ))}
+    </ul>
   </React.Fragment>
 )