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.

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

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

Open
afercia opened this issue Oct 25, 2023 · 1 comment
Open

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

afercia opened this issue Oct 25, 2023 · 1 comment
Labels
[Block] Image Affects the Image Block [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Oct 25, 2023

Description

Splitting this out from #54509 (comment)

The LIghtbox setting in the UI is named Expand on Click.
However, the visually hidden labels uwed 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 'Enlarged 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

@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Block] Image Affects the Image Block labels Oct 25, 2023
@karthick-murugan
Copy link
Contributor

@afercia - In the latest version, the "Expand on click" has been moved to the editor and the word "click" has correct case. Now as per your thoughts, you want the backend to be updated with "Enlarge Image"? Also checked the frontend, the aria-label of the button and the aria-label of the modal dialog is 'Enlarged image' Please check the attached screenshots.

Backend:

Image

Frontend without Enlarge:

Image

Frontend with Enlarge:

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Image Affects the Image Block [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

2 participants