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.

Sign up for GitHub

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

Give editable fields in blocks better aria-labels. #26582

Merged
merged 2 commits into from
Dec 3, 2020
+42 −5
Merged

Give editable fields in blocks better aria-labels. #26582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
88756b8
Give editable fields in blocks better aria-labels.
ZebulanStanphill Oct 29, 2020
fc7545b
Apply suggestions from code review
ZebulanStanphill Dec 2, 2020
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
1 change: 1 addition & 0 deletions packages/block-library/src/audio/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,7 @@ function AudioEdit( {
{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
<RichText
tagName="figcaption"
aria-label={ __( 'Audio caption text' ) }
placeholder={ __( 'Write caption…' ) }
value={ caption }
onChange={ ( value ) =>
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/button/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,7 @@ function ButtonEdit( props ) {
} ) }
>
<RichText
aria-label={ __( 'Button text' ) }
placeholder={ placeholder || __( 'Add text…' ) }
value={ text }
onChange={ ( value ) => setAttributes( { text: value } ) }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/file/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,7 @@ function FileEdit( { attributes, setAttributes, noticeUI, noticeOperations } ) {
{ /* Using RichText here instead of PlainText so that it can be styled like a button */ }
<RichText
tagName="div" // must be block-level or else cursor disappears
aria-label={ __( 'Download button text' ) }
className={ 'wp-block-file__button' }
value={ downloadButtonText }
withoutInteractiveFormatting
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/gallery/gallery-image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,7 @@ class GalleryImage extends Component {
{ ! isEditing && ( isSelected || caption ) && (
<RichText
tagName="figcaption"
aria-label={ __( 'Image caption text' ) }
placeholder={
isSelected ? __( 'Write caption…' ) : null
}
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/gallery/gallery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ export const Gallery = ( props ) => {
isHidden={ ! isSelected && RichText.isEmpty( caption ) }
tagName="figcaption"
className="blocks-gallery-caption"
aria-label={ __( 'Gallery caption text' ) }
placeholder={ __( 'Write gallery caption…' ) }
value={ caption }
unstableOnFocus={ onFocusGalleryCaption }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/heading/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ function HeadingEdit( {
} }
onReplace={ onReplace }
onRemove={ () => onReplace( [] ) }
aria-label={ __( 'Heading text' ) }
placeholder={ placeholder || __( 'Write heading…' ) }
textAlign={ textAlign }
{ ...blockProps }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/image/image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -515,6 +515,7 @@ export default function Image( {
<RichText
ref={ captionRef }
tagName="figcaption"
aria-label={ __( 'Image caption text' ) }
placeholder={ __( 'Write caption…' ) }
value={ caption }
unstableOnFocus={ onFocusCaption }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/list/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,7 @@ export default function ListEdit( {
setAttributes( { values: nextValues } )
}
value={ values }
aria-label={ __( 'List text' ) }
placeholder={ __( 'Write list…' ) }
onMerge={ mergeBlocks }
onSplit={ ( value ) =>
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/navigation-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,7 @@ function NavigationLinkEdit( {
createBlock( 'core/navigation-link' )
)
}
aria-label={ __( 'Navigation link text' ) }
placeholder={ itemLabelPlaceholder }
keepPlaceholderOnFocus
withoutInteractiveFormatting
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/post-author/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,8 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
<RichText
className="wp-block-post-author__byline"
multiline={ false }
placeholder={ __( 'Write byline …' ) }
aria-label={ __( 'Post author byline text' ) }
placeholder={ __( 'Write byline…' ) }
value={ byline }
onChange={ ( value ) =>
setAttributes( { byline: value } )
Expand Down
3 changes: 3 additions & 0 deletions packages/block-library/src/post-excerpt/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ function PostExcerptEditor( {
! showMoreOnNewLine &&
'wp-block-post-excerpt__excerpt is-inline'
}
aria-label={ __( 'Post excerpt text' ) }
value={
excerpt ||
postContentExcerpt ||
Expand All @@ -115,6 +116,7 @@ function PostExcerptEditor( {
<p className="wp-block-post-excerpt__more-text">
<RichText
tagName="a"
aria-label={ __( 'Read more link text' ) }
placeholder={ __( 'Read more…' ) }
value={ moreText }
onChange={ ( newMoreText ) =>
Expand All @@ -125,6 +127,7 @@ function PostExcerptEditor( {
) : (
<RichText
tagName="a"
aria-label={ __( 'Read more link text' ) }
placeholder={ __( 'Read more…' ) }
value={ moreText }
onChange={ ( newMoreText ) =>
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/preformatted/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default function PreformattedEdit( {
} );
} }
onRemove={ onRemove }
aria-label={ __( 'Preformatted text' ) }
placeholder={ __( 'Write preformatted text…' ) }
onMerge={ mergeBlocks }
{ ...blockProps }
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/pullquote/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ function PullQuoteEdit( {
value: nextValue,
} )
}
aria-label={ __( 'Pullquote text' ) }
placeholder={
// translators: placeholder text used for the quote
__( 'Write quote…' )
Expand All @@ -134,6 +135,7 @@ function PullQuoteEdit( {
<RichText
identifier="citation"
value={ citation }
aria-label={ __( 'Pullquote citation text' ) }
placeholder={
// translators: placeholder text used for the citation
__( 'Write citation…' )
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/quote/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export default function QuoteEdit( {
onReplace( [] );
}
} }
aria-label={ __( 'Quote text' ) }
placeholder={
// translators: placeholder text used for the quote
__( 'Write quote…' )
Expand All @@ -88,6 +89,7 @@ export default function QuoteEdit( {
} )
}
__unstableMobileNoFocusOnMount
aria-label={ __( 'Quote citation text' ) }
placeholder={
// translators: placeholder text used for the citation
__( 'Write citation…' )
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/shortcode/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export default function ShortcodeEdit( { attributes, setAttributes } ) {
className="blocks-shortcode__textarea"
id={ inputId }
value={ attributes.text }
aria-label={ __( 'Shortcode text' ) }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"text" might be not the best fit for shortcodes. How about 'Shortcode content'?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Content" sounds like it might refer to stuff between shortcode tags, but not including them, so I'm not sure if it's the right term. What do you think, @afercia?

placeholder={ __( 'Write shortcode here…' ) }
onChange={ ( text ) => setAttributes( { text } ) }
/>
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/site-tagline/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ export default function SiteTaglineEdit( { attributes, setAttributes } ) {
<RichText
allowedFormats={ [] }
onChange={ setSiteTagline }
placeholder={ __( 'Site Tagline' ) }
aria-label={ __( 'Site tagline text' ) }
placeholder={ __( 'Write site tagline…' ) }
tagName="p"
value={ siteTagline }
{ ...blockProps }
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/site-title/edit/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ export default function SiteTitleEdit( { attributes, setAttributes } ) {

<RichText
tagName={ tagName }
placeholder={ __( 'Site Title' ) }
aria-label={ __( 'Site title text' ) }
placeholder={ __( 'Write site title…' ) }
value={ title }
onChange={ setTitle }
allowedFormats={ [] }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/subhead/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export default function SubheadEdit( {
} }
style={ { textAlign: align } }
className={ className }
aria-label={ __( 'Subheading text' ) }
placeholder={ placeholder || __( 'Write subheading…' ) }
/>
</div>
Expand Down
8 changes: 8 additions & 0 deletions packages/block-library/src/table/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,12 @@ const ALIGNMENT_CONTROLS = [

const withCustomBackgroundColors = createCustomColorsHOC( BACKGROUND_COLORS );

const cellAriaLabel = {
head: __( 'Header cell text' ),
body: __( 'Body cell text' ),
foot: __( 'Footer cell text' ),
};

const placeholder = {
head: __( 'Header label' ),
foot: __( 'Footer label' ),
Expand Down Expand Up @@ -432,6 +438,7 @@ function TableEdit( {
type: 'cell',
} );
} }
aria-label={ cellAriaLabel[ name ] }
placeholder={ placeholder[ name ] }
/>
)
Expand Down Expand Up @@ -520,6 +527,7 @@ function TableEdit( {
{ ! isEmpty && (
<RichText
tagName="figcaption"
aria-label={ __( 'Table caption text' ) }
placeholder={ __( 'Write caption…' ) }
value={ caption }
onChange={ ( value ) =>
Expand Down
7 changes: 6 additions & 1 deletion packages/block-library/src/text-columns/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { get, times } from 'lodash';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import { PanelBody, RangeControl } from '@wordpress/components';
import {
BlockControls,
Expand Down Expand Up @@ -73,6 +73,11 @@ export default function TextColumnsEdit( { attributes, setAttributes } ) {
],
} );
} }
aria-label={ sprintf(
// translators: %d: column index (starting with 1)
__( 'Column %d text' ),
index + 1
) }
placeholder={ __( 'New Column' ) }
/>
</div>
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/verse/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ export default function VerseEdit( {
content: nextContent,
} );
} }
placeholder={ __( 'Write…' ) }
aria-label={ __( 'Verse text' ) }
placeholder={ __( 'Write verse…' ) }
onMerge={ mergeBlocks }
textAlign={ textAlign }
{ ...blockProps }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/video/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,7 @@ function VideoEdit( {
{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
<RichText
tagName="figcaption"
aria-label={ __( 'Video caption text' ) }
placeholder={ __( 'Write caption…' ) }
value={ caption }
onChange={ ( value ) =>
Expand Down