Merge pull request #16 from openculinary/select2-searchbox-labels

Workaround: jquery-apply aria-label to searchboxes
openculinary · Nov 30, 2019 · 10700aa · 10700aa
2 parents 5d29aba + ca6da16
commit 10700aa
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/src/app/autosuggest.js b/src/app/autosuggest.js
@@ -3,7 +3,7 @@ import 'select2';
 
 import 'select2/dist/css/select2.css';
 
-function bindEquipmentInput(element, placeholder) {
+function bindEquipmentInput(element, label, placeholder) {
   $(element).select2({
     ajax: {
       url: 'api/equipment',
@@ -20,9 +20,12 @@ function bindEquipmentInput(element, placeholder) {
     placeholder: placeholder,
     selectOnClose: true
   });
+
+  // TODO: Revisit once https://github.com/select2/select2/issues/3744 is handled
+  $(element).siblings('.select2').find('input[type=search]').attr('aria-label', label);
 }
 
-function bindIngredientInput(element, placeholder) {
+function bindIngredientInput(element, label, placeholder) {
   $(element).select2({
     ajax: {
       url: 'api/ingredients',
@@ -39,12 +42,15 @@ function bindIngredientInput(element, placeholder) {
     placeholder: placeholder,
     selectOnClose: true
   });
+
+  // TODO: Revisit once https://github.com/select2/select2/issues/3744 is handled
+  $(element).siblings('.select2').find('input[type=search]').attr('aria-label', label);
 }
 
 $(function() {
-  bindIngredientInput('#include', 'e.g. tomatoes');
-  bindIngredientInput('#exclude', 'e.g. mushrooms');
-  bindEquipmentInput('#equipment', 'e.g. slow cooker');
+  bindIngredientInput('#include', 'Ingredients to include', 'e.g. tomatoes');
+  bindIngredientInput('#exclude', 'Ingredients to exclude', 'e.g. mushrooms');
+  bindEquipmentInput('#equipment', 'Kitchen equipment to use', 'e.g. slow cooker');
 
   $(document).on('keyup', '.select2-search__field', function (event) {
     if (event.keyCode == 13) {