Skip to content
This repository has been archived by the owner on Jul 15, 2023. It is now read-only.

ensure map areas have non-empty alts #554

Closed
wants to merge 4 commits into from
Closed

ensure map areas have non-empty alts #554

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
142a8f0
ensure map areas have non-empty alts (closes #223)
Chovin Oct 14, 2018
dac9e72
change parentNode to parent
Chovin Oct 15, 2018
1100ddc
Merge branch 'master' into patch-1
Chovin Oct 15, 2018
dafd32c
fix get JSX type instead of tagName
Chovin Oct 15, 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
20 changes: 17 additions & 3 deletions src/reactA11yImgHasAltRule.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ const ROLE_STRING: string = 'role';
const ALT_STRING: string = 'alt';
const TITLE_STRING: string = 'title';

export function getFailureMapAreaNoAlt(): string {
return `area elements of image maps must have a non-empty alt attribute`;
}

export function getFailureStringNoAlt(tagName: string): string {
return `<${tagName}> elements must have an non-empty alt attribute or \
use empty alt attribute as well as role='presentation' for decorative/presentational images. \
Expand Down Expand Up @@ -85,7 +89,10 @@ class ImgHasAltWalker extends Lint.RuleWalker {
// The targetTagNames is the list of tag names we want to check.
const targetTagNames: string[] = ['img'].concat(additionalTagNames);

if (!tagName || targetTagNames.indexOf(tagName) === -1) {
const isArea: boolean = node.tagName.getText() === 'area';
const isMapArea: boolean = isArea && node.parent.tagName.getText() === 'map';

if (!tagName || (targetTagNames.indexOf(tagName) === -1 && !isMapArea)) {
return;
}

Expand All @@ -98,7 +105,15 @@ class ImgHasAltWalker extends Lint.RuleWalker {
const attributes: { [propName: string]: ts.JsxAttribute } = getJsxAttributesFromJsxElement(node);
const altAttribute: ts.JsxAttribute = attributes[ALT_STRING];

if (!altAttribute) {
const isEmptyAlt: boolean = altAttribute && (isEmpty(altAttribute) || getStringLiteral(altAttribute) === '');

if (isMapArea && (!altAttribute || isEmptyAlt)) {
this.addFailureAt(
node.getStart(),
node.getWidth(),
getFailureMapAreaNoAlt()
);
} else if (!altAttribute) {
this.addFailureAt(
node.getStart(),
node.getWidth(),
Expand All @@ -109,7 +124,6 @@ class ImgHasAltWalker extends Lint.RuleWalker {
const roleAttributeValue = roleAttribute ? getStringLiteral(roleAttribute) : '';
const titleAttribute: ts.JsxAttribute = attributes[TITLE_STRING];
const isPresentationRole: boolean = !!String(roleAttributeValue).toLowerCase().match(/\bpresentation\b/);
const isEmptyAlt: boolean = isEmpty(altAttribute) || getStringLiteral(altAttribute) === '';
const isEmptyTitle: boolean = isEmpty(titleAttribute) || getStringLiteral(titleAttribute) === '';
const allowNonEmptyAltWithRolePresentation: boolean = options.length > 1
? options[1].allowNonEmptyAltWithRolePresentation
Expand Down