Accessibility: Fix Block Appender Accessibility (#5742)

* Accessibility: Fix Block Appender Accessibility * Improve label and update snapshot.
WordPress · Mar 22, 2018 · 430fa77 · 430fa77
1 parent 89205a9
commit 430fa77
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/editor/components/default-block-appender/index.js b/editor/components/default-block-appender/index.js
@@ -44,6 +44,8 @@ export function DefaultBlockAppender( {
 			className="editor-default-block-appender">
 			<BlockDropZone />
 			<input
+				role="button"
+				aria-label={ __( 'Add block' ) }
 				className="editor-default-block-appender__content"
 				type="text"
 				readOnly

diff --git a/editor/components/default-block-appender/test/__snapshots__/index.js.snap b/editor/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -7,6 +7,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
 >
   <Connect(WrappedComponent) />
   <input
+    aria-label="Add block"
     className="editor-default-block-appender__content"
     onClick={
       [MockFunction] {
@@ -30,6 +31,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
       }
     }
     readOnly={true}
+    role="button"
     type="text"
     value="Write your story"
   />
@@ -47,11 +49,13 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
 >
   <Connect(WrappedComponent) />
   <input
+    aria-label="Add block"
     className="editor-default-block-appender__content"
     onClick={[MockFunction]}
     onFocus={[MockFunction]}
     onKeyDown={[MockFunction]}
     readOnly={true}
+    role="button"
     type="text"
     value="Write your story"
   />
@@ -69,11 +73,13 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
 >
   <Connect(WrappedComponent) />
   <input
+    aria-label="Add block"
     className="editor-default-block-appender__content"
     onClick={[MockFunction]}
     onFocus={[MockFunction]}
     onKeyDown={[MockFunction]}
     readOnly={true}
+    role="button"
     type="text"
     value=""
   />