[New] anchor-ambiguous-text: ignore punctuation

ljharb · Aug 24, 2022 · bbae2c4 · bbae2c4
1 parent 8b889bf
commit bbae2c4
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 4 deletions.
diff --git a/__tests__/src/rules/anchor-ambiguous-text-test.js b/__tests__/src/rules/anchor-ambiguous-text-test.js
@@ -75,6 +75,13 @@ ruleTester.run('anchor-ambiguous-text', rule, {
     { code: '<a>HERE</a>;', errors: [expectedError] },
     { code: '<a>click here</a>;', errors: [expectedError] },
     { code: '<a>learn more</a>;', errors: [expectedError] },
+    { code: '<a>learn      more</a>;', errors: [expectedError] },
+    { code: '<a>learn more.</a>;', errors: [expectedError] },
+    { code: '<a>learn more?</a>;', errors: [expectedError] },
+    { code: '<a>learn more,</a>;', errors: [expectedError] },
+    { code: '<a>learn more!</a>;', errors: [expectedError] },
+    { code: '<a>learn more;</a>;', errors: [expectedError] },
+    { code: '<a>learn more:</a>;', errors: [expectedError] },
     { code: '<a>link</a>;', errors: [expectedError] },
     { code: '<a>a link</a>;', errors: [expectedError] },
     { code: '<a aria-label="click here">something</a>;', errors: [expectedError] },

diff --git a/__tests__/src/util/getAccessibleChildText-test.js b/__tests__/src/util/getAccessibleChildText-test.js
@@ -64,6 +64,30 @@ describe('getAccessibleChildText', () => {
     ), elementType)).toBe('bar');
   });
 
+  it('returns trimmed literal value for JSXText child', () => {
+    expect(getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [{ type: 'Literal', value: ' bar   ' }],
+    ), elementType)).toBe('bar');
+  });
+
+  it('returns space-collapsed literal value for JSXText child', () => {
+    expect(getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [{ type: 'Literal', value: 'foo         bar' }],
+    ), elementType)).toBe('foo bar');
+  });
+
+  it('returns punctuation-stripped literal value for JSXText child', () => {
+    expect(getAccessibleChildText(JSXElementMock(
+      'a',
+      [],
+      [{ type: 'Literal', value: 'foo, bar. baz? foo; bar:' }],
+    ), elementType)).toBe('foo bar baz foo bar');
+  });
+
   it('returns recursive value for JSXElement child', () => {
     expect(getAccessibleChildText(JSXElementMock(
       'a',

diff --git a/docs/rules/anchor-ambiguous-text.md b/docs/rules/anchor-ambiguous-text.md
@@ -30,7 +30,7 @@ The logic to calculate the inner text of an anchor is as follows:
 
 Note that this rule still disallows ambiguous `aria-label` or `alt` values.
 
-Note that this rule is case-insensitive and trims whitespace. It only looks for **exact matches**.
+Note that this rule is case-insensitive, trims whitespace, and ignores certain punctuation (`[,.?¿!‽¡;:]`). It only looks for **exact matches**.
 
 ### Succeed
 ```jsx
@@ -43,8 +43,15 @@ Note that this rule is case-insensitive and trims whitespace. It only looks for
 ```jsx
 <a>here</a>
 <a>HERE</a>
-<a>click here</a>
 <a>link</a>
+<a>click here</a>
+<a>learn more</a>
+<a>learn more.</a>
+<a>learn more,</a>
+<a>learn more?</a>
+<a>learn more!</a>
+<a>learn more:</a>
+<a>learn more;</a>
 <a>a link</a>
 <a> a link </a>
 <a><span> click </span> here</a> // goes through element children

diff --git a/src/util/getAccessibleChildText.js b/src/util/getAccessibleChildText.js
@@ -10,10 +10,14 @@ import isHiddenFromScreenReader from './isHiddenFromScreenReader';
  * Returns a new "standardized" string: all whitespace is collapsed to one space,
  * and the string is lowercase
  * @param {string} input
- * @returns lowercase, single-spaced, trimmed string
+ * @returns lowercase, single-spaced, punctuation-stripped, trimmed string
  */
 function standardizeSpaceAndCase(input: string): string {
-  return input.trim().replace(/\s\s+/g, ' ').toLowerCase();
+  return input
+    .trim()
+    .replace(/[,.?¿!‽¡;:]/g, '') // strip punctuation
+    .replace(/\s\s+/g, ' ') // collapse spaces
+    .toLowerCase();
 }
 
 /**