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

Jump to bottom

a11y: Add aria-label attributes and custom override control to core/social-link block #18651

Merged
merged 11 commits into from
Dec 27, 2019
Merged

a11y: Add aria-label attributes and custom override control to core/social-link block #18651

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
bb35aaf
add aria-label to social link block
0aveRyan Nov 21, 2019
aadde37
phpcs codesmells
0aveRyan Nov 21, 2019
fcee78e
phpcs docblock and one bad array key
0aveRyan Nov 21, 2019
c9ffe6b
social link brand spellings
0aveRyan Dec 3, 2019
05541ca
sidebar helper text
0aveRyan Dec 3, 2019
f3bda49
addressing feedback
0aveRyan Dec 26, 2019
d10d5ef
Merge branch 'master' into a11y/social-link-anchor-labels
0aveRyan Dec 26, 2019
982b894
linting
0aveRyan Dec 26, 2019
6d319a2
final linting
0aveRyan Dec 26, 2019
c20f894
label text removed in swap
0aveRyan Dec 26, 2019
cf861db
doh, final translation string fix
0aveRyan Dec 26, 2019
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
84 changes: 53 additions & 31 deletions packages/block-library/src/social-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,23 @@ import classNames from 'classnames';
/**
Copy link
Contributor

Choose a reason for hiding this comment

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

I see a few strings here where we use Title Case. I think we've been recently moving to always using "Sentence case" in all of our strings. @karmatosed do you confirm?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Screen Shot 2019-12-26 at 10 03 00 AM

@youknowriad that doesn't appear to be the standard used for Panel Titles and that doesn't seem to be the standard outlined in the docs. Was there a discussion about that I missed? If that's changed, the docs need to be updated and issues opened to address the many instances of title case throughout the application.

Copy link
Contributor Author

@0aveRyan 0aveRyan Dec 27, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

I've since dug and found the PRs and issue discussion around sentence case. A major departure like that should be discussed and memorialized in docs with clearer examples well before it's put into practice, to set clear expectations, avoid confusing situations like this and throwing up hurdles to contribution. Let me know if you'd like these strings updated to sentence case.

Copy link
Contributor

Choose a reason for hiding this comment

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

I don't know to be honest, I'll let @karmatosed chime in when she comes back. I think we can land this as is for now.

* WordPress dependencies
*/
import { URLPopover, URLInput } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { InspectorControls, URLPopover, URLInput } from '@wordpress/block-editor';
import { Fragment, useState } from '@wordpress/element';
import {
Button,
PanelBody,
PanelRow,
TextControl,
} from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { getIconBySite } from './social-list';
import { getIconBySite, getNameBySite } from './social-list';

const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
const { url, site } = attributes;
const { url, site, label } = attributes;
const [ showURLPopover, setPopover ] = useState( false );
const classes = classNames(
'wp-social-link',
Expand All @@ -27,34 +32,51 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {

// Import icon.
const IconComponent = getIconBySite( site );
const socialLinkName = getNameBySite( site );

return (
<Button
className={ classes }
onClick={ () => setPopover( true ) }
>
<IconComponent />
{ isSelected && showURLPopover && (
<URLPopover
onClose={ () => setPopover( false ) }
>
<form
className="block-editor-url-popover__link-editor"
onSubmit={ ( event ) => {
event.preventDefault();
setPopover( false );
} } >
<URLInput
value={ url }
onChange={ ( nextURL ) => setAttributes( { url: nextURL } ) }
placeholder={ __( 'Enter Address' ) }
disableSuggestions={ true }
<Fragment>
<InspectorControls>
<PanelBody title={ sprintf( __( '%s Label' ), socialLinkName ) } initialOpen={ false }>
<PanelRow>
<TextControl
label={ __( 'Link Label' ) }
help={ __( 'Briefly describe the link to help screen reader users.' ) }
value={ label }
onChange={ ( value ) => setAttributes( { label: value } ) }
/>
<Button icon="editor-break" label={ __( 'Apply' ) } type="submit" />
</form>
</URLPopover>
) }
</Button>
</PanelRow>
</PanelBody>
</InspectorControls>
<Button
className={ classes }
onClick={ () => setPopover( true ) }
>
<IconComponent />
{ isSelected && showURLPopover && (
<URLPopover
onClose={ () => setPopover( false ) }
>
<form
className="block-editor-url-popover__link-editor"
onSubmit={ ( event ) => {
event.preventDefault();
setPopover( false );
} } >
<div className="editor-url-input block-editor-url-input">
0aveRyan marked this conversation as resolved.
Show resolved Hide resolved
<URLInput
value={ url }
onChange={ ( nextURL ) => setAttributes( { url: nextURL } ) }
placeholder={ __( 'Enter Address' ) }
disableSuggestions={ true }
/>
</div>
<Button icon="editor-break" label={ __( 'Apply' ) } type="submit" />
</form>
</URLPopover>
) }
</Button>
</Fragment>
);
};

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/social-link/icons/deviantart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
SVG,
} from '@wordpress/components';

export const DeviantartIcon = ( ) => (
export const DeviantArtIcon = ( ) => (
<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
<Path d="M 18.19 5.636 18.19 2 18.188 2 14.553 2 14.19 2.366 12.474 5.636 11.935 6 5.81 6 5.81 10.994 9.177 10.994 9.477 11.357 5.81 18.363 5.81 22 5.811 22 9.447 22 9.81 21.634 11.526 18.364 12.065 18 18.19 18 18.19 13.006 14.823 13.006 14.523 12.641 18.19 5.636z" />
</SVG>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/social-link/icons/github.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
SVG,
} from '@wordpress/components';

export const GithubIcon = ( ) => (
export const GitHubIcon = ( ) => (
<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
<Path d="M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833 c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z" />
</SVG>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/social-link/icons/linkedin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
SVG,
} from '@wordpress/components';

export const LinkedinIcon = ( ) => (
export const LinkedInIcon = ( ) => (
<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
<Path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z" />
</SVG>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/social-link/icons/soundcloud.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/block-library/src/social-link/icons/youtube.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
SVG,
} from '@wordpress/components';

export const YoutubeIcon = ( ) => (
export const YouTubeIcon = ( ) => (
<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
<Path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z" />
</SVG>
Expand Down
3 changes: 3 additions & 0 deletions packages/block-library/src/social-link/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ export const sites = Object.keys( socialList ).map(
type: 'string',
default: site,
},
label: {
type: 'string',
},
},
},
};
Expand Down
Loading