From 5df7c5b038d5dc716cbfb9ea9f69ade80cdc2852 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 3 Sep 2018 09:50:01 +0100 Subject: [PATCH 1/6] Components: Adds AccessibleSVG component and use consistently for block icons. --- docs/block-api.md | 2 +- .../test/__snapshots__/index.js.snap | 37 ++++++++++++------- .../test/__snapshots__/index.js.snap | 37 ++++++++++++------- packages/block-library/src/archives/index.js | 2 +- packages/block-library/src/audio/index.js | 2 +- packages/block-library/src/button/index.js | 2 +- .../block-library/src/categories/index.js | 2 +- packages/block-library/src/code/index.js | 2 +- packages/block-library/src/columns/index.js | 2 +- .../block-library/src/cover-image/index.js | 2 +- packages/block-library/src/embed/index.js | 28 +++++++------- packages/block-library/src/file/index.js | 2 +- packages/block-library/src/gallery/index.js | 2 +- packages/block-library/src/heading/index.js | 2 +- packages/block-library/src/image/index.js | 2 +- .../src/latest-comments/index.js | 2 +- .../block-library/src/latest-posts/index.js | 2 +- packages/block-library/src/list/index.js | 2 +- packages/block-library/src/more/index.js | 2 +- packages/block-library/src/nextpage/index.js | 2 +- packages/block-library/src/paragraph/index.js | 2 +- .../block-library/src/preformatted/index.js | 2 +- packages/block-library/src/pullquote/index.js | 2 +- packages/block-library/src/quote/index.js | 2 +- packages/block-library/src/separator/index.js | 2 +- packages/block-library/src/shortcode/index.js | 2 +- packages/block-library/src/spacer/index.js | 2 +- packages/block-library/src/subhead/index.js | 2 +- packages/block-library/src/table/index.js | 2 +- packages/block-library/src/verse/index.js | 2 +- packages/block-library/src/video/index.js | 2 +- packages/components/CHANGELOG.md | 6 ++- .../components/src/accessible-svg/README.md | 24 ++++++++++++ .../components/src/accessible-svg/index.js | 12 ++++++ packages/components/src/form-toggle/index.js | 8 +++- packages/components/src/index.js | 1 + packages/components/src/panel/body.js | 9 +++-- packages/components/src/panel/test/body.js | 2 +- .../editor/src/components/block-icon/index.js | 4 +- .../src/components/block-mover/arrows.js | 13 +++++-- .../src/components/block-switcher/index.js | 4 +- 41 files changed, 159 insertions(+), 82 deletions(-) create mode 100644 packages/components/src/accessible-svg/README.md create mode 100644 packages/components/src/accessible-svg/index.js diff --git a/docs/block-api.md b/docs/block-api.md index 5d79335ab1e679..2543efc0138845 100644 --- a/docs/block-api.md +++ b/docs/block-api.md @@ -54,7 +54,7 @@ description: 'Block showing a Book card.' * **Type:** `String` [ common | formatting | layout | widgets | embed ] -Blocks are grouped into categories to help users browse and discover them. +Blocks are grouped into categories to help users browse and discover them. The core provided categories are: * common diff --git a/edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap index f35ccd569e3fb3..e703b24d4f4e24 100644 --- a/edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap +++ b/edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap @@ -27,25 +27,36 @@ exports[`PluginPostPublishPanel renders fill properly 1`] = ` onClick={[Function]} type="button" > - - - - - - - - + + My panel title diff --git a/edit-post/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/edit-post/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap index cb24a9396aff69..8aafb4673f2b7f 100644 --- a/edit-post/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap +++ b/edit-post/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap @@ -27,25 +27,36 @@ exports[`PluginPrePublishPanel renders fill properly 1`] = ` onClick={[Function]} type="button" > - - - - - - - - + + My panel title diff --git a/packages/block-library/src/archives/index.js b/packages/block-library/src/archives/index.js index 2774569ab6531b..c2917ebfa873eb 100644 --- a/packages/block-library/src/archives/index.js +++ b/packages/block-library/src/archives/index.js @@ -15,7 +15,7 @@ export const settings = { description: __( 'Display a monthly archive of your site’s Posts.' ), - icon: , + icon: , category: 'widgets', diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js index d7e2e2e1b8a85c..6ae69447623914 100644 --- a/packages/block-library/src/audio/index.js +++ b/packages/block-library/src/audio/index.js @@ -18,7 +18,7 @@ export const settings = { description: __( 'Embed an audio file and a simple audio player.' ), - icon: , + icon: , category: 'common', diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js index ad81c66336ea20..4735d0a47ede2a 100644 --- a/packages/block-library/src/button/index.js +++ b/packages/block-library/src/button/index.js @@ -65,7 +65,7 @@ export const settings = { description: __( 'Want visitors to click to subscribe, buy, or read more? Get their attention with a button.' ), - icon: , + icon: , category: 'layout', diff --git a/packages/block-library/src/categories/index.js b/packages/block-library/src/categories/index.js index 399e5d95d7b2cc..56b7dbf8c2661e 100644 --- a/packages/block-library/src/categories/index.js +++ b/packages/block-library/src/categories/index.js @@ -15,7 +15,7 @@ export const settings = { description: __( 'Display a list of all your site’s categories.' ), - icon: , + icon: , category: 'widgets', diff --git a/packages/block-library/src/code/index.js b/packages/block-library/src/code/index.js index 0326b7ad2ae510..7cb4883472a7c1 100644 --- a/packages/block-library/src/code/index.js +++ b/packages/block-library/src/code/index.js @@ -16,7 +16,7 @@ export const settings = { description: __( 'Add text that respects your spacing and tabs -- perfect for displaying code.' ), - icon: , + icon: , category: 'formatting', diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index ee32d8eb5fd257..5474cfae1e07ac 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -49,7 +49,7 @@ export const settings = { __( 'beta' ) ), - icon: , + icon: , category: 'layout', diff --git a/packages/block-library/src/cover-image/index.js b/packages/block-library/src/cover-image/index.js index 9198a0630e6756..69a1df491acacf 100644 --- a/packages/block-library/src/cover-image/index.js +++ b/packages/block-library/src/cover-image/index.js @@ -59,7 +59,7 @@ export const settings = { description: __( 'Add a full-width image, and layer text over it — great for headers.' ), - icon: , + icon: , category: 'common', diff --git a/packages/block-library/src/embed/index.js b/packages/block-library/src/embed/index.js index 470b0baeaa79b5..ea5ca325c3438f 100644 --- a/packages/block-library/src/embed/index.js +++ b/packages/block-library/src/embed/index.js @@ -329,10 +329,10 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed', } export const name = 'core/embed'; -const embedContentIcon = ; -const embedAudioIcon = ; -const embedPhotoIcon = ; -const embedVideoIcon = ; +const embedContentIcon = ; +const embedAudioIcon = ; +const embedPhotoIcon = ; +const embedVideoIcon = ; export const settings = getEmbedBlockSettings( { title: __( 'Embed' ), @@ -360,7 +360,7 @@ export const common = [ title: 'Twitter', icon: { foreground: '#1da1f2', - src: , + src: , }, keywords: [ 'tweet' ], } ), @@ -372,7 +372,7 @@ export const common = [ title: 'YouTube', icon: { foreground: '#ff0000', - src: , + src: , }, keywords: [ __( 'music' ), __( 'video' ) ], } ), @@ -384,7 +384,7 @@ export const common = [ title: 'Facebook', icon: { foreground: '#3b5998', - src: , + src: , }, } ), patterns: [ /^https?:\/\/www\.facebook.com\/.+/i ], @@ -393,7 +393,7 @@ export const common = [ name: 'core-embed/instagram', settings: getEmbedBlockSettings( { title: 'Instagram', - icon: , + icon: , keywords: [ __( 'image' ) ], } ), patterns: [ /^https?:\/\/(www\.)?instagr(\.am|am\.com)\/.+/i ], @@ -404,7 +404,7 @@ export const common = [ title: 'WordPress', icon: { foreground: '#0073AA', - src: , + src: , }, keywords: [ __( 'post' ), __( 'blog' ) ], } ), @@ -424,7 +424,7 @@ export const common = [ title: 'Spotify', icon: { foreground: '#1db954', - src: , + src: , }, keywords: [ __( 'music' ), __( 'audio' ) ], } ), @@ -434,7 +434,7 @@ export const common = [ name: 'core-embed/flickr', settings: getEmbedBlockSettings( { title: 'Flickr', - icon: , + icon: , keywords: [ __( 'image' ) ], } ), patterns: [ /^https?:\/\/(www\.)?flickr\.com\/.+/i, /^https?:\/\/flic\.kr\/.+/i ], @@ -445,7 +445,7 @@ export const common = [ title: 'Vimeo', icon: { foreground: '#1ab7ea', - src: , + src: , }, keywords: [ __( 'video' ) ], } ), @@ -563,7 +563,7 @@ export const others = [ name: 'core-embed/reddit', settings: getEmbedBlockSettings( { title: 'Reddit', - icon: , + icon: , } ), patterns: [ /^https?:\/\/(www\.)?reddit\.com\/.+/i ], }, @@ -629,7 +629,7 @@ export const others = [ title: 'Tumblr', icon: { foreground: '#35465c', - src: , + src: , }, } ), patterns: [ /^https?:\/\/(www\.)?tumblr\.com\/.+/i ], diff --git a/packages/block-library/src/file/index.js b/packages/block-library/src/file/index.js index 2e7b57bab0cd12..6dee26f23b2c07 100644 --- a/packages/block-library/src/file/index.js +++ b/packages/block-library/src/file/index.js @@ -23,7 +23,7 @@ export const settings = { description: __( 'Add a link to a file that visitors can download.' ), - icon: , + icon: , category: 'common', diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js index 7a0e0889141aff..835e85e2b32f42 100644 --- a/packages/block-library/src/gallery/index.js +++ b/packages/block-library/src/gallery/index.js @@ -69,7 +69,7 @@ export const name = 'core/gallery'; export const settings = { title: __( 'Gallery' ), description: __( 'Display multiple images in an elegantly organized tiled layout.' ), - icon: , + icon: , category: 'common', keywords: [ __( 'images' ), __( 'photos' ) ], attributes: blockAttributes, diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js index 59c1dabb1ed56d..6365d9983e99b3 100644 --- a/packages/block-library/src/heading/index.js +++ b/packages/block-library/src/heading/index.js @@ -62,7 +62,7 @@ export const settings = { description: __( 'Introduce topics and help visitors (and search engines!) understand how your content is organized.' ), - icon: , + icon: , category: 'common', diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index 1be0a9c5815186..3b7f246605a19a 100644 --- a/packages/block-library/src/image/index.js +++ b/packages/block-library/src/image/index.js @@ -95,7 +95,7 @@ export const settings = { description: __( 'They’re worth 1,000 words! Insert a single image.' ), - icon: , + icon: , category: 'common', diff --git a/packages/block-library/src/latest-comments/index.js b/packages/block-library/src/latest-comments/index.js index d5cb44d0964a0b..e4884ab06c04e0 100644 --- a/packages/block-library/src/latest-comments/index.js +++ b/packages/block-library/src/latest-comments/index.js @@ -15,7 +15,7 @@ export const settings = { description: __( 'Show a list of your site’s most recent comments.' ), - icon: , + icon: , category: 'widgets', diff --git a/packages/block-library/src/latest-posts/index.js b/packages/block-library/src/latest-posts/index.js index 6fe9e161040411..32b4b636df2f7c 100644 --- a/packages/block-library/src/latest-posts/index.js +++ b/packages/block-library/src/latest-posts/index.js @@ -15,7 +15,7 @@ export const settings = { description: __( 'Display a list of your most recent posts.' ), - icon: , + icon: , category: 'widgets', diff --git a/packages/block-library/src/list/index.js b/packages/block-library/src/list/index.js index 6db9511f6c82d0..b3880662721f89 100644 --- a/packages/block-library/src/list/index.js +++ b/packages/block-library/src/list/index.js @@ -63,7 +63,7 @@ export const name = 'core/list'; export const settings = { title: __( 'List' ), description: __( 'Numbers, bullets, up to you. Add a list of items.' ), - icon: , + icon: , category: 'common', keywords: [ __( 'bullet list' ), __( 'ordered list' ), __( 'numbered list' ) ], diff --git a/packages/block-library/src/more/index.js b/packages/block-library/src/more/index.js index d7dee2882f9fb3..45f6b46d5a5acf 100644 --- a/packages/block-library/src/more/index.js +++ b/packages/block-library/src/more/index.js @@ -22,7 +22,7 @@ export const settings = { description: __( 'Want to show only part of this post on your blog’s home page? Insert a "More" block where you want the split.' ), - icon: , + icon: , category: 'layout', diff --git a/packages/block-library/src/nextpage/index.js b/packages/block-library/src/nextpage/index.js index 8c9ac9c1214739..2ea2bb2cd7e022 100644 --- a/packages/block-library/src/nextpage/index.js +++ b/packages/block-library/src/nextpage/index.js @@ -12,7 +12,7 @@ export const settings = { description: __( 'This block allows you to set break points on your post. Visitors of your blog are then presented with content split into multiple pages.' ), - icon: , + icon: , category: 'layout', diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js index b50ebf1a4847f9..37a71015b41300 100644 --- a/packages/block-library/src/paragraph/index.js +++ b/packages/block-library/src/paragraph/index.js @@ -74,7 +74,7 @@ export const settings = { description: __( 'Add some basic text.' ), - icon: , + icon: , category: 'common', diff --git a/packages/block-library/src/preformatted/index.js b/packages/block-library/src/preformatted/index.js index aa766dd71d5cd5..18abd542f14600 100644 --- a/packages/block-library/src/preformatted/index.js +++ b/packages/block-library/src/preformatted/index.js @@ -12,7 +12,7 @@ export const settings = { description: __( 'Add text that respects your spacing and tabs, and also allows styling.' ), - icon: , + icon: , category: 'formatting', diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js index 15324812c8f0f2..5cddc48813f4ba 100644 --- a/packages/block-library/src/pullquote/index.js +++ b/packages/block-library/src/pullquote/index.js @@ -41,7 +41,7 @@ export const settings = { description: __( 'Highlight a quote from your post or page by displaying it as a graphic element.' ), - icon: , + icon: , category: 'formatting', diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js index e883a46122aed6..0a58efb0e4b62b 100644 --- a/packages/block-library/src/quote/index.js +++ b/packages/block-library/src/quote/index.js @@ -47,7 +47,7 @@ export const name = 'core/quote'; export const settings = { title: __( 'Quote' ), description: __( 'Maybe someone else said it better -- add some quoted text.' ), - icon: , + icon: , category: 'common', keywords: [ __( 'blockquote' ) ], diff --git a/packages/block-library/src/separator/index.js b/packages/block-library/src/separator/index.js index 326ee85a2e038f..9c1e463013d13a 100644 --- a/packages/block-library/src/separator/index.js +++ b/packages/block-library/src/separator/index.js @@ -11,7 +11,7 @@ export const settings = { description: __( 'Insert a horizontal line where you want to create a break between ideas.' ), - icon: , + icon: , category: 'layout', diff --git a/packages/block-library/src/shortcode/index.js b/packages/block-library/src/shortcode/index.js index 1d5272176f4475..7b9c7e49edebce 100644 --- a/packages/block-library/src/shortcode/index.js +++ b/packages/block-library/src/shortcode/index.js @@ -15,7 +15,7 @@ export const settings = { description: __( 'Add a shortcode -- a WordPress-specific snippet of code written between square brackets.' ), - icon: , + icon: , category: 'widgets', diff --git a/packages/block-library/src/spacer/index.js b/packages/block-library/src/spacer/index.js index a67b54686fd5e1..d7c3ad3fd888e8 100644 --- a/packages/block-library/src/spacer/index.js +++ b/packages/block-library/src/spacer/index.js @@ -19,7 +19,7 @@ export const settings = { description: __( 'Add an element with empty space and custom height.' ), - icon: , + icon: , category: 'layout', diff --git a/packages/block-library/src/subhead/index.js b/packages/block-library/src/subhead/index.js index 7ea6455b33d40b..39249f9a3e0632 100644 --- a/packages/block-library/src/subhead/index.js +++ b/packages/block-library/src/subhead/index.js @@ -18,7 +18,7 @@ export const settings = { description: __( 'This block is deprecated. Please use the Paragraph block instead.' ), - icon: , + icon: , category: 'common', diff --git a/packages/block-library/src/table/index.js b/packages/block-library/src/table/index.js index 54b02a7bcc339d..a59e70bee183a0 100644 --- a/packages/block-library/src/table/index.js +++ b/packages/block-library/src/table/index.js @@ -78,7 +78,7 @@ export const name = 'core/table'; export const settings = { title: __( 'Table' ), description: __( 'Insert a table -- perfect for sharing charts and data.' ), - icon: , + icon: , category: 'formatting', attributes: { diff --git a/packages/block-library/src/verse/index.js b/packages/block-library/src/verse/index.js index 1615356ad014fa..2ac312c7a77f62 100644 --- a/packages/block-library/src/verse/index.js +++ b/packages/block-library/src/verse/index.js @@ -17,7 +17,7 @@ export const settings = { description: __( 'A block for haiku? Why not? Blocks for all the things! (See what we did here?)' ), - icon: , + icon: , category: 'formatting', diff --git a/packages/block-library/src/video/index.js b/packages/block-library/src/video/index.js index 7a6bb47748201f..8f34b648ddf831 100644 --- a/packages/block-library/src/video/index.js +++ b/packages/block-library/src/video/index.js @@ -18,7 +18,7 @@ export const settings = { description: __( 'Embed a video file and a simple video player.' ), - icon: , + icon: , keywords: [ __( 'movie' ) ], diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 0ddb4879719ebe..1196a86adfcbef 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -3,4 +3,8 @@ ### Breaking Change - `withAPIData` has been removed. Please use the Core Data module or `@wordpress/api-fetch` directly instead. -- `wp.components.Draggable` as a DOM node drag handler has been deprecated. Please, use `wp.components.Draggable` as a wrap component for your DOM node drag handler. \ No newline at end of file +- `wp.components.Draggable` as a DOM node drag handler has been deprecated. Please, use `wp.components.Draggable` as a wrap component for your DOM node drag handler. + +### New Feature + +- Adding a new `AccessibleSVG` component. diff --git a/packages/components/src/accessible-svg/README.md b/packages/components/src/accessible-svg/README.md new file mode 100644 index 00000000000000..8fbbb5005076d9 --- /dev/null +++ b/packages/components/src/accessible-svg/README.md @@ -0,0 +1,24 @@ +# AccessibleSVG + +A drop-in replacement for the svg element to add the required a11y props for cross-browser accessible SVG elements. + +## Usage + +```jsx +import { AccessibleSVG } from '@wordpress/components'; + +const MyIcon = () => ( + + + + + + + + + > +); +``` diff --git a/packages/components/src/accessible-svg/index.js b/packages/components/src/accessible-svg/index.js new file mode 100644 index 00000000000000..e7f0fd7c727136 --- /dev/null +++ b/packages/components/src/accessible-svg/index.js @@ -0,0 +1,12 @@ +function AccessibleSVG( props ) { + const appliedProps = { + ...props, + role: 'img', + 'aria-hidden': 'true', + focusable: 'false', + }; + + return ; +} + +export default AccessibleSVG; diff --git a/packages/components/src/form-toggle/index.js b/packages/components/src/form-toggle/index.js index 0847003c763daa..b20eec561f5834 100644 --- a/packages/components/src/form-toggle/index.js +++ b/packages/components/src/form-toggle/index.js @@ -4,6 +4,11 @@ import classnames from 'classnames'; import { noop } from 'lodash'; +/** + * Internal dependencies + */ +import AccessibleSVG from '../accessible-svg'; + function FormToggle( { className, checked, id, onChange = noop, ...props } ) { const wrapperClasses = classnames( 'components-form-toggle', @@ -24,7 +29,8 @@ function FormToggle( { className, checked, id, onChange = noop, ...props } ) { { checked ? - : + : + } ); diff --git a/packages/components/src/index.js b/packages/components/src/index.js index a74aa8a20cb288..1de176ac2fd137 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -1,6 +1,7 @@ // Components export * from './primitives'; // eslint-disable-next-line camelcase +export { default as AccessibleSVG } from './accessible-svg'; export { default as Autocomplete } from './autocomplete'; export { default as BaseControl } from './base-control'; export { default as Button } from './button'; diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js index 1ad4044c16b69d..5cfb8fc5d314fa 100644 --- a/packages/components/src/panel/body.js +++ b/packages/components/src/panel/body.js @@ -13,6 +13,7 @@ import { Component } from '@wordpress/element'; */ import Button from '../button'; import Dashicon from '../dashicon'; +import AccessibleSVG from '../accessible-svg'; class PanelBody extends Component { constructor( props ) { @@ -51,14 +52,14 @@ class PanelBody extends Component { aria-expanded={ isOpened } > { isOpened ? - + - : - + : + - + } { icon && } { title } diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js index 8553a89b8c1053..6418e4a1bc1459 100644 --- a/packages/components/src/panel/test/body.js +++ b/packages/components/src/panel/test/body.js @@ -24,7 +24,7 @@ describe( 'PanelBody', () => { expect( panelBody.hasClass( 'is-opened' ) ).toBe( true ); expect( panelBody.state( 'opened' ) ).toBe( true ); expect( button.prop( 'onClick' ) ).toBe( panelBody.instance().toggle ); - expect( button.childAt( 0 ).name() ).toBe( 'svg' ); + expect( button.childAt( 0 ).name() ).toBe( 'AccessibleSVG' ); expect( button.childAt( 1 ).text() ).toBe( 'Some Text' ); } ); diff --git a/packages/editor/src/components/block-icon/index.js b/packages/editor/src/components/block-icon/index.js index 6e8855b490180d..5ef9f0ce53d119 100644 --- a/packages/editor/src/components/block-icon/index.js +++ b/packages/editor/src/components/block-icon/index.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { Dashicon } from '@wordpress/components'; +import { Dashicon, AccessibleSVG } from '@wordpress/components'; import { createElement, Component } from '@wordpress/element'; function renderIcon( icon ) { @@ -18,6 +18,8 @@ function renderIcon( icon ) { } return icon(); + } else if ( icon && icon.type === 'svg' ) { + return ; } return icon || null; diff --git a/packages/editor/src/components/block-mover/arrows.js b/packages/editor/src/components/block-mover/arrows.js index dbee3b1ef2fc5f..8b4438bce0ac18 100644 --- a/packages/editor/src/components/block-mover/arrows.js +++ b/packages/editor/src/components/block-mover/arrows.js @@ -1,11 +1,16 @@ +/** + * WordPress dependencies + */ +import { AccessibleSVG } from '@wordpress/components'; + export const upArrow = ( - + - + ); export const downArrow = ( - + - + ); diff --git a/packages/editor/src/components/block-switcher/index.js b/packages/editor/src/components/block-switcher/index.js index da31d3cddc2537..dc5e58bfbad517 100644 --- a/packages/editor/src/components/block-switcher/index.js +++ b/packages/editor/src/components/block-switcher/index.js @@ -7,7 +7,7 @@ import { castArray, filter, first, get, mapKeys, orderBy } from 'lodash'; * WordPress dependencies */ import { __, _n, sprintf } from '@wordpress/i18n'; -import { Dropdown, IconButton, Toolbar, PanelBody } from '@wordpress/components'; +import { Dropdown, IconButton, Toolbar, PanelBody, AccessibleSVG } from '@wordpress/components'; import { getBlockType, getPossibleBlockTransformations, switchToBlockType, hasChildBlocks } from '@wordpress/blocks'; import { Component, Fragment } from '@wordpress/element'; import { DOWN } from '@wordpress/keycodes'; @@ -88,7 +88,7 @@ export class BlockSwitcher extends Component { onKeyDown={ openOnArrowDown } > - + ); From 4d8ace6b8d20bc73000feb71175cf5961c465305 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 4 Sep 2018 10:22:16 +0100 Subject: [PATCH 2/6] Document the accessible SVG behavior --- docs/block-api.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/block-api.md b/docs/block-api.md index 2543efc0138845..ecbb05f8dfe098 100644 --- a/docs/block-api.md +++ b/docs/block-api.md @@ -79,9 +79,11 @@ An icon property should be specified to make it easier to identify a block. Thes icon: 'book-alt', // Specifying a custom svg for the block -icon: , +icon: , ``` +**Note:** Custom SVG icons are automatically wrapped in the `wp.components.AccessibleSVG` component to add the a11y attributes (role, aria-hidden and focusable). + An object can also be passed as icon, in this case, icon, as specified above, should be included in the src property. Besides src the object can contain background and foreground colors, this colors will appear with the icon when they are applicable e.g.: in the inserter. From a83a5631487d67b4dcb4aa645b9aab43c0905dbd Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Tue, 4 Sep 2018 11:09:35 +0100 Subject: [PATCH 3/6] docs: Tweak README for AccessibleSVG --- packages/components/src/accessible-svg/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/accessible-svg/README.md b/packages/components/src/accessible-svg/README.md index 8fbbb5005076d9..7fccdbd6e364bc 100644 --- a/packages/components/src/accessible-svg/README.md +++ b/packages/components/src/accessible-svg/README.md @@ -1,6 +1,6 @@ # AccessibleSVG -A drop-in replacement for the svg element to add the required a11y props for cross-browser accessible SVG elements. +A drop-in replacement for the svg element that adds the required accessibility attributes for accessible SVG elements across browsers. ## Usage From 8aeb9800b0662c93e37f153a935d058d83bf6754 Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Tue, 4 Sep 2018 11:10:19 +0100 Subject: [PATCH 4/6] docs: Remove redundant "accessible" --- packages/components/src/accessible-svg/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/accessible-svg/README.md b/packages/components/src/accessible-svg/README.md index 7fccdbd6e364bc..e5b956640e1609 100644 --- a/packages/components/src/accessible-svg/README.md +++ b/packages/components/src/accessible-svg/README.md @@ -1,6 +1,6 @@ # AccessibleSVG -A drop-in replacement for the svg element that adds the required accessibility attributes for accessible SVG elements across browsers. +A drop-in replacement for the svg element that adds the required accessibility attributes for SVG elements across browsers. ## Usage From 9400aabc178d54fb664c3cb8d183b713e8a9c636 Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Tue, 4 Sep 2018 11:11:04 +0100 Subject: [PATCH 5/6] docs: Tweak tense in changelog --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1196a86adfcbef..54377e137429ce 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -7,4 +7,4 @@ ### New Feature -- Adding a new `AccessibleSVG` component. +- Added a new `AccessibleSVG` component. From aa37d3a7b53ff41074bbd385393d800acf606436 Mon Sep 17 00:00:00 2001 From: Matthew Riley MacPherson Date: Tue, 4 Sep 2018 11:13:26 +0100 Subject: [PATCH 6/6] docs: Tweak wording and add link in doc --- docs/block-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/block-api.md b/docs/block-api.md index ecbb05f8dfe098..e26fcb9d3d3ae4 100644 --- a/docs/block-api.md +++ b/docs/block-api.md @@ -82,7 +82,7 @@ icon: 'book-alt', icon: , ``` -**Note:** Custom SVG icons are automatically wrapped in the `wp.components.AccessibleSVG` component to add the a11y attributes (role, aria-hidden and focusable). +**Note:** Custom SVG icons are automatically wrapped in the [`wp.components.AccessibleSVG` component](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/accessible-svg/) to add accessibility attributes (`aria-hidden`, `role`, and `focusable`). An object can also be passed as icon, in this case, icon, as specified above, should be included in the src property. Besides src the object can contain background and foreground colors, this colors will appear with the icon