Skip to content

Commit

Permalink
a11y: Add aria-label attributes and custom override control to core/s…
Browse files Browse the repository at this point in the history 
…ocial-link block (#18651)
  • Loading branch information
@0aveRyan @youknowriad
0aveRyan authored and youknowriad committed Dec 27, 2019
1 parent 86b2fa8 commit 2cdeb19
Show file tree
Hide file tree
Showing 9 changed files with 300 additions and 170 deletions.
84 changes: 53 additions & 31 deletions packages/block-library/src/social-link/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,23 @@ import classNames from 'classnames';
/**
* 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">
<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
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
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
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

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
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
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

0 comments on commit 2cdeb19

Please sign in to comment.