adds default alt values in editing context (#11218)

* Squashing commits - default alt values editor

* adds suggestions by @talldan review - THANKS!

* makes second group non-capturing

* adds back the re-enable of no-lonely-if

* removes url check as it will never be false when this function is used

* changes defaultAlt logic

* makes use of getPath and last to determine the file name

* removes extra function from merge conflict

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

@@ -6,14 +6,16 @@ import {
 	get,
 	isEmpty,
 	map,
+	last,
 	pick,
 	compact,
 } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { getPath } from '@wordpress/url';
+import { __, sprintf } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import { getBlobByURL, revokeBlobURL, isBlobURL } from '@wordpress/blob';
 import {
@@ -98,6 +100,7 @@ class ImageEdit extends Component {
 		this.updateDimensions = this.updateDimensions.bind( this );
 		this.onSetCustomHref = this.onSetCustomHref.bind( this );
 		this.onSetLinkDestination = this.onSetLinkDestination.bind( this );
+		this.getFilename = this.getFilename.bind( this );
 		this.toggleIsEditing = this.toggleIsEditing.bind( this );
 		this.onUploadError = this.onUploadError.bind( this );
 
@@ -254,6 +257,13 @@ class ImageEdit extends Component {
 		};
 	}
 
+	getFilename( url ) {
+		const path = getPath( url );
+		if ( path ) {
+			return last( path.split( '/' ) );
+		}
+	}
+
 	getLinkDestinationOptions() {
 		return [
 			{ value: LINK_DESTINATION_NONE, label: __( 'None' ) },
@@ -487,10 +497,19 @@ class ImageEdit extends Component {
 								imageHeight,
 							} = sizes;
 
+							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' );
+							}
 							// Disable reason: Image itself is not meant to be
 							// interactive, but should direct focus to block
 							// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-							const img = <img src={ url } alt={ alt } onClick={ this.onImageClick } />;
+							const img = <img src={ url } alt={ defaultedAlt } onClick={ this.onImageClick } />;
 
 							if ( ! isResizable || ! imageWidthWithinContainer ) {
 								return (