[New] anchor-ambiguous-text: ignore punctuation

Author: mattxwang

__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] },

__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',

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

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();
 }
 
 /**