feat(a11y): Add ariaLabel option.

- Removes old aria-labelledby logic
algolia · Oct 4, 2017 · 6db8e1b · 6db8e1b
1 parent bfc207a
commit 6db8e1b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -316,7 +316,7 @@ When initializing an autocomplete, there are a number of options you can configu
 * `keyboardShortcuts` - Array of shortcut that will focus the input. For example if you want to bind `s` and `/`
  you can specify: `keyboardShortcuts: ['s', '/']`
 
-* `ariaLabelledBy` - An optional id to use for the `aria-labelledby` attribute. Specify `false` to exclude the attribute. Defaults to using the `placeholder` as the label if a `placeholder` is specified.
+* `ariaLabel` - An optional string that will populate the `aria-label` attribute.
 
 ```html
 <script type="text/template" id="my-custom-menu-template">
@@ -776,7 +776,7 @@ Autocomplete.js is accessible to screen readers, and here's how to test how most
 1. Type a search query
 1. Use the arrow keys to navigate through the results
 
-✔ SUCCESS: results are read (not necessarily in sync with the visually selected cursor)
+✔ SUCCESS: results are read (not necessarily in sync with the visually selected cursor)  
 𐄂 FAIL: no text is read or the screen reader keeps reading the typed query
 
 #### Recommended testing platforms

diff --git a/src/autocomplete/typeahead.js b/src/autocomplete/typeahead.js
@@ -544,17 +544,6 @@ function buildDom(options) {
     type: $input.attr('type')
   });
 
-  // Use ariaLabelledBy option if specified
-  var ariaLabelledBy = options.ariaLabelledBy;
-  if (ariaLabelledBy === false) {
-    // If it is explicity false, null the field
-    ariaLabelledBy = null;
-  } else if (!ariaLabelledBy && $input.attr('placeholder')) {
-    // If a placeholder is set, label this field with itself, which in this case,
-    // is an explicit pointer to use the placeholder attribute value.
-    ariaLabelledBy = $input.attr('id');
-  }
-
   $input
     .addClass(_.className(options.cssClasses.prefix, options.cssClasses.input, true))
     .attr({
@@ -573,7 +562,7 @@ function buildDom(options) {
         options.datasets[0] && options.datasets[0].displayKey ? 'both' : 'list'),
       // Indicates whether the dropdown it controls is currently expanded or collapsed
       'aria-expanded': 'false',
-      'aria-labelledby': ariaLabelledBy,
+      'aria-label': options.ariaLabel,
       // Explicitly point to the listbox,
       // which is a list of suggestions (aka options)
       'aria-owns': options.listboxId

diff --git a/test/unit/typeahead_spec.js b/test/unit/typeahead_spec.js
@@ -884,55 +884,26 @@ describe('Typeahead', function() {
     });
   });
 
-  describe('when ariaLabelledBy is set', function() {
+  describe('when aria-label is set', function() {
     beforeEach(function() {
       this.view.destroy();
     });
 
-    describe('when set to a specific id', function() {
-      it('should set aria-labelledby to the specified id', function() {
-        this.view = new Typeahead({
-          input: this.$input,
-          ariaLabelledBy: 'custom-id-attr'
-        });
-
-        expect(this.$input.attr('aria-labelledby')).toBe('custom-id-attr');
+    it('should set aria-label to the specified string', function() {
+      this.view = new Typeahead({
+        input: this.$input,
+        ariaLabel: 'custom-aria-label'
       });
-    });
 
-    describe('when set to false', function() {
-      it('should set aria-labelledby to null', function() {
-        this.view = new Typeahead({
-          input: this.$input,
-          ariaLabelledBy: false
-        });
-
-        expect(this.$input.attr('aria-labelledby')).toBeUndefined();
-      });
+      expect(this.$input.attr('aria-label')).toBe('custom-aria-label');
     });
 
-    describe('when not set', function() {
-      beforeEach(function() {
-        this.$input.attr('id', 'custom-input-id');
-      });
-
-      it('should set aria-labelledby to null if no placeholder specified', function() {
-        this.view = new Typeahead({
-          input: this.$input
-        });
-
-        expect(this.$input.attr('aria-labelledby')).toBeUndefined();
+    it('should not set an aria-label if no value is specified', function() {
+      this.view = new Typeahead({
+        input: this.$input
       });
 
-      it('should set aria-labelledby to the input id if a placeholder is specified', function() {
-        this.$input.attr('placeholder', 'custom placeholder');
-
-        this.view = new Typeahead({
-          input: this.$input
-        });
-
-        expect(this.$input.attr('aria-labelledby')).toBe('custom-input-id');
-      });
+      expect(this.$input.attr('aria-label')).toBeUndefined();
     });
   });
 });