Skip to content

adds default alt values for #1520 #10482

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
antpb wants to merge 6 commits into from
Closed

adds default alt values for #1520 #10482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
838bb12
adds default alt values to better factor in assitive readers
antpb Oct 10, 2018
b6100fe
adds translations
antpb Oct 10, 2018
eaa6c02
fixes translation
antpb Oct 10, 2018
7dd34de
fixes adding-inline-tokens.test.js to include default alt value
antpb Oct 11, 2018
fd82d71
fixes inline-image block default alt attribute
antpb Oct 11, 2018
708914f
whoops, gotta escape - Should make Travis happy. :)
antpb Oct 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions packages/block-library/src/image/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
import { getBlobByURL, revokeBlobURL } from '@wordpress/blob';
import {
Expand Down Expand Up @@ -58,15 +58,21 @@ const LINK_DESTINATION_CUSTOM = 'custom';
const ALLOWED_MEDIA_TYPES = [ 'image' ];

export const pickRelevantMediaFiles = ( image ) => {
let { caption } = image;
let { caption, alt } = image;
const { filename } = image;

if ( typeof caption !== 'object' ) {
caption = create( { html: caption } );
}

if ( ! alt ) {
alt = sprintf( __( 'This image has an empty alt attribute; its file name is \"%s\"' ), filename );
Copy link
Member

@ocean90 ocean90 Oct 21, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need for the escaping.

}

return {
...pick( image, [ 'alt', 'id', 'link', 'url' ] ),
...pick( image, [ 'id', 'link', 'url' ] ),
caption,
alt,
};
};

Expand Down
7 changes: 5 additions & 2 deletions packages/editor/src/components/rich-text/core-tokens/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';

/**
* Internal dependencies
Expand Down Expand Up @@ -35,7 +35,10 @@ export const settings = {
);
},

save( { id, url, alt, width } ) {
save( { id, url, alt, width, filename } ) {
if ( ! alt ) {
alt = sprintf( __( 'This image has an empty alt attribute; its file name is \"%s\"' ), filename );
Copy link
Member

@ocean90 ocean90 Oct 21, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need for the escaping.

}
return (
<img
className={ `wp-image-${ id }` }
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/adding-inline-tokens.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ describe( 'adding inline tokens', () => {
await page.click( '.media-modal button.media-button-select' );

// Check the content.
const regex = new RegExp( `<!-- wp:paragraph -->\\s*<p>a\\u00A0<img class="wp-image-\\d+" style="width:\\s*10px;?" src="[^"]+\\/${ filename }\\.png" alt=""\\/?><\\/p>\\s*<!-- \\/wp:paragraph -->` );
const regex = new RegExp( `<!-- wp:paragraph -->\\s*<p>a\\u00A0<img class="wp-image-\\d+" style="width:\\s*10px;?" src="[^"]+\\/${ filename }\\.png" alt="This image has an empty alt attribute; its file name is "10x10_e2e_test_image_z9T8jK.png""\\/?><\\/p>\\s*<!-- \\/wp:paragraph -->` );
Copy link
Member

@ocean90 ocean90 Oct 21, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You have to use the HTML entity &quot; for the quotes to check for valid HTML.

expect( await getEditedPostContent() ).toMatch( regex );
} );
} );