Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the alt text description #14668

Merged
merged 3 commits into from
Mar 28, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion packages/block-library/src/image/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import {
ToggleControl,
Toolbar,
withNotices,
ExternalLink,
} from '@wordpress/components';
import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
Expand Down Expand Up @@ -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
Expand Down
10 changes: 9 additions & 1 deletion packages/block-library/src/media-text/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
TextareaControl,
ToggleControl,
Toolbar,
ExternalLink,
} from '@wordpress/components';
/**
* Internal dependencies
Expand Down Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/base-control/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/checkbox-control/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ import { withState } from '@wordpress/compose';

const MyCheckboxControl = withState( {
isChecked: true,
} )( ( { isChecked, setState } ) => (
} )( ( { isChecked, setState } ) => (
<CheckboxControl
heading="User"
label="Is author"
Expand All @@ -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
Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/radio-control/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/range-control/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ import { withState } from '@wordpress/compose';

const MyRangeControl = withState( {
columns: 2,
} )( ( { columns, setState } ) => (
} )( ( { columns, setState } ) => (
<RangeControl
label="Columns"
value={ columns }
Expand All @@ -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
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/select-control/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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 }
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/text-control/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { withState } from '@wordpress/compose';

const MyTextControl = withState( {
className: '',
} )( ( { className, setState } ) => (
} )( ( { className, setState } ) => (
<TextControl
label="Additional CSS Class"
value={ className }
Expand All @@ -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
Expand Down
14 changes: 7 additions & 7 deletions packages/components/src/textarea-control/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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
Expand All @@ -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"
Expand All @@ -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.

Expand All @@ -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
Expand Down
7 changes: 3 additions & 4 deletions packages/components/src/toggle-control/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 } ) ) }
/>
Expand All @@ -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
Expand All @@ -61,4 +61,3 @@ The class that will be added with `components-base-control` and `components-togg

Type: String
Required: No