Merge in trunk, resolve conflict

packages/block-editor/src/components/list-view/block-select-button.js

@@ -35,6 +35,9 @@ function ListViewBlockSelectButton(
 		onDragStart,
 		onDragEnd,
 		draggable,
+		isExpanded,
+		ariaLabel,
+		ariaDescribedBy,
 	},
 	ref
 ) {
@@ -76,7 +79,9 @@ function ListViewBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
-				aria-hidden={ true }
+				aria-label={ ariaLabel }
+				aria-describedby={ ariaDescribedBy }
+				aria-expanded={ isExpanded }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />

packages/block-editor/src/components/list-view/block.js

@@ -53,7 +53,6 @@ function ListViewBlock( {
 	path,
 	isExpanded,
 	selectedClientIds,
-	preventAnnouncement,
 	isSyncedBranch,
 } ) {
 	const cellRef = useRef( null );
@@ -90,6 +89,7 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockTitle = blockInformation?.title || __( 'Untitled' );
 	const blockName = useSelect(
 		( select ) => select( blockEditorStore ).getBlockName( clientId ),
 		[ clientId ]
@@ -111,28 +111,19 @@ function ListViewBlock( {
 		level
 	);
 
-	let blockAriaLabel = __( 'Link' );
-	if ( blockInformation ) {
-		blockAriaLabel = isLocked
-			? sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the locked block.
-					__( '%s link (locked)' ),
-					blockInformation.title
-			  )
-			: sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the block.
-					__( '%s link' ),
-					blockInformation.title
-			  );
-	}
-
-	const settingsAriaLabel = blockInformation
+	const blockAriaLabel = isLocked
 		? sprintf(
-				// translators: %s: The title of the block.
-				__( 'Options for %s block' ),
-				blockInformation.title
+				// translators: %s: The title of the block. This string indicates a link to select the locked block.
+				__( '%s (locked)' ),
+				blockTitle
 		  )
-		: __( 'Options' );
+		: blockTitle;
+
+	const settingsAriaLabel = sprintf(
+		// translators: %s: The title of the block.
+		__( 'Options for %s' ),
+		blockTitle
+	);
 
 	const { isTreeGridMounted, expand, collapse, BlockSettingsMenu } =
 		useListViewContext();
@@ -249,18 +240,13 @@ function ListViewBlock( {
 			id={ `list-view-block-${ clientId }` }
 			data-block={ clientId }
 			data-expanded={ canExpand ? isExpanded : undefined }
-			isExpanded={ canExpand ? isExpanded : undefined }
-			aria-selected={ !! isSelected || forceSelectionContentLock }
 			ref={ rowRef }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
 				colSpan={ colSpan }
 				ref={ cellRef }
-				aria-label={ blockAriaLabel }
 				aria-selected={ !! isSelected || forceSelectionContentLock }
-				aria-expanded={ canExpand ? isExpanded : undefined }
-				aria-describedby={ descriptionId }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-list-view-block__contents-container">
@@ -277,9 +263,10 @@ function ListViewBlock( {
 								currentlyEditingBlockInCanvas ? 0 : tabIndex
 							}
 							onFocus={ onFocus }
-							isExpanded={ isExpanded }
+							isExpanded={ canExpand ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
-							preventAnnouncement={ preventAnnouncement }
+							ariaLabel={ blockAriaLabel }
+							ariaDescribedBy={ descriptionId }
 						/>
 						<div
 							className="block-editor-list-view-block-select-button__description"

packages/block-editor/src/components/list-view/leaf.js

@@ -51,6 +51,7 @@ const ListViewLeaf = forwardRef(
 				level={ level }
 				positionInSet={ position }
 				setSize={ rowCount }
+				isExpanded={ undefined }
 				{ ...props }
 			>
 				{ children }

packages/block-editor/src/components/list-view/style.scss

@@ -15,6 +15,18 @@
 	// Use position relative for row animation.
 	position: relative;
 
+	.components-button {
+		// When a row is expanded, retain the dark color.
+		&[aria-expanded="true"] {
+			color: $gray-900;
+		}
+
+		// Ensure that on hover, the admin color is still used.
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+
 	// The background has to be applied to the td, not tr, or border-radius won't work.
 	&.is-selected td {
 		background: var(--wp-admin-theme-color);
@@ -93,7 +105,7 @@
 	&.is-branch-selected.is-first-selected td:last-child {
 		border-top-right-radius: $radius-block-ui;
 	}
-	&[aria-expanded="false"] {
+	&[data-expanded="false"] {
 		&.is-branch-selected.is-first-selected td:first-child {
 			border-top-left-radius: $radius-block-ui;
 		}
@@ -380,15 +392,15 @@ $block-navigation-max-indent: 8;
 }
 
 // Point downwards when open.
-.block-editor-list-view-leaf[aria-expanded="true"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="true"] .block-editor-list-view__expander svg {
 	visibility: visible;
 	transition: transform 0.2s ease;
 	transform: rotate(90deg);
 	@include reduce-motion("transition");
 }
 
 // Point rightwards when closed
-.block-editor-list-view-leaf[aria-expanded="false"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="false"] .block-editor-list-view__expander svg {
 	visibility: visible;
 	transform: rotate(0deg);
 	transition: transform 0.2s ease;

packages/block-editor/src/components/list-view/use-block-selection.js

@@ -144,7 +144,7 @@ export default function useBlockSelection() {
 			}
 
 			if ( label ) {
-				speak( label );
+				speak( label, 'assertive' );
 			}
 		},
 		[

packages/components/CHANGELOG.md

@@ -6,6 +6,10 @@
 
 -   `NavigableContainer`: Convert to TypeScript ([#49377](https://github.com/WordPress/gutenberg/pull/49377)).
 
+### Enhancements
+
+-   `TreeGrid`: Modify keyboard navigation code to use a data-expanded attribute if aria-expanded is to be controlled outside of the TreeGrid component ([#48461](https://github.com/WordPress/gutenberg/pull/48461)).
+
 ### Documentation
 
 -   `Autocomplete`: Add heading and fix type for `onReplace` in README. ([#49798](https://github.com/WordPress/gutenberg/pull/49798)).
@@ -20,6 +24,7 @@
 
 -   `DropZone`: Smooth animation ([#49517](https://github.com/WordPress/gutenberg/pull/49517)).
 -   `Navigator`: Add `skipFocus` property in `NavigateOptions`. ([#49350](https://github.com/WordPress/gutenberg/pull/49350)).
+-   `Spinner`: add explicit opacity and background styles ([#49695](https://github.com/WordPress/gutenberg/pull/49695)).
 
 ### Bug Fix
 

packages/components/src/spinner/styles.ts

@@ -26,6 +26,8 @@ export const StyledSpinner = styled.svg`
 	position: relative;
 	color: ${ COLORS.ui.theme };
 	overflow: visible;
+	opacity: 1;
+	background-color: transparent;
 `;
 
 const commonPathProps = css`

packages/components/src/tree-grid/index.tsx

@@ -91,7 +91,8 @@ function UnforwardedTreeGrid(
 			const canExpandCollapse = 0 === currentColumnIndex;
 			const cannotFocusNextColumn =
 				canExpandCollapse &&
-				activeRow.getAttribute( 'aria-expanded' ) === 'false' &&
+				( activeRow.getAttribute( 'data-expanded' ) === 'false' ||
+					activeRow.getAttribute( 'aria-expanded' ) === 'false' ) &&
 				keyCode === RIGHT;
 
 			if ( ( [ LEFT, RIGHT ] as number[] ).includes( keyCode ) ) {
@@ -112,6 +113,8 @@ function UnforwardedTreeGrid(
 						// Left:
 						// If a row is focused, and it is expanded, collapses the current row.
 						if (
+							activeRow.getAttribute( 'data-expanded' ) ===
+								'true' ||
 							activeRow.getAttribute( 'aria-expanded' ) === 'true'
 						) {
 							onCollapseRow( activeRow );
@@ -151,8 +154,10 @@ function UnforwardedTreeGrid(
 						// Right:
 						// If a row is focused, and it is collapsed, expands the current row.
 						if (
+							activeRow.getAttribute( 'data-expanded' ) ===
+								'false' ||
 							activeRow.getAttribute( 'aria-expanded' ) ===
-							'false'
+								'false'
 						) {
 							onExpandRow( activeRow );
 							event.preventDefault();

packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -595,6 +595,8 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   position: relative;
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   overflow: visible;
+  opacity: 1;
+  background-color: transparent;
 }
 
 .emotion-2 {

test/e2e/specs/editor/blocks/columns.spec.js

@@ -26,7 +26,7 @@ test.describe( 'Columns', () => {
 		// block column add
 		await page
 			.locator(
-				'role=treegrid[name="Block navigation structure"i] >> role=gridcell[name="Column link"i]'
+				'role=treegrid[name="Block navigation structure"i] >> role=gridcell[name="Column"i]'
 			)
 			.first()
 			.click();