From 7a9352ba8668bf800523ac5b3f4d8659eb72bc35 Mon Sep 17 00:00:00 2001 From: Suzanne Aitchison Date: Wed, 13 Oct 2021 16:37:34 +0100 Subject: [PATCH] make default alt text 'image description' (#15063) --- .../components/ClipboardButton.jsx | 4 +++- .../article-form/components/EditorBody.jsx | 8 +++----- .../markdown/markdownLintCustomRules.js | 4 ++-- app/views/pages/_editor_guide_text.html.erb | 6 +++--- .../pages/_editor_markdown_help.html.erb | 2 +- app/views/pages/markdown_basics.html.erb | 2 +- .../publishingFlows/previewPost.spec.js | 20 +++++++++++-------- 7 files changed, 25 insertions(+), 21 deletions(-) diff --git a/app/javascript/article-form/components/ClipboardButton.jsx b/app/javascript/article-form/components/ClipboardButton.jsx index 464591173..bdc4e76f8 100644 --- a/app/javascript/article-form/components/ClipboardButton.jsx +++ b/app/javascript/article-form/components/ClipboardButton.jsx @@ -3,7 +3,9 @@ import PropTypes from 'prop-types'; import { Button } from '@crayons'; function linksToMarkdownForm(imageLinks) { - return imageLinks.map((imageLink) => `![Alt Text](${imageLink})`).join('\n'); + return imageLinks + .map((imageLink) => `![Image description](${imageLink})`) + .join('\n'); } const CopyIcon = () => ( diff --git a/app/javascript/article-form/components/EditorBody.jsx b/app/javascript/article-form/components/EditorBody.jsx index d5034baeb..fda776e10 100644 --- a/app/javascript/article-form/components/EditorBody.jsx +++ b/app/javascript/article-form/components/EditorBody.jsx @@ -19,11 +19,9 @@ function handleImageSuccess(textAreaRef) { // Function is within the component to be able to access // textarea ref. const editableBodyElement = textAreaRef.current; - const { links, image } = response; - const altText = image[0] - ? image[0].name.replace(/\.[^.]+$/, '') - : 'alt text'; - const markdownImageLink = `![${altText}](${links[0]})\n`; + const { links } = response; + + const markdownImageLink = `![Image description](${links[0]})\n`; const { selectionStart, selectionEnd, value } = editableBodyElement; const before = value.substring(0, selectionStart); const after = value.substring(selectionEnd, value.length); diff --git a/app/javascript/utilities/markdown/markdownLintCustomRules.js b/app/javascript/utilities/markdown/markdownLintCustomRules.js index 5bbd1686a..f1d1c565a 100644 --- a/app/javascript/utilities/markdown/markdownLintCustomRules.js +++ b/app/javascript/utilities/markdown/markdownLintCustomRules.js @@ -37,12 +37,12 @@ export const noDefaultAltTextRule = { children.forEach((contentChild) => { if ( contentChild.type === 'image' && - contentChild.line.toLowerCase().includes('![alt text]') + contentChild.line.toLowerCase().includes('![image description]') ) { onError({ lineNumber: contentChild.lineNumber, detail: '/p/editor_guide#alt-text-for-images', - context: `Consider replacing the 'alt text' in square brackets at ${getImageTextString( + context: `Consider replacing the 'Image description' in square brackets at ${getImageTextString( contentChild.line, )} with a description of the image`, }); diff --git a/app/views/pages/_editor_guide_text.html.erb b/app/views/pages/_editor_guide_text.html.erb index ec69e3f16..1ec77df2a 100644 --- a/app/views/pages/_editor_guide_text.html.erb +++ b/app/views/pages/_editor_guide_text.html.erb @@ -74,7 +74,7 @@ When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page. example image, with sloan

- 
![Alt text of image](put-link-to-image-here)
+ 
![Image description](put-link-to-image-here)
example image, with sloan
You can even add a caption using the HTML figcaption tag!
@@ -97,8 +97,8 @@ <%= render partial: "editor_guide_h3", locals: { id: "alt-text-for-images", title: "Providing alternative descriptions for images" } %>

Some users might not be able to see or easily process images that you use in your posts. Providing an alternative description for an image helps make sure that everyone can understand your post, whether they can see the image or not.

When you upload an image in the editor, you will see the following text to copy and paste into your post:

- 
![Alt Text](/file-path/my-image.png)
-

Replace the "Alt Text" in square brackets with a description of your image - for example:

+ 
![Image description](/file-path/my-image.png)
+

Replace the "Image description" in square brackets with a description of your image - for example:

![A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"](/file-path/my-image.png)

By doing this, if someone reads your post using an assistive device like a screen reader (which turns written content into spoken audio) they will hear the description you entered.

diff --git a/app/views/pages/_editor_markdown_help.html.erb b/app/views/pages/_editor_markdown_help.html.erb index e7ba60916..5749d6a97 100644 --- a/app/views/pages/_editor_markdown_help.html.erb +++ b/app/views/pages/_editor_markdown_help.html.erb @@ -24,7 +24,7 @@ When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page. example image, with sloan

- 
![Alt text of image](put-link-to-image-here)
+ 
![Image description](put-link-to-image-here)
You can even add a caption using the HTML figcaption tag!

Headers

diff --git a/app/views/pages/markdown_basics.html.erb b/app/views/pages/markdown_basics.html.erb index 1549a5550..790622816 100644 --- a/app/views/pages/markdown_basics.html.erb +++ b/app/views/pages/markdown_basics.html.erb @@ -24,7 +24,7 @@

Inline Images

example image, with sloan - ![Alt text of image](put-link-to-image-here) + ![Image description](put-link-to-image-here)

Headers

diff --git a/cypress/integration/seededFlows/publishingFlows/previewPost.spec.js b/cypress/integration/seededFlows/publishingFlows/previewPost.spec.js index a1a8a26d2..653ddaf94 100644 --- a/cypress/integration/seededFlows/publishingFlows/previewPost.spec.js +++ b/cypress/integration/seededFlows/publishingFlows/previewPost.spec.js @@ -220,7 +220,7 @@ describe('Post Editor', () => { it('should show a maximum of 3 accessibility suggestions', () => { const postTextWithFourErrors = - '# Heading level 1\n![](http://imagewithoutalt.png)\n![alt text](http://imagewithdefaultalt.png)\n#### Heading level 4'; + '# Heading level 1\n![](http://imagewithoutalt.png)\n![Image description](http://imagewithdefaultalt.png)\n#### Heading level 4'; cy.findByRole('form', { name: /^Edit post$/i }).as('articleForm'); cy.get('@articleForm') @@ -239,7 +239,7 @@ describe('Post Editor', () => { // Check each expected description has appeared cy.findByText( - "Consider replacing the 'alt text' in square brackets at ![alt text](http://imagewithdefaultalt.png) with a description of the image", + "Consider replacing the 'Image description' in square brackets at ![Image description](http://imagewithdefaultalt.png) with a description of the image", ); cy.findByText( 'Consider adding an image description in the square brackets at ![](http://imagewithoutalt.png)', @@ -259,7 +259,7 @@ describe('Post Editor', () => { it('should display image suggestions over heading suggestions', () => { const textWithThreeImageErrors = - '![](http://imageerror1.png)\n![Alt Text](http://imageerror2.png)\n![Alt Text](http://imageerror3.png)'; + '![](http://imageerror1.png)\n![Image description](http://imageerror2.png)\n![Image description](http://imageerror3.png)'; const textWithHeadingErrors = '# Heading level 1\n #### Heading level 4'; cy.findByRole('form', { name: /^Edit post$/i }).as('articleForm'); @@ -351,18 +351,20 @@ describe('Post Editor', () => { cy.get('@articleForm') .findByLabelText('Post Content') .clear() - .type('![alt text](http://image1.png)\n![Alt Text](http://image2.png)'); + .type( + '![Image description](http://image1.png)\n![Image description](http://image2.png)', + ); cy.get('@articleForm') .findByRole('button', { name: /^Preview$/i }) .click(); cy.findByText( - "Consider replacing the 'alt text' in square brackets at ![alt text](http://image1.png) with a description of the image", + "Consider replacing the 'Image description' in square brackets at ![Image description](http://image1.png) with a description of the image", ); cy.findByText( - "Consider replacing the 'alt text' in square brackets at ![Alt Text](http://image2.png) with a description of the image", + "Consider replacing the 'Image description' in square brackets at ![Image description](http://image2.png) with a description of the image", ); cy.findAllByRole('link', { @@ -381,14 +383,16 @@ describe('Post Editor', () => { cy.get('@articleForm') .findByLabelText('Post Content') .clear() - .type('Some text ![alt text](http://image1.png) Some more text'); + .type( + 'Some text ![Image description](http://image1.png) Some more text', + ); cy.get('@articleForm') .findByRole('button', { name: /^Preview$/i }) .click(); cy.findByText( - "Consider replacing the 'alt text' in square brackets at ![alt text](http://image1.png) with a description of the image", + "Consider replacing the 'Image description' in square brackets at ![Image description](http://image1.png) with a description of the image", ); }); });