Welcome guide: Improve a11y of page controls

WordPress · Nov 22, 2019 · 0ce1ee1 · 0ce1ee1
1 parent 7748caa
commit 0ce1ee1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/packages/nux/src/components/guide/page-control.js b/packages/nux/src/components/guide/page-control.js
@@ -6,6 +6,7 @@ import { times } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { __, sprintf } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/components';
 
 /**
@@ -15,14 +16,18 @@ import { PageControlIcon } from './icons';
 
 export default function PageControl( { currentPage, numberOfPages, setCurrentPage } ) {
 	return (
-		<div className="nux-guide__page-control">
+		<ul className="nux-guide__page-control" aria-label={ __( 'Guide controls' ) }>
 			{ times( numberOfPages, ( page ) => (
-				<IconButton
-					key={ page }
-					icon={ <PageControlIcon isSelected={ page === currentPage } /> }
-					onClick={ () => setCurrentPage( page ) }
-				/>
+				<li key={ page }>
+					<IconButton
+						key={ page }
+						icon={ <PageControlIcon isSelected={ page === currentPage } /> }
+						/* translators: %1$d: current page number %2$d: total number of pages */
+						aria-label={ sprintf( __( 'Page %1$d of %2$d' ), page + 1, numberOfPages ) }
+						onClick={ () => setCurrentPage( page ) }
+					/>
+				</li>
 			) ) }
-		</div>
+		</ul>
 	);
 }
diff --git a/packages/nux/src/components/guide/style.scss b/packages/nux/src/components/guide/style.scss
@@ -40,11 +40,16 @@
 	}
 
 	&__page-control {
-		display: flex;
+		margin: 0;
 
-		.components-button {
+		li {
+			display: inline-block;
 			margin: 0 2px;
 		}
+
+		.components-icon-button {
+			height: 30px;
+		}
 	}
 
 	&__back-button,