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

Add announcement on formatting change for screen readers #35896

Merged
merged 8 commits into from Nov 3, 2021

Some generated files are not rendered by default. Learn more.

@@ -51,6 +51,9 @@ const FormatToolbar = () => {
toggleProps.className,
{ 'is-pressed': hasActive }
),
describedBy: __(
'Displays more block tools'
),
} }
controls={ orderBy(
fills.map( ( [ { props } ] ) => props ),
@@ -20,11 +20,11 @@ export const bold = {
className: null,
edit( { isActive, value, onChange, onFocus } ) {
function onToggle() {
onChange( toggleFormat( value, { type: name } ) );
onChange( toggleFormat( value, { type: name, title } ) );
}

function onClick() {
onToggle();
onChange( toggleFormat( value, { type: name } ) );
onFocus();
}

@@ -46,7 +46,7 @@ export const code = {
},
edit( { value, onChange, onFocus, isActive } ) {
function onClick() {
onChange( toggleFormat( value, { type: name } ) );
onChange( toggleFormat( value, { type: name, title } ) );
onFocus();
}

@@ -56,6 +56,7 @@ export const code = {
title={ title }
onClick={ onClick }
isActive={ isActive }
role="menuitemcheckbox"
/>
);
},
@@ -20,11 +20,11 @@ export const italic = {
className: null,
edit( { isActive, value, onChange, onFocus } ) {
function onToggle() {
onChange( toggleFormat( value, { type: name } ) );
onChange( toggleFormat( value, { type: name, title } ) );
}

function onClick() {
onToggle();
onChange( toggleFormat( value, { type: name } ) );
onFocus();
}

@@ -16,7 +16,7 @@ export const keyboard = {
className: null,
edit( { isActive, value, onChange, onFocus } ) {
function onToggle() {
onChange( toggleFormat( value, { type: name } ) );
onChange( toggleFormat( value, { type: name, title } ) );
}

function onClick() {
@@ -30,6 +30,7 @@ export const keyboard = {
title={ title }
onClick={ onClick }
isActive={ isActive }
role="menuitemcheckbox"
/>
);
},
@@ -16,7 +16,7 @@ export const strikethrough = {
className: null,
edit( { isActive, value, onChange, onFocus } ) {
function onClick() {
onChange( toggleFormat( value, { type: name } ) );
onChange( toggleFormat( value, { type: name, title } ) );
onFocus();
}

@@ -26,6 +26,7 @@ export const strikethrough = {
title={ title }
onClick={ onClick }
isActive={ isActive }
role="menuitemcheckbox"
/>
);
},
@@ -16,7 +16,7 @@ export const subscript = {
className: null,
edit( { isActive, value, onChange, onFocus } ) {
function onToggle() {
onChange( toggleFormat( value, { type: name } ) );
onChange( toggleFormat( value, { type: name, title } ) );
}

function onClick() {
@@ -30,6 +30,7 @@ export const subscript = {
title={ title }
onClick={ onClick }
isActive={ isActive }
role="menuitemcheckbox"
/>
);
},
@@ -16,7 +16,7 @@ export const superscript = {
className: null,
edit( { isActive, value, onChange, onFocus } ) {
function onToggle() {
onChange( toggleFormat( value, { type: name } ) );
onChange( toggleFormat( value, { type: name, title } ) );
}

function onClick() {
@@ -30,6 +30,7 @@ export const superscript = {
title={ title }
onClick={ onClick }
isActive={ isActive }
role="menuitemcheckbox"
/>
);
},
@@ -101,6 +101,7 @@ function TextColorEdit( {
? enableIsAddingColor
: () => onChange( removeFormat( value, name ) )
}
role="menuitemcheckbox"
/>
{ isAddingColor && (
<InlineColorUI
@@ -9,10 +9,11 @@ import {
} from '@wordpress/block-editor';

const name = 'core/underline';
const title = __( 'Underline' );

export const underline = {
name,
title: __( 'Underline' ),
title,
tagName: 'span',
className: null,
attributes: {
@@ -26,6 +27,7 @@ export const underline = {
attributes: {
style: 'text-decoration: underline;',
},
title,
} )
);
};
@@ -30,11 +30,13 @@
],
"dependencies": {
"@babel/runtime": "^7.13.10",
"@wordpress/a11y": "^3.2.3",
"@wordpress/compose": "file:../compose",
"@wordpress/data": "file:../data",
"@wordpress/dom": "file:../dom",
"@wordpress/element": "file:../element",
"@wordpress/escape-html": "file:../escape-html",
"@wordpress/i18n": "^4.2.3",
"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
"@wordpress/keycodes": "file:../keycodes",
"classnames": "^2.3.1",
@@ -1,3 +1,10 @@
/**
* WordPress dependencies
*/

import { speak } from '@wordpress/a11y';
import { __, sprintf } from '@wordpress/i18n';

/**
* Internal dependencies
*/
@@ -19,8 +26,17 @@ import { applyFormat } from './apply-format';
*/
export function toggleFormat( value, format ) {
if ( getActiveFormat( value, format.type ) ) {
// For screen readers, will announce if formatting control is disabled.
if ( format.title ) {
// translators: %s: title of the formatting control
speak( sprintf( __( '%s removed.' ), format.title ), 'assertive' );
}
return removeFormat( value, format.type );
}

// For screen readers, will announce if formatting control is enabled.
if ( format.title ) {
// translators: %s: title of the formatting control
speak( sprintf( __( '%s applied.' ), format.title ), 'assertive' );
}
return applyFormat( value, format );
}