maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make default alt text 'image description' (#15063)

Browse source
This commit is contained in:
Suzanne Aitchison 2021-10-13 16:37:34 +01:00 • committed by GitHub
parent b900c8de92
commit 7a9352ba86
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/article-form/components/ClipboardButton.jsx
View file

@ -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 = () => (

8
app/javascript/article-form/components/EditorBody.jsx
View file

@ -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);

4
app/javascript/utilities/markdown/markdownLintCustomRules.js
View file

@ -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`,
});

6
app/views/pages/_editor_guide_text.html.erb
View file

@ -74,7 +74,7 @@
When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page.
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" loading="lazy" />
</p>
<pre>![Alt text of image](put-link-to-image-here)</pre>
<pre>![Image description](put-link-to-image-here)</pre>
<figure>
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_50,q_auto,w_50/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" loading="lazy" />
<figcaption>You can even add a caption using the HTML <code>figcaption</code> tag!</figcaption>
@ -97,8 +97,8 @@
<%= render partial: "editor_guide_h3", locals: { id: "alt-text-for-images", title: "Providing alternative descriptions for images" } %>
<p>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.</p>
<p>When you upload an image in the editor, you will see the following text to copy and paste into your post:</p>
<pre>![Alt Text](/file-path/my-image.png)</pre>
<p>Replace the "Alt Text" in square brackets with a description of your image - for example:</p>
<pre>![Image description](/file-path/my-image.png)</pre>
<p>Replace the "Image description" in square brackets with a description of your image - for example:</p>
<pre>![A pie chart showing 40% responded "Yes", 50% responded "No" and 10% responded "Not sure"](/file-path/my-image.png)</pre>
<p>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.</p>

2
app/views/pages/_editor_markdown_help.html.erb
View file

@ -24,7 +24,7 @@
When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page.
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" loading="lazy" />
</p>
<pre>![Alt text of image](put-link-to-image-here)</pre>
<pre>![Image description](put-link-to-image-here)</pre>
<figcaption> You can even add a caption using the HTML <code>figcaption</code> tag!</figcaption>
<h3>Headers</h3>

2
app/views/pages/markdown_basics.html.erb
View file

@ -24,7 +24,7 @@
<h3><strong>Inline Images</strong></h3>
<p>
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" loading="lazy" />
<code>![Alt text of image](put-link-to-image-here)</code>
<code>![Image description](put-link-to-image-here)</code>
</p>
<h3><strong>Headers</strong></h3>

20
cypress/integration/seededFlows/publishingFlows/previewPost.spec.js
View file

@ -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",
);
});
});