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

Post editor: fix meta boxes accessibility #65466

Merged
merged 16 commits into from
Oct 8, 2024
Merged

Post editor: fix meta boxes accessibility #65466

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
30e93ed
Replace details element with custom toggle
stokesman Sep 18, 2024
0fb80be
Consolidate details of updating height into function
stokesman Sep 18, 2024
c95b5c9
Reduce conditionals for toggle vs. resizable
stokesman Sep 18, 2024
5b355f4
Fix style in RTL
stokesman Sep 21, 2024
ea1f96c
Remove unneeded overflow style
stokesman Sep 21, 2024
e39c22a
Maintain focus even with caret browsing on
stokesman Sep 23, 2024
56ae759
Use `ResizableBox` again
stokesman Sep 26, 2024
b7f087e
Add aria-expanded to toggle and remove aria-label
stokesman Sep 26, 2024
753edcf
Fix styles for Windows high contrast mode
stokesman Sep 26, 2024
9d25236
Add missing "border" in Windows high contrast mode
stokesman Sep 26, 2024
3f7553b
Move `flex-shrink` rule to toggle only
stokesman Sep 26, 2024
89fdd4e
Fix rule preserved for non-iframe canvas
stokesman Sep 26, 2024
4ad9319
Make meta boxes container a navigable region
stokesman Sep 27, 2024
097eb3c
Try hiding meta box region contents when not expanded
stokesman Sep 27, 2024
91ddb55
Fix hidden conditional
stokesman Sep 27, 2024
b1b0ad2
Rename a couple functions
stokesman Oct 7, 2024
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
216 changes: 100 additions & 116 deletions packages/edit-post/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {
useRef,
useState,
} from '@wordpress/element';
import { chevronDown, chevronUp } from '@wordpress/icons';
import { store as noticesStore } from '@wordpress/notices';
import { store as preferencesStore } from '@wordpress/preferences';
import {
Expand All @@ -43,12 +44,13 @@ import { addQueryArgs } from '@wordpress/url';
import { decodeEntities } from '@wordpress/html-entities';
import { store as coreStore } from '@wordpress/core-data';
import {
ResizableBox,
Icon,
SlotFillProvider,
Tooltip,
VisuallyHidden,
} from '@wordpress/components';
import {
__experimentalUseDragging as useDragging,
useMediaQuery,
useRefEffect,
useViewportMatch,
Expand Down Expand Up @@ -183,7 +185,7 @@ function MetaBoxesMain( { isLegacy } ) {
];
}, [] );
const { set: setPreference } = useDispatch( preferencesStore );
const resizableBoxRef = useRef();
const metaBoxesMainRef = useRef();
const isShort = useMediaQuery( '(max-height: 549px)' );

const [ { min, max }, setHeightConstraints ] = useState( () => ( {} ) );
Expand All @@ -198,7 +200,7 @@ function MetaBoxesMain( { isLegacy } ) {
':scope > .components-notice-list'
);
const resizeHandle = container.querySelector(
'.edit-post-meta-boxes-main__resize-handle'
'.edit-post-meta-boxes-main__presenter'
);
const actualize = () => {
const fullHeight = container.offsetHeight;
Expand All @@ -220,13 +222,47 @@ function MetaBoxesMain( { isLegacy } ) {
const separatorRef = useRef();
const separatorHelpId = useId();

const [ isUntouched, setIsUntouched ] = useState( true );
const heightRef = useRef();
const actualizeHeight = ( candidateHeight, isPersistent ) => {
stokesman marked this conversation as resolved.
Show resolved Hide resolved
const nextHeight = Math.min( max, Math.max( min, candidateHeight ) );
if ( isPersistent ) {
heightRef.current = nextHeight;
setPreference(
'core/edit-post',
'metaBoxesMainOpenHeight',
nextHeight
);
} else {
// Keeps the unconstrained height for subsequent calculations so that when
// dragging takes the height out of range and the cursor detaches from its
// initial position relative to the drag handle, any movement back toward the
// range is absorbed without affecting the applied height as that would
// otherwise maintain the cursor’s detachment.
heightRef.current = candidateHeight;
metaBoxesMainRef.current.style.height = `${ nextHeight }px`;
separatorRef.current.ariaValueNow = getAriaValueNow( nextHeight );
}
};
const { startDrag, endDrag, isDragging } = useDragging( {
onDragStart: () => {
if ( isAutoHeight || heightRef.current === undefined ) {
// Sets the starting height to avoid visual jumps in height and
// aria-valuenow being `NaN` for the first (few) resize events.
actualizeHeight( metaBoxesMainRef.current.offsetHeight );
} else if ( heightRef.current > max ) {
// Starts from max in case shortening the window has imposed it.
actualizeHeight( max );
}
},
onDragMove: ( { movementY } ) =>
actualizeHeight( heightRef.current - movementY ),
onDragEnd: () => actualizeHeight( heightRef.current, true ),
} );

if ( ! hasAnyVisible ) {
return;
}

const className = 'edit-post-meta-boxes-main';
const contents = (
<div
className={ clsx(
Expand All @@ -248,141 +284,89 @@ function MetaBoxesMain( { isLegacy } ) {
let usedMax = '50%'; // Approximation before max has a value.
if ( max !== undefined ) {
// Halves the available max height until a user height is set.
usedMax = isAutoHeight && isUntouched ? max / 2 : max;
usedMax = isAutoHeight && ! isDragging ? max / 2 : max;
}

const getAriaValueNow = ( height ) =>
Math.round( ( ( height - min ) / ( max - min ) ) * 100 );
const usedAriaValueNow =
max === undefined || isAutoHeight ? 50 : getAriaValueNow( openHeight );

if ( isShort ) {
return (
<details
className={ className }
open={ isOpen }
onToggle={ ( { target } ) => {
setPreference(
'core/edit-post',
'metaBoxesMainIsOpen',
target.open
);
} }
>
<summary>{ __( 'Meta Boxes' ) }</summary>
{ contents }
</details>
);
}
const toggle = () =>
setPreference( 'core/edit-post', 'metaBoxesMainIsOpen', ! isOpen );

// TODO: Support more/all keyboard interactions from the window splitter pattern:
// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
const onSeparatorKeyDown = ( event ) => {
const delta = { ArrowUp: 20, ArrowDown: -20 }[ event.key ];
if ( delta ) {
const { resizable } = resizableBoxRef.current;
const fromHeight = isAutoHeight
? resizable.offsetHeight
: openHeight;
const nextHeight = Math.min(
max,
Math.max( min, delta + fromHeight )
);
resizableBoxRef.current.updateSize( {
height: nextHeight,
// Oddly, if left unspecified a subsequent drag gesture applies a fixed
// width and the pane fails to shrink/grow with parent width changes from
// sidebars opening/closing or window resizes.
width: 'auto',
} );
setPreference(
'core/edit-post',
'metaBoxesMainOpenHeight',
nextHeight
);
const pane = metaBoxesMainRef.current;
const fromHeight = isAutoHeight ? pane.offsetHeight : openHeight;
actualizeHeight( delta + fromHeight, true );
event.preventDefault();
}
};

return (
<ResizableBox
className={ className }
defaultSize={ { height: openHeight } }
ref={ resizableBoxRef }
enable={ {
top: true,
right: false,
bottom: false,
left: false,
topLeft: false,
topRight: false,
bottomRight: false,
bottomLeft: false,
} }
minHeight={ min }
maxHeight={ usedMax }
bounds="parent"
boundsByDirection
const className = 'edit-post-meta-boxes-main';
const paneLabel = __( 'Meta Boxes' );
let paneProps, paneButtonProps;
if ( isShort ) {
paneProps = {
className: clsx( className, 'is-toggle-only', isOpen && 'is-open' ),
};
paneButtonProps = {
'aria-label': __( 'Expand or collapse meta boxes pane' ),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This button should have a managed aria-expanded attribute, which allows the text to be shortened to just 'Meta boxes pane'. The behavior will be conveyed by the value of the aria-expanded attribute, and the extra terms are unnecessary.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for reviewing! b7f087e adds aria-expanded but since the button itself already had "Meta boxes" as its text I just removed aria-label. Does that seem good?

onClick: toggle,
children: (
<>
{ paneLabel }
<Icon icon={ isOpen ? chevronUp : chevronDown } />
</>
),
};
} else {
paneProps = {
ref: metaBoxesMainRef,
className: clsx( className, 'is-resizable' ),
style: { height: openHeight, maxHeight: usedMax },
};
paneButtonProps = {
ref: separatorRef,
role: 'separator',
'aria-valuenow': usedAriaValueNow,
'aria-label': __( 'Drag to resize' ),
'aria-describedby': separatorHelpId,
onKeyDown: onSeparatorKeyDown,
onMouseDown: startDrag,
onMouseUp: endDrag,
// Avoids hiccups while dragging over objects like iframes and ensures that
// the event to end the drag is captured by the target (resize handle)
// whether or not it’s under the pointer.
onPointerDown={ ( { pointerId, target } ) => {
onPointerDown: ( { pointerId, target } ) => {
target.setPointerCapture( pointerId );
} }
onResizeStart={ ( event, direction, elementRef ) => {
if ( isAutoHeight ) {
const heightNow = elementRef.offsetHeight;
// Sets the starting height to avoid visual jumps in height and
// aria-valuenow being `NaN` for the first (few) resize events.
resizableBoxRef.current.updateSize( { height: heightNow } );
// Causes `maxHeight` to update to full `max` value instead of half.
setIsUntouched( false );
}
} }
onResize={ () => {
const { height } = resizableBoxRef.current.state;
const separator = separatorRef.current;
separator.ariaValueNow = getAriaValueNow( height );
} }
onResizeStop={ () => {
const nextHeight = resizableBoxRef.current.state.height;
setPreference(
'core/edit-post',
'metaBoxesMainOpenHeight',
nextHeight
);
} }
handleClasses={ {
top: 'edit-post-meta-boxes-main__resize-handle',
} }
handleComponent={ {
top: (
<>
<Tooltip text={ __( 'Drag to resize' ) }>
{ /* Disable reason: aria-valuenow is supported by separator role. */ }
{ /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */ }
<button
ref={ separatorRef }
aria-label={ __( 'Drag to resize' ) }
aria-describedby={ separatorHelpId }
onKeyDown={ onSeparatorKeyDown }
// Disable reason: buttons are allowed to be separator role.
// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
role="separator"
aria-valuenow={ usedAriaValueNow }
/>
</Tooltip>
},
children: (
<Tooltip text={ __( 'Drag to resize' ) }>
<div tabIndex={ -1 }>
<VisuallyHidden id={ separatorHelpId }>
{ __(
'Use up and down arrow keys to resize the metabox panel.'
'Use up and down arrow keys to resize the metabox pane.'
) }
</VisuallyHidden>
</>
),
} }
>
<meta ref={ effectSizeConstraints } />
</div>
</Tooltip>
),
};
}

return (
<aside aria-label={ paneLabel } { ...paneProps }>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the aside element appropriate here? I'd like to hear from people with more knowledge.

{ ! isShort && <meta ref={ effectSizeConstraints } /> }
<button
className="edit-post-meta-boxes-main__presenter"
{ ...paneButtonProps }
/>
{ contents }
</ResizableBox>
</aside>
);
}

Expand Down
Loading
Loading