Explore overriding role attributes to semantically indicate that we a…

…re using approximating select/option
WordPress · Dec 14, 2021 · 3e7af65 · 3e7af65
1 parent 216f9db
commit 3e7af65
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
@@ -11,7 +11,7 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { DropdownMenu, MenuGroup, MenuItem, VisuallyHidden } from '../';
+import { DropdownMenu, MenuItem, VisuallyHidden } from '../';
 
 const itemToString = ( item ) => item?.name;
 
@@ -61,6 +61,10 @@ export default function CustomSelectControlWithDropdownMenu( {
 		),
 	};
 
+	const menuProps = {
+		role: 'select',
+	};
+
 	return (
 		<div
 			className={ classnames(
@@ -85,17 +89,19 @@ export default function CustomSelectControlWithDropdownMenu( {
 					'components-custom-select-control__inner',
 					className
 				) }
+				menuProps={ menuProps }
 				popoverProps={ POPOVER_PROPS }
 				toggleProps={ toggleProps }
 				icon={ null }
 				noIcons={ true }
 			>
 				{ ( { isOpen, onClose } ) =>
 					isOpen && (
-						<MenuGroup>
+						<>
 							{ items.map( ( item, index ) => (
 								<MenuItem
 									key={ index }
+									role="option"
 									{ ...{
 										className: classnames(
 											item.className,
@@ -126,7 +132,7 @@ export default function CustomSelectControlWithDropdownMenu( {
 									) }
 								</MenuItem>
 							) ) }
-						</MenuGroup>
+						</>
 					)
 				}
 			</DropdownMenu>

diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js
@@ -134,7 +134,7 @@ function DropdownMenu( dropdownMenuProps ) {
 				);
 
 				return (
-					<NavigableMenu { ...mergedMenuProps } role="menu">
+					<NavigableMenu role="menu" { ...mergedMenuProps }>
 						{ isFunction( children ) ? children( props ) : null }
 						{ flatMap( controlSets, ( controlSet, indexOfSet ) =>
 							controlSet.map( ( control, indexOfControl ) => (