adds default alt values in editing context #11218
Conversation
mtias
added
the
[Feature] Media
|
@noisysocks @talldan Can you please have a look at this? It's a relatively minor change and would be good to get it merged. Thank you! |
There was a problem hiding this comment.
Hi @antpb - thanks so much for working on this, looks like a really good change to get in, and the functionality worked well in testing.
I think there are a couple of code quality improvements that could be made, so I've left a some comments.
I can also help out adding an e2e test once this is merged.
| // 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 imgNoAlt = <img src={ url } alt={ defaultAlt } onClick={ this.onImageClick } />; |
There was a problem hiding this comment.
I think this could have been done in a much smaller change, something along the lines of:
const defaultedAlt = alt ? alt : sprintf( __( 'This image has an empty alt attribute; its file name is %s' ), this.getFilename( url ) );
const img = <img src={ url } alt={ defaultedAlt } onClick={ this.onImageClick } />;
Would avoid the need for the if statement on line 486 and the ternary on 574.
There was a problem hiding this comment.
great suggestion. that makes this much more readable.
| @@ -245,6 +246,16 @@ class ImageEdit extends Component { | |||
| }; | |||
| } | |||
|
|
|||
| getFilename( url ) { | |||
| if ( url ) { | |||
| const fileName = url.toString().match( /.*\/(.+?)$/ ); | |||
There was a problem hiding this comment.
It looks like the regular expression doesn't take query string parameters into account, and I think it should strip them.
For example, the image for my gh avatar has some params in the url -> https://avatars2.githubusercontent.com/u/677833?s=60&v=4
I also think the toString might be unnecessary, I'd expect url to be a string or undefined given that's its attribute type.
There was a problem hiding this comment.
Thanks! Nice callout. My regex is horrible so I would love a review on my recent commit. I tested with a regular media library image and also the avatar string you provided. Seems to be working! 😬
There was a problem hiding this comment.
One change I'd make is to for the second group to be a non-capturing group, since we're not concerned with using its matched content:
/.*\/(.+?)(?:\?.*)?$/There was a problem hiding this comment.
Cool! Good call. Thanks!
talldan
added
the
[Focus] Accessibility (a11y)
antpb
force-pushed
the
add-default-alt-values-to-images-in-editing-context-#1520
branch
2 times, most recently
from
5a4d6ea to
6f0a542
Compare
antpb
force-pushed
the
add-default-alt-values-to-images-in-editing-context-#1520
branch
from
6f0a542 to
338eb64
Compare
| @@ -525,7 +537,6 @@ class ImageEdit extends Component { | |||
| showRightHandle = true; | |||
| } | |||
| } | |||
| /* eslint-enable no-lonely-if */ | |||
There was a problem hiding this comment.
This shouldn't be changed. We need to reenable any ESLint immediately after it is no longer necessary to be disabled.
| return fileName[ 1 ]; | ||
| } | ||
| } | ||
| return ''; |
There was a problem hiding this comment.
Won't this produce a nonsense alt value of 'This image has an empty alt attribute; its file name is ' if this return is reached?
There was a problem hiding this comment.
@aduth Thanks! I do not believe there is an instance that url will not pass given the Media Library is where this is passed back from. I can't imagine how it would not return url. I only added this check as an edge case precaution of a graceful return instead of an error of using an undefined url. Can you think of any edge cases where url would return false? Happy to remove the check; I just want to make sure that I'm not taking away a safety net. :)
There was a problem hiding this comment.
Well, ideally we're certain the sort of data we're expecting. For something like URL user input, it's a bit harder to nail down. But maybe it's safe to assume that every URL should at least have a / followed by a "filename" (this is what the pattern is checking, yeah? The fact I'm asking is maybe a hint it's not very obvious on its own). If we are going to be uncertain, we should at least follow-through on our uncertainty, where defaultedAlt doesn't perform the substitution at all if the URL can't be determined.
| @@ -246,6 +247,11 @@ class ImageEdit extends Component { | |||
| }; | |||
| } | |||
|
|
|||
| getFilename( url ) { | |||
| const fileName = url.match( /.*\/(.+?)(?:\?.*)?$/ ); | |||
There was a problem hiding this comment.
The main reason I'd see to author this way vs. directly return the value (return url.match( /* ... */ )[ 1 ]) would be to have the variable serve as an explaining variable, but in this case its not well-explained in that the return of String#match is not the file name, it's a match Array.
There was a problem hiding this comment.
This could be made more durable (especially the query parameter) bit if we were to rely on the new getPath from @wordpress/url.
const path = getPath( url );
if ( path ) {
return last( path.split( '/' ) );
}There was a problem hiding this comment.
To our previous conversation about the certainty of the file name being matched; is there any guarantee that the input here is in-fact a url? It's making me a bit nervous.
…dPress#1520' of https://github.com/antpb/gutenberg into add-default-alt-values-to-images-in-editing-context-WordPress#1520
NEW PR TO CLEAN UP REBASE
Description
Sets default alt values to fix #1520
Previous conversation can be found here: #10482
How to test:
create image block
add image with no alt value
inspect image to see that alt value is now set as a readable string "This image has an empty alt attribute, its file name is "FILENAME""