Skip to content

Gallery image: fix the elements order #14931

@afercia

Description

@afercia

Noticed while testing #14822

In the gallery images, the order of the elements should be improved. Currently, the order is:

  • "Remove Image" button (see block-library-gallery-item__inline-menu)
  • the image (which is focusable)
  • the caption field

With this order, there are at least 2 issues:

  • when using a keyboard, the "Remove Image" button gets skipped because it appears after the image is focused
  • even if it wasn't skipped, the "Remove Image" button doesn't give any context on which image it will remove because it's before any relevant information related to the image

I'd propose to:

  • move the "Remove Image" button after the image: shouldn't be a big problem as it's absolutely positioned
  • make sure the button appears both when tabbing forward and when tabbing backwards

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Type] BugAn existing feature does not function as intended

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions