feat: add img-has-name rule

packages/acot-preset-wcag/docs/rules/img-has-name.md

@@ -0,0 +1,28 @@
+# img-has-name
+
+img element or img role MUST has name.
+
+> All non-text content that is presented to the user has a text alternative that serves the equivalent purpose
+
+[WCAG 2.1 - 1.1.1: Non-text Content](https://www.w3.org/TR/WCAG21/#non-text-content)
+
+## :white_check_mark: Correct
+
+```html
+<img src="https://placebear.com/350/250" alt="bear" />
+
+<svg role="img" aria-label="bear"></svg>
+```
+
+## :warning: Incorrect
+
+```html
+<img src="https://placebear.com/350/250" />
+```
+
+```html
+<div
+  role="img"
+  style="background: url(https://placebear.com/350/250); width: 350px; height: 250px;"
+></div>
+```

packages/acot-preset-wcag/src/rules/img-has-name.ts

@@ -0,0 +1,33 @@
+import { createRule } from '@acot/core';
+
+type Options = {};
+
+export default createRule<Options>({
+  type: 'contextual',
+  selector: 'aria/[role="img"]',
+  meta: {
+    tags: ['wcag21a', '1.1.1 Non-text Content'],
+    description: 'img element or img role MUST has name.',
+    recommended: true,
+  },
+
+  test: async (context, node) => {
+    try {
+      const name = await node.evaluate(async (el) => {
+        const ax = await (window as any).getComputedAccessibleNode(el);
+        return (ax?.name ?? '').trim();
+      });
+
+      context.debug('name: %s', name);
+
+      if (!name) {
+        await context.report({
+          node,
+          message: 'img element or img role MUST has name.',
+        });
+      }
+    } catch (e) {
+      context.debug('error: ', e);
+    }
+  },
+});

packages/acot-preset-wcag/src/rules/index.ts

@@ -3,10 +3,12 @@ import interactiveHasEnoughSize from './interactive-has-enough-size';
 import interactiveSupportsFocus from './interactive-supports-focus';
 import interactiveHasName from './interactive-has-name';
 import pageHasTitle from './page-has-title';
+import imgHasName from './img-has-name';
 
 export const rules: RuleRecord = {
   'interactive-has-enough-size': interactiveHasEnoughSize,
   'interactive-supports-focus': interactiveSupportsFocus,
   'interactive-has-name': interactiveHasName,
   'page-has-title': pageHasTitle,
+  'img-has-name': imgHasName,
 };