Fix aria-required-parent and aria-required-children accessibility violations

Author: DanielCliftonGuardian

dotcom-rendering/src/components/Masthead/Titlepiece/ExpandedNav/MoreSection.tsx

@@ -160,7 +160,6 @@ export const MoreSection = ({
 				pillarDivider,
 				pillarDividerExtended,
 			]}
-			role="none"
 		>
 			<ul css={columnLinks} role="menu" id={moreSectionId}>
 				{links.map((link) => (

dotcom-rendering/src/components/Masthead/Titlepiece/ExpandedNav/Pillar.tsx

@@ -190,7 +190,6 @@ export const Pillar = ({
 				!hasPageSkin && columnStyleFromLeftCol,
 				pillarDivider,
 			]}
-			role="none"
 		>
 			{/*
                 IMPORTANT NOTE: Supporting NoJS and accessibility is hard.

dotcom-rendering/src/components/Masthead/Titlepiece/ExpandedNav/SearchBar.tsx

@@ -91,7 +91,11 @@ const searchSubmit = css`
 export const SearchBar = () => {
 	const searchId = 'gu-search';
 	return (
-		<form css={searchBar} action="https://www.google.co.uk/search">
+		<form
+			css={searchBar}
+			action="https://www.google.co.uk/search"
+			role="search"
+		>
 			<TextInput
 				hideLabel={true}
 				label="Search input"

dotcom-rendering/src/components/Masthead/Titlepiece/ExpandedNav/Sections.tsx

@@ -10,12 +10,15 @@ import {
 	space,
 	textSans17,
 } from '@guardian/source/foundations';
-import { Hide } from '@guardian/source/react-components';
 import type { EditionId } from '../../../../lib/edition';
 import { nestedOphanComponents } from '../../../../lib/ophan-helpers';
 import type { LinkType, NavType } from '../../../../model/extract-nav';
 import { palette as themePalette } from '../../../../palette';
-import { expandedNavLinkStyles, listAccessibility } from '../commonStyles';
+import {
+	expandedNavLinkStyles,
+	hideFromDesktop,
+	listAccessibility,
+} from '../commonStyles';
 import { MoreSection } from './MoreSection';
 import { lineStyle, Pillar } from './Pillar';
 import { ReaderRevenueLinks } from './ReaderRevenueLinks';
@@ -111,7 +114,6 @@ export const Sections = ({ nav, editionId, hasPageSkin }: Props) => {
 	return (
 		<ul
 			css={[columnsStyle, !hasPageSkin && columnsStyleFromLeftCol]}
-			role="menubar"
 			data-testid="nav-menu-columns"
 		>
 			{nav.pillars.map((column, i) => {
@@ -142,17 +144,17 @@ export const Sections = ({ nav, editionId, hasPageSkin }: Props) => {
 				);
 			})}
 
-			<Hide from="desktop">
-				<li role="none">
-					<SearchBar />
-				</li>
-			</Hide>
-			<div css={lineStyle}></div>
+			<li css={hideFromDesktop}>
+				<SearchBar />
+			</li>
+			<li css={lineStyle}></li>
 
-			<ReaderRevenueLinks
-				readerRevenueLinks={nav.readerRevenueLinks}
-				editionId={editionId}
-			/>
+			<li>
+				<ReaderRevenueLinks
+					readerRevenueLinks={nav.readerRevenueLinks}
+					editionId={editionId}
+				/>
+			</li>
 
 			{/* Mobile only Brand Extensions list */}
 			<MoreSection
@@ -163,7 +165,7 @@ export const Sections = ({ nav, editionId, hasPageSkin }: Props) => {
 			/>
 
 			{/* Desktop only Brand Extensions list*/}
-			<li css={desktopBrandExtensionColumn} role="none">
+			<li css={desktopBrandExtensionColumn}>
 				<SearchBar />
 
 				<ul
@@ -177,6 +179,7 @@ export const Sections = ({ nav, editionId, hasPageSkin }: Props) => {
 						<li
 							css={brandExtensionListItem}
 							key={brandExtension.title}
+							role="none"
 						>
 							<a
 								className="selectableMenuItem"