Fix: Gallery Block: Append images alt in aria-label attribute.

[donmhico]

Description

Fixes #16886.

Appends the images alt attributes (if any) in the aria-label.

How has this been tested?

Followed the steps provided in #16886.

Screenshots

Types of changes

Fixes #16886

Checklist:

• My code is tested.

[jorgefilipecosta]

Hi @donmhico thank you for your contribution this change generally looks good 👍 I just found a bug that we need to address before merging.
Cc: @afercia in case there is some feedback for the aria-label text used in this PR.

[jorgefilipecosta]

We need to make img.alt is defined e.g: img.alt && img.alt.length > 0. Currently, if I upload an image to a gallery using drag & drop the editor crashes because the image does not contain an alt text.

[donmhico]

Thanks @jorgefilipecosta. I've amended the commit to include this change.

gutenberg/packages/block-library/src/gallery/edit.js

Lines 304 to 306 in 14b57c7

	{ images.map( ( img, index ) => {
	const imgAlt = ( img.alt && img.alt.length > 0 ) ? `${ img.alt }. ` : '';

Sorry if I wasn't able to test the drag and drop. I'll be more careful the next time.

[afercia]

@donmhico @jorgefilipecosta thanks for working on this!.

in case there is some feedback for the aria-label text used in this PR

I'd say that if we want to keep the n of n information, it's fine to use the aria-label. However, it'd be great to adjust a couple things.

When the alt text is empty:
For consistency, I'd recommend to use the same fallback mechanism used for the image, see

gutenberg/packages/block-library/src/image/edit.js

Lines 794 to 802 in 1383a59

	const filename = this.getFilename( url );
	let defaultedAlt;
	if ( alt ) {
	defaultedAlt = alt;
	} else if ( filename ) {
	defaultedAlt = sprintf( __( 'This image has an empty alt attribute; its file name is %s' ), filename );
	} else {
	defaultedAlt = __( 'This image has an empty alt attribute' );
	}

It works thanks to a small utility function getFilename() (which in turn uses getPath imported from @wordpress/url). This mechanism allows screen reader users to have some context on the image even when the alt attribute is empty. Maybe worth considering to abstract getFilename()? @jorgefilipecosta I'd defer to you about this.

Simplify the string
Screen readers already announce the element type. There's no need to repeat "image". I know this is pre-existing but it's a good opportunity to remove the word "image", otherwise it will get repeated:

I'd also remove "in gallery", as users already know they're editing a gallery. So the string could be something like:

%1$s%2$d of %3$d

This would be announced by screen readers as:

Unicorns! 2 of 3

or (with the fallbacks):

This image has an empty alt attribute; its file name is unicorn-wallpaper-1024x768.jpg 2 of 3

or (last fallback):

This image has an empty alt attribute 2 of 3

Note: the translators comment should be updated, as there are now 3 placeholders.

[donmhico]

Thanks for the input @afercia. Can you look in my latest commit 503a804? It address the points you mentioned.

Also I think I messed up this PR when I tried to rebase this PR with the latest master. Let me know if I need to create a new PR with a new branch.

Thank you.

[jorgefilipecosta]

Hi @donmhico, thank you for the updates 👍 It seems there we a problem during the rebase of this PR and it now has lots of conflicts and includes unrelated changes.

[guarani]

Looks like this needs to be rebased with master and conflicts resolved to be testable on mobile since this PR pre-dates the monorepo changes.

[guarani]

fyi GitHub has a limit of 15 reviewers so when I remove some mobile reviewers others get removed too (I suppose at some point in the past GitHub allowed more than 15 reviewers to be added).

[glendaviesnz]

With the merging of the gallery block refactor the gallery images are now Image blocks, which don't currently have an aria label, so alt tag should be read by default.