Skip to content

Don't use a details element for the metaboxes area #65406

Closed

Description

Description

Follow-up to #64351

Under a viewport height of 550 pixels, the metaboxes area container now turns into a <details> element. See

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

As reported on #64351 (comment) by @joedolson a <details> element isn't ideal in this case. Basically it should not be used for sections of content that need a heading to identify the section. Also, it should not be used for accordion-like UIs. Rather, an expandable section with a heading 'Meta Boxe' should be used instead.

Step-by-step reproduction instructions

  • Activate a plugin that adds a metabox e.g. Yoast SEO.
  • Edit a post.
  • Emulate a viewport height that is smaller than 550 pixels.
  • Observe the metaboxes area turns into a <details> element.

Screenshots, screen recording, code snippet

metaboxes details

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

Labels

[Feature] Meta BoxesA draggable box shown on the post editing screen[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Package] Edit Post/packages/edit-post[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions