Accessibility: Improve Welcome guide and modal component. (#19261)

WordPress · Dec 20, 2019 · 4108636 · 4108636
1 parent 14401e0
commit 4108636
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 3 deletions.
diff --git a/packages/components/src/guide/README.md b/packages/components/src/guide/README.md
@@ -48,6 +48,13 @@ A custom class to add to the modal.
 - Type: `string`
 - Required: No
 
+### contentLabel
+
+This property is used as the modal's accessibility label. It is required for accessibility reasons.
+
+- Type: `String`
+- Required: Yes
+
 ### finishButtonText
 
 Use this to customize the label of the _Finish_ button shown at the end of the guide.

diff --git a/packages/components/src/guide/index.js b/packages/components/src/guide/index.js
@@ -19,7 +19,7 @@ import PageControl from './page-control';
 import { BackButtonIcon, ForwardButtonIcon } from './icons';
 import FinishButton from './finish-button';
 
-export default function Guide( { children, className, finishButtonText, onFinish } ) {
+export default function Guide( { children, className, contentLabel, finishButtonText, onFinish } ) {
 	const [ currentPage, setCurrentPage ] = useState( 0 );
 
 	const numberOfPages = Children.count( children );
@@ -45,6 +45,7 @@ export default function Guide( { children, className, finishButtonText, onFinish
 	return (
 		<Modal
 			className={ classnames( 'components-guide', className ) }
+			contentLabel={ contentLabel }
 			onRequestClose={ onFinish }
 		>
 

diff --git a/packages/components/src/guide/page-control.js b/packages/components/src/guide/page-control.js
@@ -18,7 +18,10 @@ export default function PageControl( { currentPage, numberOfPages, setCurrentPag
 	return (
 		<ul className="components-guide__page-control" aria-label={ __( 'Guide controls' ) }>
 			{ times( numberOfPages, ( page ) => (
-				<li key={ page }>
+				<li
+					key={ page }
+					aria-current={ page === currentPage }
+				>
 					<IconButton
 						key={ page }
 						icon={ <PageControlIcon isSelected={ page === currentPage } /> }

diff --git a/packages/components/src/guide/stories/index.js b/packages/components/src/guide/stories/index.js
@@ -45,10 +45,12 @@ const ModalExample = ( { numberOfPages, ...props } ) => {
 
 export const _default = () => {
 	const finishButtonText = text( 'finishButtonText', 'Finish' );
+	const contentLabel = text( 'title', 'Guide title' );
 	const numberOfPages = number( 'numberOfPages', 3, { range: true, min: 1, max: 10, step: 1 } );
 
 	const modalProps = {
 		finishButtonText,
+		contentLabel,
 		numberOfPages,
 	};
 

diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js
@@ -134,7 +134,7 @@ class Modal extends Component {
 				} }
 				{ ...otherProps }
 			>
-				<div className={ 'components-modal__content' } tabIndex="0">
+				<div className={ 'components-modal__content' } tabIndex="0" role="document">
 					<ModalHeader
 						closeLabel={ closeButtonLabel }
 						headingId={ headingId }

diff --git a/packages/edit-post/src/components/welcome-guide/index.js b/packages/edit-post/src/components/welcome-guide/index.js
@@ -23,6 +23,7 @@ export default function WelcomeGuide() {
 	return (
 		<Guide
 			className="edit-post-welcome-guide"
+			contentLabel={ __( 'Welcome to the Block Editor' ) }
 			finishButtonText={ __( 'Get started' ) }
 			onFinish={ () => toggleFeature( 'welcomeGuide' ) }
 		>