11920038861

Committed 19 Nov 2024 07:10PM UTC coverage: 97.186% (-0.4%) from 97.623%

Build # 11920038861

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #135 from microsoft/user/aubreyquinn/bugFix

User/aubreyquinn/bug fix

Run Details

489 of 513 branches covered (95.32%)

Branch coverage included in aggregate %.

12 of 12 new or added lines in 4 files covered. (100.0%)

4 existing lines in 1 file now uncovered.

789 of 802 relevant lines covered (98.38%)

39.69 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

86.96

/lib/util/hasLabelledChildImage.ts

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import { flattenChildren } from "./flattenChildren";
import { TSESTree } from "@typescript-eslint/types";
import { hasProp, getPropValue, getProp } from "jsx-ast-utils";
import { hasNonEmptyProp } from "./hasNonEmptyProp";
import { fluentImageComponents, imageDomNodes } from "../applicableComponents/imageBasedComponents";
import { JSXOpeningElement } from "estree-jsx";

const mergedImageComponents = [...fluentImageComponents, ...imageDomNodes];

/**
 * Checks if a JSX element name is a JSXIdentifier and matches a component name.
 * @param name JSXTagNameExpression
 * @returns boolean
 */
const isJSXIdentifierWithName = (name: TSESTree.JSXTagNameExpression, validNames: string[]): boolean => {
    return name.type === "JSXIdentifier" && validNames.includes(name.name);
};

/**
 * Determines if a component has an accessible image as a child.
 * @param {*} node JSXElement
 * @returns boolean
 */
const hasLabelledChildImage = (node: TSESTree.JSXElement): boolean => {
    if (!node.children || node.children.length === 0) {
        return false;
    }

    return flattenChildren(node).some(child => {
        if (child.type === "JSXElement" && isJSXIdentifierWithName(child.openingElement.name, mergedImageComponents)) {
            const attributes = child.openingElement.attributes;
            return !isImageHidden(attributes) && hasAccessibilityAttributes(attributes);
        }
        return false;
    });
};

/**
 * Checks if an image element has any of the attributes indicating it is accessible.
 * @param {*} attributes JSX attributes of the image element
 * @returns boolean
 */
const hasAccessibilityAttributes = (attributes: TSESTree.JSXOpeningElement["attributes"]): boolean => {
    return (
        hasNonEmptyProp(attributes, "title") ||
        hasNonEmptyProp(attributes, "alt") ||
        hasNonEmptyProp(attributes, "aria-label") ||
        hasNonEmptyProp(attributes, "aria-labelledby")
    );
};

/**
 * Checks if an image element is marked as hidden using `aria-hidden` or has an empty `alt` attribute.
 * @param {*} attributes JSX attributes of the image element
 * @returns boolean
 */
const isImageHidden = (attributes: TSESTree.JSXOpeningElement["attributes"]): boolean => {
    // Check if the image has the `aria-hidden` attribute
    if (hasProp(attributes as unknown as JSXOpeningElement["attributes"], "aria-hidden")) {
        return true;
    }

    // Check if the image has an `aria-label` or `aria-labelledby` attribute with a non-empty value
    const ariaLabelProp = getProp(attributes as unknown as JSXOpeningElement["attributes"], "aria-label");
    const ariaLabelledbyProp = getProp(attributes as unknown as JSXOpeningElement["attributes"], "aria-labelledby");

    if (ariaLabelProp) {
        const ariaLabelValue = getPropValue(ariaLabelProp);
        if (ariaLabelValue) {
            return false; // If `aria-label` is present and has a value, the image is not hidden
        }
    }

    if (ariaLabelledbyProp) {
        const ariaLabelledbyValue = getPropValue(ariaLabelledbyProp);
        if (ariaLabelledbyValue) {
            return false; // If `aria-labelledby` is present and has a value, the image is not hidden
        }
    }

    // Check if the image has an `alt` attribute and return true if the `alt` value is falsy
    const altProp = getProp(attributes as unknown as JSXOpeningElement["attributes"], "alt");
    if (altProp) {
        const altValue = getPropValue(altProp);
        return !altValue; // Returns true if `altValue` is falsy (e.g., empty string, null, or undefined)
    }

    return true; // If neither `alt`, `aria-label`, nor `aria-labelledby` is present, consider the image hidden
};

export { hasLabelledChildImage, isImageHidden, hasAccessibilityAttributes, isJSXIdentifierWithName };

1	// Copyright (c) Microsoft Corporation.
2	// Licensed under the MIT License.
3
4	import { flattenChildren } from "./flattenChildren";	2✔
5	import { TSESTree } from "@typescript-eslint/types";	2✔
6	import { hasProp, getPropValue, getProp } from "jsx-ast-utils";	2✔
7	import { hasNonEmptyProp } from "./hasNonEmptyProp";	2✔
8	import { fluentImageComponents, imageDomNodes } from "../applicableComponents/imageBasedComponents";	2✔
9	import { JSXOpeningElement } from "estree-jsx";	2✔
10		2✔
11	const mergedImageComponents = [...fluentImageComponents, ...imageDomNodes];
12
13	/**
14	* Checks if a JSX element name is a JSXIdentifier and matches a component name.
15	* @param name JSXTagNameExpression
16	* @returns boolean	2✔
17	*/	55✔
18	const isJSXIdentifierWithName = (name: TSESTree.JSXTagNameExpression, validNames: string[]): boolean => {
19	return name.type === "JSXIdentifier" && validNames.includes(name.name);	2✔
20	};
21
22	/**
23	* Determines if a component has an accessible image as a child.
24	* @param {*} node JSXElement
25	* @returns boolean	2✔
26	*/	50✔
27	const hasLabelledChildImage = (node: TSESTree.JSXElement): boolean => {	5✔
28	if (!node.children \|\| node.children.length === 0) {
29	return false;	45✔
30	}	53!
31		53✔
32	return flattenChildren(node).some(child => {	53✔
33	if (child.type === "JSXElement" && isJSXIdentifierWithName(child.openingElement.name, mergedImageComponents)) {
UNCOV 34	const attributes = child.openingElement.attributes;	×
35	return !isImageHidden(attributes) && hasAccessibilityAttributes(attributes);
36	}
37	return false;	2✔
38	});
39	};
40
41	/**
42	* Checks if an image element has any of the attributes indicating it is accessible.
43	* @param {*} attributes JSX attributes of the image element	2✔
44	* @returns boolean	19✔
45	*/
46	const hasAccessibilityAttributes = (attributes: TSESTree.JSXOpeningElement["attributes"]): boolean => {
47	return (
48	hasNonEmptyProp(attributes, "title") \|\|
49	hasNonEmptyProp(attributes, "alt") \|\|	2✔
50	hasNonEmptyProp(attributes, "aria-label") \|\|
51	hasNonEmptyProp(attributes, "aria-labelledby")
52	);
53	};
54
55	/**	2✔
56	* Checks if an image element is marked as hidden using `aria-hidden` or has an empty `alt` attribute.
57	* @param {*} attributes JSX attributes of the image element	56✔
58	* @returns boolean	5✔
59	*/
60	const isImageHidden = (attributes: TSESTree.JSXOpeningElement["attributes"]): boolean => {
61	// Check if the image has the `aria-hidden` attribute	51✔
62	if (hasProp(attributes as unknown as JSXOpeningElement["attributes"], "aria-hidden")) {	51✔
63	return true;	51✔
64	}	4✔
65		4!
66	// Check if the image has an `aria-label` or `aria-labelledby` attribute with a non-empty value	4✔
67	const ariaLabelProp = getProp(attributes as unknown as JSXOpeningElement["attributes"], "aria-label");
68	const ariaLabelledbyProp = getProp(attributes as unknown as JSXOpeningElement["attributes"], "aria-labelledby");
69		47!
UNCOV 70	if (ariaLabelProp) {	×
UNCOV 71	const ariaLabelValue = getPropValue(ariaLabelProp);	×
UNCOV 72	if (ariaLabelValue) {	×
73	return false; // If `aria-label` is present and has a value, the image is not hidden
74	}
75	}
76		47✔
77	if (ariaLabelledbyProp) {	47✔
78	const ariaLabelledbyValue = getPropValue(ariaLabelledbyProp);	15✔
79	if (ariaLabelledbyValue) {	15✔
80	return false; // If `aria-labelledby` is present and has a value, the image is not hidden
81	}	32✔
82	}
83		2✔
84	// Check if the image has an `alt` attribute and return true if the `alt` value is falsy
85	const altProp = getProp(attributes as unknown as JSXOpeningElement["attributes"], "alt");
86	if (altProp) {
87	const altValue = getPropValue(altProp);
88	return !altValue; // Returns true if `altValue` is falsy (e.g., empty string, null, or undefined)
89	}
90
91	return true; // If neither `alt`, `aria-label`, nor `aria-labelledby` is present, consider the image hidden
92	};
93
94	export { hasLabelledChildImage, isImageHidden, hasAccessibilityAttributes, isJSXIdentifierWithName };

microsoft / eslint-plugin-fluentui-jsx-a11y / 11920038861

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous