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

Make accessible toolbar stable and deprecate old usage #23316

Merged
merged 28 commits into from
Aug 11, 2020
Merged

Make accessible toolbar stable and deprecate old usage #23316

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
fc54ccd
Deprecate legacy toolbar usage
diegohaz Jun 19, 2020
e29ae96
Update e2e tests
diegohaz Jun 19, 2020
867543d
Merge branch 'master' into try/accessible-toolbar
diegohaz Jul 13, 2020
b40177f
Merge branch 'master' into try/accessible-toolbar
diegohaz Jul 16, 2020
d5201eb
Remove __experimental flag from Toolbar accessibilityLabel prop
diegohaz Jul 16, 2020
ac60181
Merge branch 'master' into try/accessible-toolbar
diegohaz Jul 20, 2020
fde5aa1
Merge branch 'master' into try/accessible-toolbar
diegohaz Jul 23, 2020
7aecd5e
Use label instead of accessibilityLabel
diegohaz Jul 23, 2020
94d5ca2
Deprecate <Toolbar> without label prop
diegohaz Jul 23, 2020
26dda7e
Make ToolbarItem component stable
diegohaz Jul 23, 2020
5efe0db
Deprecate ToolbarButton usage without a parent Toolbar
diegohaz Jul 23, 2020
f48467e
Simplify jsdocs
diegohaz Jul 23, 2020
b464950
data-experimental-toolbar-item to data-toolbar-item
diegohaz Jul 23, 2020
1813a7d
Remove deprecation warning from ToolbarButton
diegohaz Jul 23, 2020
e16144a
Update unit test
diegohaz Jul 23, 2020
e387239
Update Toolbar README
diegohaz Jul 23, 2020
696279d
Update tests
diegohaz Jul 23, 2020
cf740b4
Remove ToolbarGroup test from Toolbar
diegohaz Jul 23, 2020
c184881
Merge branch 'master' into try/accessible-toolbar
diegohaz Jul 28, 2020
dff1660
Replace Toolbar by ToolbarGroup on the Classic Editor
diegohaz Jul 28, 2020
dbc4da3
Merge branch 'master' into try/accessible-toolbar
diegohaz Aug 6, 2020
2b5d232
Add Toolbar, ToolbarButton, ToolbarGroup and ToolbarItem docs
diegohaz Aug 6, 2020
5931985
Add links to depreaction notices and warnings
diegohaz Aug 6, 2020
cf8483d
Update ToolbarButton docs
diegohaz Aug 6, 2020
df663c6
Improve documentation around BlockControls usage
diegohaz Aug 10, 2020
dd7ead5
Update deprecation warning link on Navigable Toolbar
diegohaz Aug 10, 2020
e177fb1
Update ToolbarItem README
diegohaz Aug 10, 2020
c0acb82
Update ToolbarItem README
diegohaz Aug 10, 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
9 changes: 8 additions & 1 deletion packages/block-editor/src/components/navigable-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
useEffect,
useCallback,
} from '@wordpress/element';
import deprecated from '@wordpress/deprecated';
import { focus } from '@wordpress/dom';
import { useShortcut } from '@wordpress/keyboard-shortcuts';

Expand Down Expand Up @@ -43,7 +44,13 @@ function useIsAccessibleToolbar( ref ) {

const determineIsAccessibleToolbar = useCallback( () => {
const tabbables = focus.tabbable.find( ref.current );
setIsAccessibleToolbar( hasOnlyToolbarItem( tabbables ) );
const onlyToolbarItem = hasOnlyToolbarItem( tabbables );
if ( ! onlyToolbarItem ) {
deprecated( 'Using custom components as toolbar controls', {
diegohaz marked this conversation as resolved.
Show resolved Hide resolved
alternative: 'ToolbarItem or ToolbarButton components',
} );
}
setIsAccessibleToolbar( onlyToolbarItem );
}, [] );

useLayoutEffect( determineIsAccessibleToolbar, [] );
Expand Down
4 changes: 2 additions & 2 deletions packages/e2e-tests/specs/editor/various/is-typing.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ describe( 'isTyping', () => {
it( 'should not close the dropdown when typing in it', async () => {
// Adds a Dropdown with an input to all blocks
await page.evaluate( () => {
const { Dropdown, Button, Fill } = wp.components;
const { Dropdown, ToolbarButton, Fill } = wp.components;
const { createElement: el, Fragment } = wp.element;
function AddDropdown( BlockListBlock ) {
return ( props ) => {
Expand All @@ -56,7 +56,7 @@ describe( 'isTyping', () => {
el( Dropdown, {
renderToggle: ( { onToggle } ) =>
el(
Button,
ToolbarButton,
{
onClick: onToggle,
className: 'dropdown-open',
Expand Down