Description

Follow-up to #50373

While testing the Image block lightbox, noticed a few things that can be improved. Main issues:

• Some strings are not translatable. This was already mentioned in the original PR>
• Translatable strings must avoid concatenation. Use full sentences instead.
• When the image has an empty alt text, the modal dialog is unlabelled (because aria-labelledby points to the image with the empty alt text).
• Missing escaping for some HTML attributes.
• Potentially duplicate IDs when hte same image is added more than once on a page. This would also cause incorrect labelling of the modal dialog.
• The buttons miss type="button". I'm not sure the buttons default action is prevented. There is a potential risk to submit a form in the edge case where the lightbox button is rendered within a form.

Step-by-step reproduction instructions

• Check the code at https://github.com/WordPress/gutenberg/blob/2b687d03ecdfb52229c25d5d455038b14fc8fa89/packages/block-library/src/image/index.php and see the button labels are not translatable:
  • $aria_label = 'Open image lightbox';
  • aria-label="Close lightbox"
• Observe one translatable string uses concatenation.
• Make sure to enable Core blocks in the Gutenberg Experiments settings page.
• Add an image with no alt text.
• Set the image to open in a lightbox (from the Advanced settings in the block settings sidebar).
• Publisha and go to the fron end.
• Open the image lightbox by clicking the image.
• Inspect the source and check the element with role=dialog has an aria-labelledby attribute that points to the ID of the image with the empty alt text. As such, the dialog is unlabelled.
• Inspect the source and observe the buttosn to open and close the lightbox miss a type="button" attribute.

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