FIX: Use a role="textbox" for all the RichText elements (#4074)

WordPress · Mar 28, 2018 · d9a77d2 · d9a77d2
1 parent af55057
commit d9a77d2
Show file tree

Hide file tree

Showing 12 changed files with 24 additions and 1 deletion.
diff --git a/blocks/library/button/test/__snapshots__/index.js.snap b/blocks/library/button/test/__snapshots__/index.js.snap
@@ -9,9 +9,11 @@ exports[`core/button block edit matches snapshot 1`] = `
   >
     <span
       aria-label="Add text…"
+      aria-multiline="false"
       class="wp-block-button__link blocks-rich-text__tinymce"
       contenteditable="true"
       data-is-placeholder-visible="true"
+      role="textbox"
     />
     <span
       class="blocks-rich-text__tinymce wp-block-button__link"

diff --git a/blocks/library/heading/test/__snapshots__/index.js.snap b/blocks/library/heading/test/__snapshots__/index.js.snap
@@ -6,9 +6,11 @@ exports[`core/heading block edit matches snapshot 1`] = `
 >
   <h2
     aria-label="Write heading…"
+    aria-multiline="false"
     class="blocks-rich-text__tinymce"
     contenteditable="true"
     data-is-placeholder-visible="true"
+    role="textbox"
   />
   <h2
     class="blocks-rich-text__tinymce"

diff --git a/blocks/library/list/test/__snapshots__/index.js.snap b/blocks/library/list/test/__snapshots__/index.js.snap
@@ -6,6 +6,7 @@ exports[`core/list block edit matches snapshot 1`] = `
 >
   <ul
     aria-label="Write list…"
+    aria-multiline="true"
     class="blocks-rich-text__tinymce"
     contenteditable="true"
     data-is-placeholder-visible="true"

diff --git a/blocks/library/paragraph/test/__snapshots__/index.js.snap b/blocks/library/paragraph/test/__snapshots__/index.js.snap
@@ -13,9 +13,11 @@ exports[`core/paragraph block edit matches snapshot 1`] = `
           aria-autocomplete="list"
           aria-expanded="false"
           aria-label="Add text or type / to add content"
+          aria-multiline="false"
           class="wp-block-paragraph blocks-rich-text__tinymce"
           contenteditable="true"
           data-is-placeholder-visible="true"
+          role="textbox"
         />
         <p
           class="blocks-rich-text__tinymce wp-block-paragraph"

diff --git a/blocks/library/preformatted/test/__snapshots__/index.js.snap b/blocks/library/preformatted/test/__snapshots__/index.js.snap
@@ -6,9 +6,11 @@ exports[`core/preformatted block edit matches snapshot 1`] = `
 >
   <pre
     aria-label="Write preformatted text…"
+    aria-multiline="false"
     class="blocks-rich-text__tinymce"
     contenteditable="true"
     data-is-placeholder-visible="true"
+    role="textbox"
   />
   <pre
     class="blocks-rich-text__tinymce"

diff --git a/blocks/library/pullquote/test/__snapshots__/index.js.snap b/blocks/library/pullquote/test/__snapshots__/index.js.snap
@@ -9,9 +9,11 @@ exports[`core/pullquote block edit matches snapshot 1`] = `
   >
     <div
       aria-label="Write quote…"
+      aria-multiline="true"
       class="blocks-rich-text__tinymce"
       contenteditable="true"
       data-is-placeholder-visible="true"
+      role="textbox"
     />
     <div
       class="blocks-rich-text__tinymce"

diff --git a/blocks/library/quote/test/__snapshots__/index.js.snap b/blocks/library/quote/test/__snapshots__/index.js.snap
@@ -9,9 +9,11 @@ exports[`core/quote block edit matches snapshot 1`] = `
   >
     <div
       aria-label="Write quote…"
+      aria-multiline="true"
       class="blocks-rich-text__tinymce"
       contenteditable="true"
       data-is-placeholder-visible="true"
+      role="textbox"
     />
     <div
       class="blocks-rich-text__tinymce"

diff --git a/blocks/library/table/test/__snapshots__/index.js.snap b/blocks/library/table/test/__snapshots__/index.js.snap
@@ -5,6 +5,7 @@ exports[`core/embed block edit matches snapshot 1`] = `
   class="wp-block-table blocks-rich-text"
 >
   <table
+    aria-multiline="false"
     class="blocks-rich-text__tinymce"
     contenteditable="true"
   >

diff --git a/blocks/library/text-columns/test/__snapshots__/index.js.snap b/blocks/library/text-columns/test/__snapshots__/index.js.snap
@@ -12,9 +12,11 @@ exports[`core/text-columns block edit matches snapshot 1`] = `
     >
       <p
         aria-label="New Column"
+        aria-multiline="false"
         class="blocks-rich-text__tinymce"
         contenteditable="true"
         data-is-placeholder-visible="true"
+        role="textbox"
       />
       <p
         class="blocks-rich-text__tinymce"
@@ -31,9 +33,11 @@ exports[`core/text-columns block edit matches snapshot 1`] = `
     >
       <p
         aria-label="New Column"
+        aria-multiline="false"
         class="blocks-rich-text__tinymce"
         contenteditable="true"
         data-is-placeholder-visible="true"
+        role="textbox"
       />
       <p
         class="blocks-rich-text__tinymce"

diff --git a/blocks/library/verse/test/__snapshots__/index.js.snap b/blocks/library/verse/test/__snapshots__/index.js.snap
@@ -6,9 +6,11 @@ exports[`core/verse block edit matches snapshot 1`] = `
 >
   <pre
     aria-label="Write…"
+    aria-multiline="false"
     class="blocks-rich-text__tinymce"
     contenteditable="true"
     data-is-placeholder-visible="true"
+    role="textbox"
   />
   <pre
     class="blocks-rich-text__tinymce"

diff --git a/blocks/rich-text/index.js b/blocks/rich-text/index.js
@@ -786,7 +786,7 @@ export class RichText extends Component {
 			formatters,
 		} = this.props;
 
-		const ariaProps = pickAriaProps( this.props );
+		const ariaProps = { ...pickAriaProps( this.props ), 'aria-multiline': !! MultilineTag };
 
 		// Generating a key that includes `tagName` ensures that if the tag
 		// changes, we unmount and destroy the previous TinyMCE element, then

diff --git a/blocks/rich-text/tinymce.js b/blocks/rich-text/tinymce.js
@@ -98,6 +98,9 @@ export default class TinyMCE extends Component {
 	render() {
 		const { tagName = 'div', style, defaultValue, className, isPlaceholderVisible } = this.props;
 		const ariaProps = pickAriaProps( this.props );
+		if ( [ 'ul', 'ol', 'table' ].indexOf( tagName ) === -1 ) {
+			ariaProps.role = 'textbox';
+		}
 
 		// If a default value is provided, render it into the DOM even before
 		// TinyMCE finishes initializing. This avoids a short delay by allowing