@arcaauth/eslint-plugin-jsx-a11y 6.10.2

package/__tests__/src/util/mayContainChildComponent-test.js

@@ -0,0 +1,219 @@
+import test from 'tape';
+
+import mayContainChildComponent from '../../../src/util/mayContainChildComponent';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+import JSXElementMock from '../../../__mocks__/JSXElementMock';
+import JSXExpressionContainerMock from '../../../__mocks__/JSXExpressionContainerMock';
+
+test('mayContainChildComponent', (t) => {
+  t.equal(
+    mayContainChildComponent(
+      JSXElementMock('div', [], [
+        JSXElementMock('div', [], [
+          JSXElementMock('span', [], []),
+          JSXElementMock('span', [], [
+            JSXElementMock('span', [], []),
+            JSXElementMock('span', [], [
+              JSXElementMock('span', [], []),
+            ]),
+          ]),
+        ]),
+        JSXElementMock('span', [], []),
+        JSXElementMock('img', [
+          JSXAttributeMock('src', 'some/path'),
+        ]),
+      ]),
+      'FancyComponent',
+      5,
+    ),
+    false,
+    'no FancyComponent returns false',
+  );
+
+  t.test('contains an indicated component', (st) => {
+    st.equal(
+      mayContainChildComponent(
+        JSXElementMock('div', [], [
+          JSXElementMock('input'),
+        ]),
+        'input',
+      ),
+      true,
+      'returns true',
+    );
+
+    st.equal(
+      mayContainChildComponent(
+        JSXElementMock('div', [], [
+          JSXElementMock('FancyComponent'),
+        ]),
+        'FancyComponent',
+      ),
+      true,
+      'returns true',
+    );
+
+    st.equal(
+      mayContainChildComponent(
+        JSXElementMock('div', [], [
+          JSXElementMock('div', [], [
+            JSXElementMock('FancyComponent'),
+          ]),
+        ]),
+        'FancyComponent',
+      ),
+      false,
+      'FancyComponent is outside of default depth, should return false',
+    );
+
+    st.equal(
+      mayContainChildComponent(
+        JSXElementMock('div', [], [
+          JSXElementMock('div', [], [
+            JSXElementMock('FancyComponent'),
+          ]),
+        ]),
+        'FancyComponent',
+        2,
+      ),
+      true,
+      'FancyComponent is inside of custom depth, should return true',
+    );
+
+    st.equal(
+      mayContainChildComponent(
+        JSXElementMock('div', [], [
+          JSXElementMock('div', [], [
+            JSXElementMock('span', [], []),
+            JSXElementMock('span', [], [
+              JSXElementMock('span', [], []),
+              JSXElementMock('span', [], [
+                JSXElementMock('span', [], [
+                  JSXElementMock('span', [], [
+                    JSXElementMock('FancyComponent'),
+                  ]),
+                ]),
+              ]),
+            ]),
+          ]),
+          JSXElementMock('span', [], []),
+          JSXElementMock('img', [
+            JSXAttributeMock('src', 'some/path'),
+          ]),
+        ]),
+        'FancyComponent',
+        6,
+      ),
+      true,
+      'deep nesting, returns true',
+    );
+
+    st.end();
+  });
+
+  t.equal(
+    mayContainChildComponent(
+      JSXElementMock('div', [], [
+        JSXExpressionContainerMock('mysteryBox'),
+      ]),
+      'FancyComponent',
+    ),
+    true,
+    'Intederminate situations + expression container children - returns true',
+  );
+
+  t.test('Glob name matching - component name contains question mark ? - match any single character', (st) => {
+    st.equal(
+      mayContainChildComponent(
+        JSXElementMock('div', [], [
+          JSXElementMock('FancyComponent'),
+        ]),
+        'Fanc?Co??onent',
+      ),
+      true,
+      'returns true',
+    );
+
+    st.equal(
+      mayContainChildComponent(
+        JSXElementMock('div', [], [
+          JSXElementMock('FancyComponent'),
+        ]),
+        'FancyComponent?',
+      ),
+      false,
+      'returns false',
+    );
+
+    st.test('component name contains asterisk * - match zero or more characters', (s2t) => {
+      s2t.equal(
+        mayContainChildComponent(
+          JSXElementMock('div', [], [
+            JSXElementMock('FancyComponent'),
+          ]),
+          'Fancy*',
+        ),
+        true,
+        'returns true',
+      );
+
+      s2t.equal(
+        mayContainChildComponent(
+          JSXElementMock('div', [], [
+            JSXElementMock('FancyComponent'),
+          ]),
+          '*Component',
+        ),
+        true,
+        'returns true',
+      );
+
+      s2t.equal(
+        mayContainChildComponent(
+          JSXElementMock('div', [], [
+            JSXElementMock('FancyComponent'),
+          ]),
+          'Fancy*C*t',
+        ),
+        true,
+        'returns true',
+      );
+
+      s2t.end();
+    });
+
+    st.end();
+  });
+
+  t.test('using a custom elementType function', (st) => {
+    st.equal(
+      mayContainChildComponent(
+        JSXElementMock('div', [], [
+          JSXElementMock('CustomInput'),
+        ]),
+        'input',
+        2,
+        () => 'input',
+      ),
+      true,
+      'returns true when the custom elementType returns the proper name',
+    );
+
+    st.equal(
+      mayContainChildComponent(
+        JSXElementMock('div', [], [
+          JSXElementMock('CustomInput'),
+        ]),
+        'input',
+        2,
+        () => 'button',
+      ),
+      false,
+      'returns false when the custom elementType returns a wrong name',
+    );
+
+    st.end();
+  });
+
+  t.end();
+});

package/__tests__/src/util/mayHaveAccessibleLabel-test.js

@@ -0,0 +1,256 @@
+import test from 'tape';
+
+import mayHaveAccessibleLabel from '../../../src/util/mayHaveAccessibleLabel';
+import JSXAttributeMock from '../../../__mocks__/JSXAttributeMock';
+import JSXElementMock from '../../../__mocks__/JSXElementMock';
+import JSXExpressionContainerMock from '../../../__mocks__/JSXExpressionContainerMock';
+import JSXSpreadAttributeMock from '../../../__mocks__/JSXSpreadAttributeMock';
+import JSXTextMock from '../../../__mocks__/JSXTextMock';
+import LiteralMock from '../../../__mocks__/LiteralMock';
+
+test('mayHaveAccessibleLabel', (t) => {
+  t.equal(
+    mayHaveAccessibleLabel(
+      JSXElementMock('div', [], [
+        JSXElementMock('div', [], [
+          JSXElementMock('span', [], []),
+          JSXElementMock('span', [], [
+            JSXElementMock('span', [], []),
+            JSXElementMock('span', [], [
+              JSXElementMock('span', [], []),
+            ]),
+          ]),
+        ]),
+        JSXElementMock('span', [], []),
+        JSXElementMock('img', [
+          JSXAttributeMock('src', 'some/path'),
+        ]),
+      ]),
+      5,
+    ),
+    false,
+    'no label returns false',
+  );
+
+  t.test('label via attributes', (st) => {
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [
+        JSXAttributeMock('aria-label', 'A delicate label'),
+      ], [])),
+      true,
+      'aria-label returns true',
+    );
+
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [
+        JSXAttributeMock('aria-label', ''),
+      ], [])),
+      false,
+      'aria-label without content returns false',
+    );
+
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [
+        JSXAttributeMock('aria-label', ' '),
+      ], [])),
+      false,
+      'aria-label with only spaces whitespace, should return false',
+    );
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [
+        JSXAttributeMock('aria-label', '\n'),
+      ], [])),
+      false,
+      'aria-label with only newline whitespace, should return false',
+    );
+
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [
+        JSXAttributeMock('aria-labelledby', 'elementId'),
+      ], [])),
+      true,
+      'aria-labelledby returns true',
+    );
+
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [
+        JSXAttributeMock('aria-labelledby', ''),
+      ], [])),
+      false,
+      'aria-labelledby without content returns false',
+    );
+
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [
+        JSXAttributeMock('aria-labelledby', 'elementId', true),
+      ], [])),
+      true,
+      'aria-labelledby with an expression container, should return true',
+    );
+
+    st.end();
+  });
+
+  t.test('label via custom label attribute', (st) => {
+    const customLabelProp = 'cowbell';
+
+    st.equal(
+      mayHaveAccessibleLabel(
+        JSXElementMock('div', [
+          JSXAttributeMock(customLabelProp, 'A delicate label'),
+        ], []),
+        1,
+        [customLabelProp],
+      ),
+      true,
+      'aria-label returns true',
+    );
+
+    st.end();
+  });
+
+  t.test('text label', (st) => {
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [], [
+        LiteralMock('A fancy label'),
+      ])),
+      true,
+      'Literal text, returns true',
+    );
+
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [], [
+        LiteralMock(' '),
+      ])),
+      false,
+      'Literal spaces whitespace, returns false',
+    );
+
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [], [
+        LiteralMock('\n'),
+      ])),
+      false,
+      'Literal newline whitespace, returns false',
+    );
+
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [], [
+        JSXTextMock('A fancy label'),
+      ])),
+      true,
+      'JSXText, returns true',
+    );
+
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [], [
+        JSXElementMock('div', [], [
+          JSXTextMock('A fancy label'),
+        ]),
+      ])),
+      false,
+      'label is outside of default depth, returns false',
+    );
+
+    st.equal(
+      mayHaveAccessibleLabel(
+        JSXElementMock('div', [], [
+          JSXElementMock('div', [], [
+            JSXTextMock('A fancy label'),
+          ]),
+        ]),
+        2,
+      ),
+      true,
+      'label is inside of custom depth, returns true',
+    );
+
+    st.equal(
+      mayHaveAccessibleLabel(
+        JSXElementMock('div', [], [
+          JSXElementMock('div', [], [
+            JSXElementMock('span', [], []),
+            JSXElementMock('span', [], [
+              JSXElementMock('span', [], []),
+              JSXElementMock('span', [], [
+                JSXElementMock('span', [], [
+                  JSXElementMock('span', [], [
+                    JSXTextMock('A fancy label'),
+                  ]),
+                ]),
+              ]),
+            ]),
+          ]),
+          JSXElementMock('span', [], []),
+          JSXElementMock('img', [
+            JSXAttributeMock('src', 'some/path'),
+          ]),
+        ]),
+        6,
+      ),
+      true,
+      'deep nesting, returns true',
+    );
+
+    st.end();
+  });
+
+  t.test('image content', (st) => {
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [], [
+        JSXElementMock('img', [
+          JSXAttributeMock('src', 'some/path'),
+        ]),
+      ])),
+      false,
+      'without alt, returns true',
+    );
+
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [], [
+        JSXElementMock('img', [
+          JSXAttributeMock('src', 'some/path'),
+          JSXAttributeMock('alt', 'A sensible label'),
+        ]),
+      ])),
+      true,
+      'with alt, returns true',
+    );
+
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [], [
+        JSXElementMock('img', [
+          JSXAttributeMock('src', 'some/path'),
+          JSXAttributeMock('aria-label', 'A sensible label'),
+        ]),
+      ])),
+      true,
+      'with aria-label, returns true',
+    );
+
+    st.end();
+  });
+
+  t.test('Intederminate situations', (st) => {
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [], [
+        JSXExpressionContainerMock('mysteryBox'),
+      ])),
+      true,
+      'expression container children, returns true',
+    );
+
+    st.equal(
+      mayHaveAccessibleLabel(JSXElementMock('div', [
+        JSXAttributeMock('style', 'some-junk'),
+        JSXSpreadAttributeMock('props'),
+      ], [])),
+      true,
+      'spread operator in attributes, returns true',
+    );
+
+    st.end();
+  });
+
+  t.end();
+});

package/__tests__/src/util/parserOptionsMapper-test.js

@@ -0,0 +1,93 @@
+import { version as eslintVersion } from 'eslint/package.json';
+import test from 'tape';
+import semver from 'semver';
+
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+
+const usingLegacy = semver.major(eslintVersion) < 9;
+
+test('parserOptionsMapper', (t) => {
+  const expectedResult = usingLegacy
+    ? {
+      code: '<div />',
+      errors: [],
+      options: {},
+      parserOptions: {
+        ecmaVersion: 2018,
+        ecmaFeatures: {
+          experimentalObjectRestSpread: true,
+          jsx: true,
+        },
+      },
+      settings: {},
+    }
+    : {
+      code: '<div />',
+      errors: [],
+      options: {},
+      languageOptions: {
+        ecmaVersion: 'latest',
+        parserOptions: {
+          ecmaFeatures: {
+            experimentalObjectRestSpread: true,
+            jsx: true,
+          },
+        },
+      },
+      settings: {},
+    };
+
+  t.deepEqual(
+    parserOptionsMapper({
+      code: '<div />',
+      errors: [],
+      options: {},
+    }),
+    expectedResult,
+    'returns a test case object',
+  );
+
+  const expectedResult2 = usingLegacy
+    ? {
+      code: '<div />',
+      errors: [],
+      options: {},
+      parserOptions: {
+        ecmaVersion: 5,
+        ecmaFeatures: {
+          experimentalObjectRestSpread: true,
+          jsx: true,
+        },
+      },
+      settings: {},
+    }
+    : {
+      code: '<div />',
+      errors: [],
+      options: {},
+      languageOptions: {
+        ecmaVersion: 5,
+        parserOptions: {
+          ecmaFeatures: {
+            experimentalObjectRestSpread: true,
+            jsx: true,
+          },
+        },
+      },
+      settings: {},
+    };
+  t.deepEqual(
+    parserOptionsMapper({
+      code: '<div />',
+      errors: [],
+      options: {},
+      languageOptions: {
+        ecmaVersion: 5,
+      },
+    }),
+    expectedResult2,
+    'allows for overriding parserOptions',
+  );
+
+  t.end();
+});

package/__tests__/src/util/schemas-test.js

@@ -0,0 +1,35 @@
+import test from 'tape';
+
+import { generateObjSchema, arraySchema, enumArraySchema } from '../../../src/util/schemas';
+
+test('schemas', (t) => {
+  t.test('should generate an object schema with correct properties', (st) => {
+    const schema = generateObjSchema({
+      foo: 'bar',
+      baz: arraySchema,
+    });
+    const properties = schema.properties || {};
+
+    st.deepEqual(properties.foo, properties.foo, 'bar');
+    st.deepEqual(properties.baz.type, 'array');
+
+    st.end();
+  });
+
+  t.deepEqual(
+    enumArraySchema(),
+    {
+      additionalItems: false,
+      items: {
+        enum: [],
+        type: 'string',
+      },
+      minItems: 0,
+      type: 'array',
+      uniqueItems: true,
+    },
+    'enumArraySchema works with no arguments',
+  );
+
+  t.end();
+});

package/docs/rules/accessible-emoji.md

@@ -0,0 +1,30 @@
+# jsx-a11y/accessible-emoji
+
+❌ This rule is deprecated.
+
+<!-- end auto-generated rule header -->
+
+Emoji have become a common way of communicating content to the end user. To a person using a screen reader, however, they may not be aware that this content is there at all. By wrapping the emoji in a `<span>`, giving it the `role="img"`, and providing a useful description in `aria-label`, the screen reader will treat the emoji as an image in the accessibility tree with an accessible name for the end user.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<span role="img" aria-label="Snowman">&#9731;</span>
+<span role="img" aria-label="Panda">🐼</span>
+<span role="img" aria-labelledby="panda1">🐼</span>
+```
+
+### Fail
+```jsx
+<span>🐼</span>
+<i role="img" aria-label="Panda">🐼</i>
+```
+
+## Accessibility guidelines
+- [WCAG 1.1.1](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html)
+
+### Resources
+- [Léonie Watson, Accessible Emoji](https://tink.uk/accessible-emoji/)