Improve accessibility and consistency of the Revisions button.

WordPress · Oct 30, 2024 · eafd7f1 · eafd7f1
1 parent 648c458
commit eafd7f1
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 25 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js
@@ -6,8 +6,8 @@ import { humanTimeDiff } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
 import { addQueryArgs } from '@wordpress/url';
 import {
-	Icon,
 	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
 } from '@wordpress/components';
 import { backup } from '@wordpress/icons';
 
@@ -17,7 +17,6 @@ import { backup } from '@wordpress/icons';
 import {
 	SidebarNavigationScreenDetailsPanelRow,
 	SidebarNavigationScreenDetailsPanelLabel,
-	SidebarNavigationScreenDetailsPanelValue,
 } from '../sidebar-navigation-screen-details-panel';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 
@@ -44,33 +43,32 @@ export default function SidebarNavigationScreenDetailsFooter( {
 		hrefProps.as = 'a';
 	}
 	return (
-		<ItemGroup className="edit-site-sidebar-navigation-screen-details-footer">
-			<SidebarNavigationItem
-				aria-label={ __( 'Revisions' ) }
-				{ ...hrefProps }
-				{ ...otherProps }
-			>
-				<SidebarNavigationScreenDetailsPanelRow justify="space-between">
+		<ItemGroup
+			size="large"
+			className="edit-site-sidebar-navigation-screen-details-footer"
+		>
+			<Item>
+				<SidebarNavigationScreenDetailsPanelRow>
 					<SidebarNavigationScreenDetailsPanelLabel>
-						{ __( 'Last modified' ) }
-					</SidebarNavigationScreenDetailsPanelLabel>
-					<SidebarNavigationScreenDetailsPanelValue>
 						{ createInterpolateElement(
 							sprintf(
 								/* translators: %s: is the relative time when the post was last modified. */
-								__( '<time>%s</time>' ),
+								__( 'Last modified: <time>%s</time>' ),
 								humanTimeDiff( record.modified )
 							),
 							{
 								time: <time dateTime={ record.modified } />,
 							}
 						) }
-					</SidebarNavigationScreenDetailsPanelValue>
-					<Icon
-						className="edit-site-sidebar-navigation-screen-details-footer__icon"
-						icon={ backup }
-					/>
+					</SidebarNavigationScreenDetailsPanelLabel>
 				</SidebarNavigationScreenDetailsPanelRow>
+			</Item>
+			<SidebarNavigationItem
+				icon={ backup }
+				{ ...hrefProps }
+				{ ...otherProps }
+			>
+				{ __( 'Revisions' ) }
 			</SidebarNavigationItem>
 		</ItemGroup>
 	);

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss
@@ -5,8 +5,4 @@
 	div.edit-site-sidebar-navigation-item.components-item[aria-current] {
 		background: none;
 	}
-	.edit-site-sidebar-navigation-screen-details-footer__icon {
-		margin-left: auto;
-		fill: $gray-600;
-	}
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss
@@ -17,10 +17,9 @@
 
 .edit-site-sidebar-navigation-details-screen-panel__label.edit-site-sidebar-navigation-details-screen-panel__label {
 	color: $gray-600;
-	width: 100px;
-	flex-shrink: 0;
 }
 
+.edit-site-sidebar-navigation-details-screen-panel__label time,
 .edit-site-sidebar-navigation-details-screen-panel__value.edit-site-sidebar-navigation-details-screen-panel__value {
 	color: $gray-200;
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -127,9 +127,14 @@
 	bottom: 0;
 	background-color: $gray-900;
 	gap: 0;
-	padding: $grid-unit-20 0;
+	padding: $grid-unit-10 $grid-unit-20;
 	margin: $grid-unit-20 0 0;
 	border-top: 1px solid $gray-800;
+
+	.components-item-group {
+		margin-left: -$grid-unit-20;
+		margin-right: -$grid-unit-20;
+	}
 }
 
 /* In general style overrides are discouraged.