From 6db8e1b6e0f7705b1bb0ec529a5d04f02e2a5225 Mon Sep 17 00:00:00 2001
From: Jacob Parish <jacob.parish.1@gmail.com>
Date: Wed, 4 Oct 2017 07:51:16 -0500
Subject: [PATCH] feat(a11y): Add ariaLabel option. - Removes old
 aria-labelledby logic

---
 README.md                     |  4 +--
 src/autocomplete/typeahead.js | 13 +---------
 test/unit/typeahead_spec.js   | 49 +++++++----------------------------
 3 files changed, 13 insertions(+), 53 deletions(-)

diff --git a/README.md b/README.md
index 3c46e1eb2..aa301293c 100644
--- 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
index b262a7f05..441ef5209 100644
--- 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
index 95cc22252..6a840b8e9 100644
--- 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();
     });
   });
 });