Skip to content

Commit

Permalink
Fix lock modal dialog accessibility and semantics (#62795)
Browse files Browse the repository at this point in the history 
* Use fieldset and legend instead of labeled group.

* Make lock options a nested list.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: alexstine <alexstine@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
  • Loading branch information
@afercia @t-hamano @Mamaduka
5 people authored Jun 25, 2024
1 parent 1ee2e3c commit 39777ea
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 83 deletions.
177 changes: 95 additions & 82 deletions packages/block-editor/src/components/block-lock/modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
ToggleControl,
} from '@wordpress/components';
import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
import { useInstanceId } from '@wordpress/compose';
import { useDispatch, useSelect } from '@wordpress/data';
import { getBlockType } from '@wordpress/blocks';

Expand Down Expand Up @@ -64,10 +63,6 @@ export default function BlockLockModal( { clientId, onClose } ) {
);
const { updateBlockAttributes } = useDispatch( blockEditorStore );
const blockInformation = useBlockDisplayInformation( clientId );
const instanceId = useInstanceId(
BlockLockModal,
'block-editor-block-lock-modal__options-title'
);

useEffect( () => {
setLock( {
Expand All @@ -90,11 +85,6 @@ export default function BlockLockModal( { clientId, onClose } ) {
overlayClassName="block-editor-block-lock-modal"
onRequestClose={ onClose }
>
<p>
{ __(
'Choose specific attributes to restrict or lock all available options.'
) }
</p>
<form
onSubmit={ ( event ) => {
event.preventDefault();
Expand All @@ -107,84 +97,107 @@ export default function BlockLockModal( { clientId, onClose } ) {
onClose();
} }
>
<div
role="group"
aria-labelledby={ instanceId }
className="block-editor-block-lock-modal__options"
>
<CheckboxControl
__nextHasNoMarginBottom
className="block-editor-block-lock-modal__options-title"
label={
<span id={ instanceId }>{ __( 'Lock all' ) }</span>
}
checked={ isAllChecked }
indeterminate={ isMixed }
onChange={ ( newValue ) =>
setLock( {
move: newValue,
remove: newValue,
...( allowsEditLocking
? { edit: newValue }
: {} ),
} )
}
/>
<ul className="block-editor-block-lock-modal__checklist">
{ allowsEditLocking && (
<li className="block-editor-block-lock-modal__checklist-item">
<CheckboxControl
__nextHasNoMarginBottom
label={ __( 'Restrict editing' ) }
checked={ !! lock.edit }
onChange={ ( edit ) =>
setLock( ( prevLock ) => ( {
...prevLock,
edit,
} ) )
}
/>
<Icon
className="block-editor-block-lock-modal__lock-icon"
icon={ lock.edit ? lockIcon : unlockIcon }
/>
</li>
<fieldset className="block-editor-block-lock-modal__options">
<legend>
{ __(
'Choose specific attributes to restrict or lock all available options.'
) }
<li className="block-editor-block-lock-modal__checklist-item">
</legend>
{ /*
* Disable reason: The `list` ARIA role is redundant but
* Safari+VoiceOver won't announce the list otherwise.
*/
/* eslint-disable jsx-a11y/no-redundant-roles */ }
<ul
role="list"
className="block-editor-block-lock-modal__checklist"
>
<li>
<CheckboxControl
__nextHasNoMarginBottom
label={ __( 'Disable movement' ) }
checked={ lock.move }
onChange={ ( move ) =>
setLock( ( prevLock ) => ( {
...prevLock,
move,
} ) )
className="block-editor-block-lock-modal__options-all"
label={ __( 'Lock all' ) }
checked={ isAllChecked }
indeterminate={ isMixed }
onChange={ ( newValue ) =>
setLock( {
move: newValue,
remove: newValue,
...( allowsEditLocking
? { edit: newValue }
: {} ),
} )
}
/>
<Icon
className="block-editor-block-lock-modal__lock-icon"
icon={ lock.move ? lockIcon : unlockIcon }
/>
</li>
<li className="block-editor-block-lock-modal__checklist-item">
<CheckboxControl
__nextHasNoMarginBottom
label={ __( 'Prevent removal' ) }
checked={ lock.remove }
onChange={ ( remove ) =>
setLock( ( prevLock ) => ( {
...prevLock,
remove,
} ) )
}
/>
<Icon
className="block-editor-block-lock-modal__lock-icon"
icon={ lock.remove ? lockIcon : unlockIcon }
/>
<ul
role="list"
className="block-editor-block-lock-modal__checklist"
>
{ allowsEditLocking && (
<li className="block-editor-block-lock-modal__checklist-item">
<CheckboxControl
__nextHasNoMarginBottom
label={ __( 'Restrict editing' ) }
checked={ !! lock.edit }
onChange={ ( edit ) =>
setLock( ( prevLock ) => ( {
...prevLock,
edit,
} ) )
}
/>
<Icon
className="block-editor-block-lock-modal__lock-icon"
icon={
lock.edit
? lockIcon
: unlockIcon
}
/>
</li>
) }
<li className="block-editor-block-lock-modal__checklist-item">
<CheckboxControl
__nextHasNoMarginBottom
label={ __( 'Disable movement' ) }
checked={ lock.move }
onChange={ ( move ) =>
setLock( ( prevLock ) => ( {
...prevLock,
move,
} ) )
}
/>
<Icon
className="block-editor-block-lock-modal__lock-icon"
icon={
lock.move ? lockIcon : unlockIcon
}
/>
</li>
<li className="block-editor-block-lock-modal__checklist-item">
<CheckboxControl
__nextHasNoMarginBottom
label={ __( 'Prevent removal' ) }
checked={ lock.remove }
onChange={ ( remove ) =>
setLock( ( prevLock ) => ( {
...prevLock,
remove,
} ) )
}
/>
<Icon
className="block-editor-block-lock-modal__lock-icon"
icon={
lock.remove ? lockIcon : unlockIcon
}
/>
</li>
</ul>
</li>
</ul>
{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
{ hasTemplateLock && (
<ToggleControl
__nextHasNoMarginBottom
Expand All @@ -197,7 +210,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
}
/>
) }
</div>
</fieldset>
<Flex
className="block-editor-block-lock-modal__actions"
justify="flex-end"
Expand Down
12 changes: 11 additions & 1 deletion packages/block-editor/src/components/block-lock/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,27 @@
}
}

.block-editor-block-lock-modal__options {
margin-top: $grid-unit-20;

legend {
margin-bottom: $grid-unit-20;
padding: 0;
}
}

.block-editor-block-lock-modal__checklist {
margin: 0;
}

.block-editor-block-lock-modal__options-title {
.block-editor-block-lock-modal__options-all {
padding: $grid-unit-15 0;

.components-checkbox-control__label {
font-weight: 600;
}
}

.block-editor-block-lock-modal__checklist-item {
display: flex;
justify-content: space-between;
Expand Down

0 comments on commit 39777ea

Please sign in to comment.