Image block: Lightbox setting name and labels are inconsistent

[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:

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

[karthick-murugan]

@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 'Enlarge image' Please check the attached screenshots.

Backend:

Frontend without Enlarge:

Frontend with Enlarge:

[afercia]

@karthick-murugan yes the setting has been moved to the block toolbar, which is arguable but that's what we have now.

Regarding the labeling:
I would like this setting to use the same name in the admin and in the front end, or at least the same terminology. I don't understand why in the admin it's 'Expand' while on the front end it's 'Enlarge'. This seems a perfect way to confuse users.

I'd like to propose:

In the admin: Change 'Expand on click' to 'Enlarge on click'.
Note: 'click' relates to a specific type of device. A good UI should be device-agnostic. Ideally, any UI shouldn't ever use device-specific terminology but for clarity I'd tend to think we may keep 'click' for now.

Front end trigger button: I'd simplify aria-label="Enlarge image: {image alt}" to just aria-label="Enlarge" and move the image information to a hidden element referenced by aria-describedby.

Front end modal dialog: the current labeling aria-label="Enlarge image: Big boy {image alt}" is wrong. First, it should be enlarged, not enlarge. Secondly, I'd remove the image information (the alt) because it's redundant. The dialog contains the image, the alt attribute is already there.

[karthick-murugan]

@afercia - Updated the PR as per your suggestions. Pease have a look and let me know if you need any changes.