[new] - Spelling suggestions for aria-* props using edit distance (#52)

* [new] - Initial commit for error message suggestions.

This is purely based on spelling with an arbitrary maximum edit
distance threshold.

* [new] - Stretch out suggestion API to allow dictionary, threshold, and limit params.

* [fix] - bring in edit distance dependency and clean up suggestion API.

Author: beefancohen

package.json

@@ -40,6 +40,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "damerau-levenshtein": "^1.0.0",
     "object-assign": "^4.0.1"
   }
 }

src/rules/aria-props.js

@@ -9,8 +9,19 @@
 // ----------------------------------------------------------------------------
 
 import ariaAttributes from '../util/attributes/ARIA';
+import getSuggestion from '../util/getSuggestion';
 
-const errorMessage = name => `${name}: This attribute is an invalid ARIA attribute.`;
+const errorMessage = name => {
+  const dictionary = Object.keys(ariaAttributes).map(aria => aria.toLowerCase());
+  const suggestions = getSuggestion(name, dictionary);
+  const message = `${name}: This attribute is an invalid ARIA attribute.`;
+
+  if (suggestions.length > 0) {
+    return `${message} Did you mean to use ${suggestions}?`;
+  }
+
+  return message;
+};
 
 module.exports = context => ({
   JSXAttribute: attribute => {

src/util/getSuggestion.js

@@ -0,0 +1,23 @@
+'use strict';
+
+import editDistance from 'damerau-levenshtein';
+
+
+// Minimum edit distance to be considered a good suggestion.
+const THRESHOLD = 2;
+
+/**
+ * Returns an array of suggestions given a word and a dictionary and limit of suggestions
+ * to return.
+ */
+export default function getSuggestion(word, dictionary = [], limit = 2) {
+  const distances = dictionary.reduce((suggestions, dictionaryWord) => {
+    suggestions[dictionaryWord] = editDistance(word.toUpperCase(), dictionaryWord.toUpperCase()).steps;
+    return suggestions;
+  }, {});
+
+  return Object.keys(distances)
+    .filter(suggestion => distances[suggestion] <= THRESHOLD)
+    .sort((a, b) => distances[a] - distances[b]) // Sort by distance
+    .slice(0, limit);
+}

tests/src/rules/aria-props.js

@@ -10,6 +10,8 @@
 // -----------------------------------------------------------------------------
 
 import rule from '../../../src/rules/aria-props';
+import ariaAttributes from '../../../src/util/attributes/ARIA';
+import getSuggestion from '../../../src/util/getSuggestion';
 import { RuleTester } from 'eslint';
 
 const parserOptions = {
@@ -25,12 +27,23 @@ const parserOptions = {
 
 const ruleTester = new RuleTester();
 
-const errorMessage = name => ({
-  message: `${name}: This attribute is an invalid ARIA attribute.`,
-  type: 'JSXAttribute'
-});
+const errorMessage = name => {
+  const dictionary = Object.keys(ariaAttributes).map(aria => aria.toLowerCase());
+  const suggestions = getSuggestion(name, dictionary);
+  const message = `${name}: This attribute is an invalid ARIA attribute.`;
 
-import ariaAttributes from '../../../src/util/attributes/ARIA';
+  if (suggestions.length > 0) {
+    return {
+      type: 'JSXAttribute',
+      message: `${message} Did you mean to use ${suggestions}?`
+    };
+  }
+
+  return {
+    type: 'JSXAttribute',
+    message
+  };
+};
 
 // Create basic test cases using all valid role types.
 const basicValidityTests = Object.keys(ariaAttributes).map(prop => ({

tests/src/util/getSuggestion.js

@@ -0,0 +1,50 @@
+/* eslint-env mocha */
+'use strict';
+
+import assert from 'assert';
+import getSuggestion from '../../../src/util/getSuggestion';
+
+describe('spell check suggestion API', () => {
+  it('should return no suggestions given empty word and no dictionary', () => {
+    const word = '';
+    const expected = [];
+    const actual = getSuggestion(word);
+
+    assert.deepEqual(expected, actual);
+  });
+
+  it('should return no suggestions given real word and no dictionary', () => {
+    const word = 'foo';
+    const expected = [];
+    const actual = getSuggestion(word);
+
+    assert.deepEqual(expected, actual);
+  });
+
+  it('should return correct suggestion given real word and a dictionary', () => {
+    const word = 'fo';
+    const dictionary = [ 'foo', 'bar', 'baz' ];
+    const expected = [ 'foo' ];
+    const actual = getSuggestion(word, dictionary);
+
+    assert.deepEqual(expected, actual);
+  });
+
+  it('should return multiple correct suggestions given real word and a dictionary', () => {
+    const word = 'theer';
+    const dictionary = [ 'there', 'their', 'foo', 'bar' ];
+    const expected = [ 'their', 'there' ];
+    const actual = getSuggestion(word, dictionary);
+
+    assert.deepEqual(expected, actual);
+  });
+
+  it('should return one correct suggestion given real word and a dictionary and a limit of 1', () => {
+    const word = 'theer';
+    const dictionary = [ 'there', 'their', 'foo', 'bar' ];
+    const expected = [ 'their' ];
+    const actual = getSuggestion(word, dictionary, 1);
+
+    assert.deepEqual(expected, actual);
+  });
+});