Skip to content
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.

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

feat(image-alt): require alt text or empty strings #1260

Merged
merged 7 commits into from Dec 7, 2018

Conversation

marcysutton
Copy link
Contributor

@marcysutton marcysutton commented Nov 27, 2018

This change to the image-alt rule accounts for space characters, and fails if they are present. Empty alt attributes are still fine, and text content is still fine. This fixes cases where ATs do not skip decorative images because of the space characters in the alt attribute.

I'm open to name changes for the check, so please review.

Closes #1174

Reviewer checks

Required fields, to be filled out by PR reviewer(s)

  • Follows the commit message policy, appropriate for next version
  • Has documentation updated, a DU ticket, or requires no documentation change
  • Includes new tests, or was unnecessary
  • Code is reviewed for security by: @WilcoFiers

The image-alt rule now checks for space characters, and fails if they are present. Empty alt attributes are still fine, and text content is still fine. This fixes cases where ATs do not skip decorative images because of the space characters in the alt attribute.

Closes #1174
(there are no actual changes)
Copy link
Contributor

@dylanb dylanb left a comment

Choose a reason for hiding this comment

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

I would prefer adding this as a separate rule because it would allow us to expand beyond <img>

related to that, has someone actually tested those elements with spaces in their alt attributes?

@@ -0,0 +1,5 @@
let nn = node.nodeName.toLowerCase();
let validSetup =
node.hasAttribute('alt') && (nn === 'img' || nn === 'input' || nn === 'area');
Copy link
Contributor

Choose a reason for hiding this comment

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

The rule selector will not include <input> and <area> elements. Why not make this a new, separate rule altogether?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This check doesn't need to include input or area, so that part can be removed. This only applies to image alt, so in my opinion it should not be a separate rule. input and area both use the existing check non-empty-alt.

Copy link
Contributor

Choose a reason for hiding this comment

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

I agree with Marcy on this one. I think this one is better as a check that's part of image-alt, provided that we split off the [role=img], which we have a separate support ticket for.

@marcysutton
Copy link
Contributor Author

@dylanb check the issue, there is some support info: #1174

@WilcoFiers
Copy link
Contributor

Waiting for @marcysutton to update. Putting this into WIP.

@WilcoFiers WilcoFiers changed the title feat(image-alt): require alt text or empty strings [WIP] feat(image-alt): require alt text or empty strings Nov 30, 2018
@marcysutton
Copy link
Contributor Author

marcysutton commented Nov 30, 2018

PR updated and ready to go.

dylanb
dylanb previously approved these changes Nov 30, 2018
let validSetup =
node.hasAttribute('alt') && (nn === 'img' || nn === 'input' || nn === 'area');
let validAttrValue = /^\s+$/.test(node.getAttribute('alt'));
return validSetup && validAttrValue;
Copy link
Contributor

Choose a reason for hiding this comment

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

Nitpick. Best to use const instead of let when you're not reassigning the variable. It's just as easy to do and it creates greater security.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed.

"impact": "critical",
"messages": {
"pass": "Element has a valid alt attribute value",
"fail": "Element has an alt attribute containing only a space character"
Copy link
Contributor

Choose a reason for hiding this comment

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

I'd prefer that we be explicit that alt attributes with white space only is not ignored by all screen readers. WDYT?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That's fine by me, I've updated the PR.

@WilcoFiers WilcoFiers changed the title [WIP] feat(image-alt): require alt text or empty strings feat(image-alt): require alt text or empty strings Dec 2, 2018
@marcysutton
Copy link
Contributor Author

I've updated this PR, I don't understand what's happening with the rule-descriptions though. Git is acting really weird with that file, I tried adding/committing it and it keeps popping up again.

@WilcoFiers WilcoFiers merged commit e24cea9 into develop Dec 7, 2018
@WilcoFiers WilcoFiers deleted the image-alt-space branch December 7, 2018 15:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

False negative: 'image-alt' rule does not fail for alt=" "
3 participants