Update the alt text description (#14668)

* Update the alt text description. * Make the links non-translatable. * Update help prop documentation.
WordPress · Mar 28, 2019 · 1e40b28 · 1e40b28
1 parent bde17b6
commit 1e40b28
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 27 deletions.
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -28,6 +28,7 @@ import {
 	ToggleControl,
 	Toolbar,
 	withNotices,
+	ExternalLink,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
@@ -456,7 +457,14 @@ class ImageEdit extends Component {
 						label={ __( 'Alt Text (Alternative Text)' ) }
 						value={ alt }
 						onChange={ this.updateAlt }
-						help={ __( 'Alternative text describes your image to people who can’t see it. Add a short description with its key details.' ) }
+						help={
+							<Fragment>
+								<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+									{ __( 'Describe the purpose of the image' ) }
+								</ExternalLink>
+								{ __( 'Leave empty if the image is purely decorative.' ) }
+							</Fragment>
+						}
 					/>
 					{ ! isEmpty( imageSizeOptions ) && (
 						<SelectControl

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
@@ -21,6 +21,7 @@ import {
 	TextareaControl,
 	ToggleControl,
 	Toolbar,
+	ExternalLink,
 } from '@wordpress/components';
 /**
  * Internal dependencies
@@ -170,7 +171,14 @@ class MediaTextEdit extends Component {
 					label={ __( 'Alt Text (Alternative Text)' ) }
 					value={ mediaAlt }
 					onChange={ onMediaAltChange }
-					help={ __( 'Alternative text describes your image to people who can’t see it. Add a short description with its key details.' ) }
+					help={
+						<Fragment>
+							<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+								{ __( 'Describe the purpose of the image' ) }
+							</ExternalLink>
+							{ __( 'Leave empty if the image is purely decorative.' ) }
+						</Fragment>
+					}
 				/> ) }
 			</PanelBody>
 		);

diff --git a/packages/components/src/base-control/README.md b/packages/components/src/base-control/README.md
@@ -45,7 +45,7 @@ If this property is added, a label will be generated using label property as the
 
 If this property is added, a help text will be generated using help property as the content.
 
-- Type: `String`
+- Type: `String|WPElement`
 - Required: No
 
 ### className

diff --git a/packages/components/src/checkbox-control/README.md b/packages/components/src/checkbox-control/README.md
@@ -60,7 +60,7 @@ import { withState } from '@wordpress/compose';
 
 const MyCheckboxControl = withState( {
 	isChecked: true,
-} )( ( { isChecked, setState } ) => ( 
+} )( ( { isChecked, setState } ) => (
 	<CheckboxControl
 		heading="User"
 		label="Is author"
@@ -78,7 +78,7 @@ Props not included in this set will be applied to the input element.
 
 #### heading
 
-A heading for the input field, that appears above the checkbox. If the prop is not passed no heading will be rendered. 
+A heading for the input field, that appears above the checkbox. If the prop is not passed no heading will be rendered.
 
 - Type: `String`
 - Required: No
@@ -96,7 +96,7 @@ If no prop is passed an empty label is rendered.
 
 If this property is added, a help text will be generated using help property as the content.
 
-- Type: `String`
+- Type: `String|WPElement`
 - Required: No
 
 #### checked

diff --git a/packages/components/src/radio-control/README.md b/packages/components/src/radio-control/README.md
@@ -62,7 +62,7 @@ import { withState } from '@wordpress/compose';
 
 const MyRadioControl = withState( {
 	option: 'a',
-} )( ( { option, setState } ) => ( 
+} )( ( { option, setState } ) => (
 	<RadioControl
 		label="User type"
 		help="The type of the current user"
@@ -91,7 +91,7 @@ If this property is added, a label will be generated using label property as the
 
 If this property is added, a help text will be generated using help property as the content.
 
-- Type: `String`
+- Type: `String|WPElement`
 - Required: No
 
 #### selected

diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md
@@ -96,7 +96,7 @@ import { withState } from '@wordpress/compose';
 
 const MyRangeControl = withState( {
         columns: 2,
-} )( ( { columns, setState } ) => ( 
+} )( ( { columns, setState } ) => (
     <RangeControl
         label="Columns"
         value={ columns }
@@ -123,7 +123,7 @@ If this property is added, a label will be generated using label property as the
 
 If this property is added, a help text will be generated using help property as the content.
 
-- Type: `String`
+- Type: `String|WPElement`
 - Required: No
 
 #### beforeIcon

diff --git a/packages/components/src/select-control/README.md b/packages/components/src/select-control/README.md
@@ -16,7 +16,7 @@ SelectControl allow users to select from a single-option menu. It functions as a
 
 #### When to use a select control
 
-Use a select control when: 
+Use a select control when:
 
 - You want users to select a single option from a list.
 - There is a strong default option.
@@ -83,10 +83,10 @@ Render a user interface to select the size of an image.
 
     import { SelectControl } from '@wordpress/components';
     import { withState } from '@wordpress/compose';
-    
+
     const MySelectControl = withState( {
         size: '50%',
-    } )( ( { size, setState } ) => ( 
+    } )( ( { size, setState } ) => (
         <SelectControl
             label="Size"
             value={ size }
@@ -130,7 +130,7 @@ If this property is added, a label will be generated using label property as the
 #### help
 
 If this property is added, a help text will be generated using help property as the content.
-- Type: `String`
+- Type: `String|WPElement`
 - Required: No
 
 #### multiple

diff --git a/packages/components/src/text-control/README.md b/packages/components/src/text-control/README.md
@@ -13,7 +13,7 @@ import { withState } from '@wordpress/compose';
 
 const MyTextControl = withState( {
 	className: '',
-} )( ( { className, setState } ) => ( 
+} )( ( { className, setState } ) => (
 	<TextControl
 		label="Additional CSS Class"
 		value={ className }
@@ -38,7 +38,7 @@ If this property is added, a label will be generated using label property as the
 
 If this property is added, a help text will be generated using help property as the content.
 
-- Type: `String`
+- Type: `String|WPElement`
 - Required: No
 
 ### type

diff --git a/packages/components/src/textarea-control/README.md b/packages/components/src/textarea-control/README.md
@@ -33,7 +33,7 @@ Do not use TextareaControl if you need to let users enter shorter answers (no lo
 
 **Do**
 
-Use TextareaControl to let users to enter text longer than a single line. 
+Use TextareaControl to let users to enter text longer than a single line.
 
 ![](https://wordpress.org/gutenberg/files/2019/01/TextareaControl-Answers-Dont.png)
 
@@ -55,11 +55,11 @@ Containers improve the discoverability of text fields by creating contrast betwe
 ![](https://wordpress.org/gutenberg/files/2019/01/TextareaControl-Stroke-Do.png)
 
 **Do**
-Use a stroke around the container, which clearly indicates that users can input information. 
+Use a stroke around the container, which clearly indicates that users can input information.
 
 ![](https://wordpress.org/gutenberg/files/2019/01/TextareaControl-Stroke-Dont.png)
 
-**Don’t** 
+**Don’t**
 Use unclear visual markers to indicate a text field.
 
 ### Label text
@@ -78,10 +78,10 @@ When text input isn’t accepted, an error message can display instructions on h
 
     import { TextareaControl } from '@wordpress/components';
     import { withState } from '@wordpress/compose';
-    
+
     const MyTextareaControl = withState( {
         text: '',
-    } )( ( { text, setState } ) => ( 
+    } )( ( { text, setState } ) => (
         <TextareaControl
             label="Text"
             help="Enter some text"
@@ -93,7 +93,7 @@ When text input isn’t accepted, an error message can display instructions on h
 
 ### Props
 
-The set of props accepted by the component will be specified below. 
+The set of props accepted by the component will be specified below.
 
 Props not included in this set will be applied to the textarea element.
 
@@ -108,7 +108,7 @@ If this property is added, a label will be generated using label property as the
 
 If this property is added, a help text will be generated using help property as the content.
 
-- Type: `String`
+- Type: `String|WPElement`
 - Required: No
 
 #### rows

diff --git a/packages/components/src/toggle-control/README.md b/packages/components/src/toggle-control/README.md
@@ -12,10 +12,10 @@ import { withState } from '@wordpress/compose';
 
 const MyToggleControl = withState( {
 	hasFixedBackground: false,
-} )( ( { hasFixedBackground, setState } ) => ( 
+} )( ( { hasFixedBackground, setState } ) => (
 	<ToggleControl
 		label="Fixed Background"
-		help={ hasFixedBackground ? 'Has fixed background.' : 'No fixed background.' } 
+		help={ hasFixedBackground ? 'Has fixed background.' : 'No fixed background.' }
 		checked={ hasFixedBackground }
 		onChange={ () => setState( ( state ) => ( { hasFixedBackground: ! state.hasFixedBackground } ) ) }
 	/>
@@ -37,7 +37,7 @@ If this property is added, a label will be generated using label property as the
 
 If this property is added, a help text will be generated using help property as the content.
 
-- Type: `String` | `Function`
+- Type: `String|WPElement`
 - Required: No
 
 ### checked
@@ -61,4 +61,3 @@ The class that will be added with `components-base-control` and `components-togg
 
 Type: String
 Required: No
-