Skip to content

Image block: Lightbox setting name and labels are inconsistent #55617

@afercia

Description

@afercia

Description

Splitting this out from #54509 (comment)

The LIghtbox setting in the UI is named Expand on Click.
However, the visually hidden labels used in the front end use the verb 'Enlarge`:

  • aria-label for the trigger button: Enlarge image
  • aria-label for the modal dialog: Enlarged image

Whatever the decision about the term to use is, the terminology should be the same in the admin and in the front end. Users of assistive technology who perceive the aria-labels will hear the verb 'Enlarge'. When they will search for the related I control in the admin they will find an UI. control that says 'Expand' instead. This seems not ideal and potentially confusing. A goo dUI should take care also of visually hidden names and descriptions.

Personally I don't have a strong preference. Also, I'm not a native English speaker but, to me, 'Exoand` doesn't sound entirely appropriate. 'Enlarge' seems more correct to me. Regardless, These strings should be consistend and use the same term.

Prioir discussion on the setting name occurred on #53403

Cc @artemiomorales @Poliuk @jameskoster @jasmussen

Additional issue:

  • I'm not sure why the word 'Click' is title case. 'Click' is not a name of a WordPress feature, it should be lowercase. Also, in the description of the toggle when disabled, it is lowercase and as such it's inconsistent with the toggle name:

Screenshot 2023-10-25 at 09 23 28

Step-by-step reproduction instructions

  • Edit a post, add an image with lightbox enabled.
  • Observe the setting name is 'Expand on Click` and the C of the word Click is uppercase.
  • Save and view the front end.
  • Inspect the source and observe the aria-label of the button to open the lightbox is 'Enlarge image'. Expected: to use a coonsistent terminology with the editor.
  • Open the lightbox modal dialog.
  • Inspect the source and observe the aria-label of the modal dialog is 'Enlarge image {alt attribute text here if any}'. Expected: to use a coonsistent terminology with the editor.
  • In the editor, add an image with a link.
  • Observe the lightbox setting in the settings panel is disabled.
  • Observe the disabled setting shows a description where the word 'click' is all lowercase. Expected: to have consistent casing.

Screenshots, screen recording, code snippet

No response

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

Metadata

Metadata

Labels

Needs Design FeedbackNeeds general design feedback.[Block] ImageAffects the Image Block[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions