Try to make code cleaner. Update the Changelog.

packages/components/CHANGELOG.md

@@ -7,14 +7,11 @@
 -   Components: Fix `Slot`/`Fill` Emotion `StyleProvider` ([#38237](https://github.com/WordPress/gutenberg/pull/38237))
 -   Reduce height and min-width of the reset button on `ComboBoxControl` for consistency. ([#38020](https://github.com/WordPress/gutenberg/pull/38020))
 -   Removed unused `rememo` dependency ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
--   Added `__unstableInputWidth` to `UnitControl` type definition ([#38429](https://github.com/WordPress/gutenberg/pull/38429)).
--   Fixed typing errors for `ColorPicker` ([#38430](https://github.com/WordPress/gutenberg/pull/38430)).
--   Updated destructuring of `Dropdown` props to be TypeScript friendly ([#38431](https://github.com/WordPress/gutenberg/pull/38431)).
--   Added `ts-nocheck` to `ColorIndicator` so it can be used in typed components ([#38433](https://github.com/WordPress/gutenberg/pull/38433)).
 
 ### Enhancements
 
 -   Update the visual design of the `Spinner` component. ([#37551](https://github.com/WordPress/gutenberg/pull/37551))
+- TreeGrid accessibility enhancements. (#38358)
 
 ## 19.3.0 (2022-01-27)
 

packages/components/src/placeholder/index.js

@@ -73,14 +73,12 @@ function Placeholder( {
 				<Icon icon={ icon } />
 				{ label }
 			</div>
-			<fieldset className={ fieldsetClasses }>
-				{ !! instructions && (
-					<legend className="components-placeholder__instructions">
-						{ instructions }
-					</legend>
-				) }
-				{ children }
-			</fieldset>
+			{ !! instructions && (
+				<div className="components-placeholder__instructions">
+					{ instructions }
+				</div>
+			) }
+			<div className={ fieldsetClasses }>{ children }</div>
 		</div>
 	);
 }

packages/components/src/placeholder/style.scss

@@ -77,18 +77,6 @@
 	}
 }
 
-// Overrides for browser and editor fieldset styles.
-.components-placeholder__fieldset.components-placeholder__fieldset {
-	border: none;
-	padding: 0;
-
-	.components-placeholder__instructions {
-		padding: 0;
-		font-weight: normal;
-		font-size: 1em;
-	}
-}
-
 .components-placeholder__fieldset.is-column-layout,
 .components-placeholder__fieldset.is-column-layout form {
 	flex-direction: column;

packages/components/src/placeholder/test/index.js

@@ -88,31 +88,14 @@ describe( 'Placeholder', () => {
 			const element = <div>Fieldset</div>;
 			const placeholder = shallow( <Placeholder children={ element } /> );
 			const placeholderFieldset = placeholder.find(
-				'fieldset.components-placeholder__fieldset'
+				'.components-placeholder__fieldset'
 			);
 			const child = placeholderFieldset.childAt( 0 );
 
 			expect( placeholderFieldset.exists() ).toBe( true );
 			expect( child.matchesElement( element ) ).toBe( true );
 		} );
 
-		it( 'should display a legend if instructions are passed', () => {
-			const element = <div>Fieldset</div>;
-			const instructions = 'Choose an option.';
-			const placeholder = shallow(
-				<Placeholder
-					children={ element }
-					instructions={ instructions }
-				/>
-			);
-			const placeholderLegend = placeholder.find(
-				'legend.components-placeholder__instructions'
-			);
-
-			expect( placeholderLegend.exists() ).toBe( true );
-			expect( placeholderLegend.text() ).toEqual( instructions );
-		} );
-
 		it( 'should add an additional className to the top container', () => {
 			const placeholder = shallow(
 				<Placeholder className="wp-placeholder" />

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

@@ -78,6 +78,10 @@ function TreeGrid(
 			const activeRow = activeElement.closest( '[role="row"]' );
 			const focusablesInRow = getRowFocusables( activeRow );
 			const currentColumnIndex = focusablesInRow.indexOf( activeElement );
+			const canExpandCollapse = 0 === currentColumnIndex;
+			const cannotFocusNextColumn =
+				activeRow.getAttribute( 'aria-expanded' ) === 'false' &&
+				keyCode !== LEFT;
 
 			if ( includes( [ LEFT, RIGHT ], keyCode ) ) {
 				// Calculate to the next element.
@@ -91,12 +95,8 @@ function TreeGrid(
 					);
 				}
 
-				// Focus is either at the left or right edge of the grid. Allow Right Arrow to expand the row.
-				if (
-					nextIndex === currentColumnIndex ||
-					( activeRow.hasAttribute( 'aria-expanded' ) &&
-						keyCode === RIGHT )
-				) {
+				// Focus is at the left most column.
+				if ( canExpandCollapse ) {
 					if ( keyCode === LEFT ) {
 						// Left:
 						// If a row is focused, and it is expanded, collapses the current row.
@@ -153,11 +153,8 @@ function TreeGrid(
 					return;
 				}
 
-				// Focus the next column only if expanded. Checking Right Arrow key here that way Left Arrow can always get back to the previous column regardless of the row state.
-				if (
-					activeRow.getAttribute( 'aria-expanded' ) === 'false' &&
-					keyCode === RIGHT
-				) {
+				// Focus the next element. If at most left column and row is collapsed, moving right is not allowed as this will expand. However, if row is collapsed, moving left is allowed.
+				if ( cannotFocusNextColumn ) {
 					return;
 				}
 				focusablesInRow[ nextIndex ].focus();