From 4108636e42e47c169fccf094b7e334811d5b87dc Mon Sep 17 00:00:00 2001
From: Marco Zehe <MarcoZehe@users.noreply.github.com>
Date: Fri, 20 Dec 2019 20:00:03 +0100
Subject: [PATCH] Accessibility: Improve Welcome guide and modal component.
 (#19261)

---
 packages/components/src/guide/README.md                  | 7 +++++++
 packages/components/src/guide/index.js                   | 3 ++-
 packages/components/src/guide/page-control.js            | 5 ++++-
 packages/components/src/guide/stories/index.js           | 2 ++
 packages/components/src/modal/index.js                   | 2 +-
 packages/edit-post/src/components/welcome-guide/index.js | 1 +
 6 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/guide/README.md b/packages/components/src/guide/README.md
index 0c9fdacaf784d..84c354f1674df 100644
--- 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
index 3d0a905741e14..ba4615cb811b4 100644
--- 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
index 6a5a451efd6b1..9616974c57b6c 100644
--- 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
index ff82a9befae36..7b11c9929b1e0 100644
--- 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
index f4a64c289b4e7..a4ccfff0259e8 100644
--- 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
index 0dbcbab91f32d..99d26a6aa37cc 100644
--- 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' ) }
 		>