feat(acot-preset-wcag): add link-has-name

packages/acot-preset-wcag/README.md

@@ -43,6 +43,7 @@ You can also enable all the recommended rules for our preset. Add `preset:@acot/
 | [`@acot/wcag/interactive-has-enough-size`](./docs/rules/interactive-has-enough-size.md) | The size of the target for pointer inputs is at least 44 by 44 CSS pixels. | :heavy_check_mark: |
 | [`@acot/wcag/interactive-has-name`](./docs/rules/interactive-has-name.md)               | Interactive elements MUST has name.                                        | :heavy_check_mark: |
 | [`@acot/wcag/interactive-supports-focus`](./docs/rules/interactive-supports-focus.md)   | _T.B.A_                                                                    | :heavy_check_mark: |
+| [`@acot/wcag/link-has-name`](./docs/rules/link-has-name.md)                             | Link MUST has name.                                                        | :heavy_check_mark: |
 | [`@acot/wcag/page-has-title`](./docs/rules/page-has-title.md)                           | Web pages have titles that describe topic or purpose. WCAG 2.1 - 2.4.2.    | :heavy_check_mark: |
 | [`@acot/wcag/page-has-valid-lang`](./docs/rules/page-has-valid-lang.md)                 | The `html` element MUST has a valid lang attribute.                        | :heavy_check_mark: |
 
@@ -138,7 +139,7 @@ You can also enable all the recommended rules for our preset. Add `preset:@acot/
 | 2.4.1 Bypass Blocks             | -                                                                             |
 | 2.4.2 Page Titled               | [@acot/wcag/page-has-title](./docs/rules/page-has-title.md)                   |
 | 2.4.3 Focus Order               | [@acot/wcag/dialog-focus](./docs/rules/dialog-focus.md)                       |
-| 2.4.4 Link Purpose (In Context) | -                                                                             |
+| 2.4.4 Link Purpose (In Context) | [@acot/wcag/link-has-name](./docs/rules/link-has-name.md)-                    |
 | 2.4.5 Multiple Ways             | -                                                                             |
 | 2.4.6 Headings and Labels       | -                                                                             |
 | 2.4.7 Focus Visible             | [@acot/wcag/focusable-has-indicator](./docs/rules/focusable-has-indicator.md) |
@@ -195,11 +196,11 @@ You can also enable all the recommended rules for our preset. Add `preset:@acot/
 
 #### 4.1 Compatible
 
-| Success criteria        | acot rules |
-| ----------------------- | ---------- |
-| 4.1.1 Parsing           | -          |
-| 4.1.2 Name, Role, Value | -          |
-| 4.1.3 Status Messages   | -          |
+| Success criteria        | acot rules                                                |
+| ----------------------- | --------------------------------------------------------- |
+| 4.1.1 Parsing           | -                                                         |
+| 4.1.2 Name, Role, Value | [@acot/wcag/link-has-name](./docs/rules/link-has-name.md) |
+| 4.1.3 Status Messages   | -                                                         |
 
 ## Concept
 

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

@@ -0,0 +1,31 @@
+# link-has-name
+
+Link MUST has name.
+
+> The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
+
+[WCAG 2.1 - 2.4.4 Link Purpose (In Context)](https://www.w3.org/TR/WCAG21/#link-purpose-in-context)
+
+> For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
+
+[WCAG 2.1 - 4.1.2 Name, Role, Value](https://www.w3.org/TR/WCAG21/#name-role-value)
+
+## :white_check_mark: Correct
+
+```html
+<a href="https://www.w3.org/TR/WCAG21/#name-role-value"
+  >WCAG 2.1 - 4.1.2 Name, Role, Value</a
+>
+```
+
+## :warning: Incorrect
+
+```html
+<a href="https://www.w3.org/TR/WCAG21/#name-role-value"></a>
+
+<style>
+  a::after {
+    content: 'WCAG 2.1 - 4.1.2 Name, Role, Value';
+  }
+</style>
+```

packages/acot-preset-wcag/src/configs/recommended.ts

@@ -9,6 +9,7 @@ const config: Config = {
     '@acot/wcag/interactive-has-enough-size': 'warn',
     '@acot/wcag/interactive-has-name': 'error',
     '@acot/wcag/interactive-supports-focus': 'error',
+    '@acot/wcag/link-has-name': 'error',
     '@acot/wcag/page-has-title': 'error',
     '@acot/wcag/page-has-valid-lang': 'error',
   },

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

@@ -7,6 +7,7 @@ import imgHasName from './img-has-name';
 import dialogFocus from './dialog-focus';
 import pageHasValidLang from './page-has-valid-lang';
 import focusableHasIndicator from './focusable-has-indicator';
+import linkHasName from './link-has-name';
 
 export const rules: RuleRecord = {
   'interactive-has-enough-size': interactiveHasEnoughSize,
@@ -17,4 +18,5 @@ export const rules: RuleRecord = {
   'img-has-name': imgHasName,
   'dialog-focus': dialogFocus,
   'focusable-has-indicator': focusableHasIndicator,
+  'link-has-name': linkHasName,
 };

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

@@ -0,0 +1,37 @@
+import { createRule } from '@acot/core';
+
+type Options = {};
+
+export default createRule<Options>({
+  type: 'contextual',
+  selector: 'aria/[role="link"]',
+  immutable: true,
+  meta: {
+    tags: [
+      'wcag21a',
+      '2.4.4 Link Purpose (In Context)',
+      '4.1.2 Name, Role, Value',
+    ],
+    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: 'Link MUST has name.',
+        });
+      }
+    } catch (e) {
+      context.debug('error: ', e);
+    }
+  },
+});