Set title for single select placeholder (select2#5973)

This sets the title of the rendered selection for a placeholder when
it is displayed within a single select. This is not necessary for a
multiple select because the placeholder is set on the search box
which will properly convey the value of it and meets ARIA guidelines.

Because single select boxes currently use a `textbox` role to convey
the keyboard accessibility of the textbox area, and because that role
is currently required in ARIA 1.1, it must be properly labelled using
the `title`, `aria-label`, or `aria-labelledby` attribute. This
currently happens for single selects without a placeholder, and
single selects with a placeholder but with an active selection,
because the `title` attribute is set to the title of the active
selection. Because it only currently sets it for the active selection,
this caused an edge case specific to placeholders for single selects
where the selection was not properly labelled.

The placeholder title follows the same rules for setting the attribute
value as for the regular single select selection, except placeholders
will also fall back to just using the text value of the placeholder
element in the event that the `title` and `text` attributes are not
specified on the placeholder data option.

Author: kevin-brown

src/js/select2/selection/placeholder.js

@@ -25,6 +25,15 @@ define([
     $placeholder[0].classList.add('select2-selection__placeholder');
     $placeholder[0].classList.remove('select2-selection__choice');
 
+    var placeholderTitle = placeholder.title ||
+      placeholder.text ||
+      $placeholder.text();
+
+    this.$selection.find('.select2-selection__rendered').attr(
+      'title',
+      placeholderTitle
+    );
+
     return $placeholder;
   };
 

tests/selection/placeholder-tests.js

@@ -44,7 +44,6 @@ test('normalizing placeholder gives object for string', function (assert) {
   assert.equal(normalized.text, 'placeholder');
 });
 
-
 test('text is shown for placeholder option on single', function (assert) {
   var selection = new SinglePlaceholder(
     $('#qunit-fixture .single'),
@@ -60,6 +59,50 @@ test('text is shown for placeholder option on single', function (assert) {
   assert.equal($selection.text(), 'This is the placeholder');
 });
 
+test('title is set for placeholder option on single', function (assert) {
+  var selection = new SinglePlaceholder(
+    $('#qunit-fixture .single'),
+    placeholderOptions
+  );
+
+  var $selection = selection.render();
+
+  selection.update([{
+    id: 'placeholder'
+  }]);
+
+  assert.equal(
+    $selection.find('.select2-selection__rendered').attr('title'),
+    'This is the placeholder'
+  );
+});
+
+test('title is used for placeholder option on single', function (assert) {
+  var placeholderTitleOptions = new Options({
+    placeholder: {
+      id: 'placeholder',
+      text: 'This is the placeholder',
+      title: 'This is the placeholder title'
+    }
+  });
+
+  var selection = new SinglePlaceholder(
+    $('#qunit-fixture .single'),
+    placeholderTitleOptions
+  );
+
+  var $selection = selection.render();
+
+  selection.update([{
+    id: 'placeholder'
+  }]);
+
+  assert.equal(
+    $selection.find('.select2-selection__rendered').attr('title'),
+    'This is the placeholder title'
+  );
+});
+
 test('placeholder is shown when no options are selected', function (assert) {
   var selection = new SinglePlaceholder(
     $('#qunit-fixture .multiple'),