From 5682aea46002d1f3655187e62c6740b9860ae178 Mon Sep 17 00:00:00 2001 From: Helen C Date: Wed, 27 Jan 2021 11:36:56 +0000 Subject: [PATCH] Add the option to set images as decorative If an image is decorative, the alt text will be set to be empty. If an image is not decorative, then alt text must be supplied for screen readers. --- client/scss/components/_forms.scss | 3 +- .../components/Draftail/blocks/ImageBlock.js | 5 ++- .../__snapshots__/ImageBlock.test.js.snap | 4 +-- client/tests/stubs.js | 1 + docs/_static/images/screen18_image_format.png | Bin 221204 -> 183058 bytes .../new_pages/inserting_images.rst | 3 +- wagtail/admin/localization.py | 1 + wagtail/images/forms.py | 17 ++++++++- .../wagtailimages/js/image-chooser-modal.js | 29 +++++++++++++++ wagtail/images/tests/test_admin_views.py | 33 +++++++++++++++++- wagtail/images/views/chooser.py | 1 + 11 files changed, 90 insertions(+), 7 deletions(-) diff --git a/client/scss/components/_forms.scss b/client/scss/components/_forms.scss index 9a5ed7e410..84d0b4a054 100644 --- a/client/scss/components/_forms.scss +++ b/client/scss/components/_forms.scss @@ -138,7 +138,8 @@ li.focused > .help { opacity: 1; } -.required .field > label:after { +.required .field > label:after, +label.required:after { content: '*'; color: $color-red; font-weight: bold; diff --git a/client/src/components/Draftail/blocks/ImageBlock.js b/client/src/components/Draftail/blocks/ImageBlock.js index 9f6928e3e9..ac3aff3b1f 100644 --- a/client/src/components/Draftail/blocks/ImageBlock.js +++ b/client/src/components/Draftail/blocks/ImageBlock.js @@ -12,7 +12,10 @@ const ImageBlock = props => { const { blockProps } = props; const { entity, onEditEntity, onRemoveEntity } = blockProps; const { src, alt } = entity.getData(); - const altLabel = `${STRINGS.ALT_TEXT}: “${alt || ''}”`; + let altLabel = STRINGS.DECORATIVE_IMAGE; + if (alt) { + altLabel = `${STRINGS.ALT_TEXT}: “${alt}”`; + } return ( diff --git a/client/src/components/Draftail/blocks/__snapshots__/ImageBlock.test.js.snap b/client/src/components/Draftail/blocks/__snapshots__/ImageBlock.test.js.snap index 1667f4e006..ec4d02f57a 100644 --- a/client/src/components/Draftail/blocks/__snapshots__/ImageBlock.test.js.snap +++ b/client/src/components/Draftail/blocks/__snapshots__/ImageBlock.test.js.snap @@ -54,7 +54,7 @@ exports[`ImageBlock no data 1`] = `

- Alt text: “” + Decorative image