Replace Chosen with accessible-autocomplete

package.json

@@ -12,7 +12,6 @@
  "node": ">=8.10.0"
  },
  "dependencies": {
- "chosen-js": "^1.8.7",
  "jquery": "^3.5.1",
  "node-sass": "^4.14.1",
  "uswds": "^2.10.0"

tock/tock/static/js/components/timecard.js

@@ -104,7 +104,7 @@ function populateHourTotals() {
 
 function toggleNotesField(selectBox) {
  var $fieldset = $(selectBox).parents('.entry-project'),
- $selected = $(selectBox).find(':selected'),
+ $selected = $fieldset.find(':selected'),
  $notes = $fieldset.find('.entry-note-field'),
  notesDisplayed = $selected.data('notes-displayed'),
  notesRequired = $selected.data('notes-required');
@@ -118,7 +118,7 @@ function toggleNotesField(selectBox) {
 
 function displayAlerts(selectBox) {
  var $fieldset = $(selectBox).parents('.entry-project'),
- $selected = $(selectBox).find(':selected'),
+ $selected = $fieldset.find(':selected'),
  $alerts = $fieldset.find('.entry-alerts'),
  all_alerts = $selected.data('alerts'),
  alert_text;
@@ -164,7 +164,6 @@ function addTockLines(tockLines) {
  setTimeout(function () {
  // Set the project and trigger a GUI update
  $("div.entry:last .entry-project select").val(line.project);
- $("div.entry:last .entry-project select").trigger("chosen:updated");
 
  // Set the hours and trigger a data update
  $("div.entry:last .entry-amount input").val(line.hours);
@@ -197,11 +196,6 @@ $("body").on("change", ".entry-project select", function () {
 
 
 $(document).ready(function () {
- var chosenOptions = {
- search_contains: true,
- group_search: false
- };
-
  $("#save-timecard").on("click", function () {
  // Clear anything saved locally. The server is the
  // source of truth.
@@ -225,7 +219,7 @@ $(document).ready(function () {
  $(".add-timecard-entry").on("click", function () {
  $('div.entry:last').clone().each(function (i) {
  var entry = $(this);
- entry.find('.chosen-container').remove();
+ entry.find('.autocomplete__wrapper').remove();
  entry.find('.entry-alerts').empty();
  entry.find('.entry-note-field').toggleClass('entry-hidden', true);
  entry.find('.entry-note-field .invalid').remove();
@@ -262,8 +256,13 @@ $(document).ready(function () {
  });
  }).appendTo('.entries');
 
+ accessibleAutocomplete.enhanceSelectElement({
+ showAllValues: true,
+ defaultValue: '',
+ selectElement: document.querySelector('div.entry:last-child .entry-project select')
+ });
+
  $('div.entry:last').find('.entry-project select')
- .chosen(chosenOptions)
  .on('change', function (e) {
  toggleNotesField(this);
  displayAlerts(this);
@@ -304,8 +303,16 @@ $(document).ready(function () {
  // Run on initial load
  populateHourTotals();
 
- $('.entry-project select')
- .chosen(chosenOptions)
+ const selects = document.querySelectorAll('.entry-project select');
+ selects.forEach(select => {
+ accessibleAutocomplete.enhanceSelectElement({
+ showAllValues: true,
+ defaultValue: '',
+ selectElement: select
+ })
+ });
+
+ $('.entry-project input')
  .on('change', function (e) {
  toggleNotesField(this);
  displayAlerts(this);

tock/tock/static/sass/_entries.scss

@@ -106,9 +106,17 @@
  }
 }
 
-/*.entry-project {
- @include span-columns(6);
-}*/
+.entry-project {
+ .autocomplete__dropdown-arrow-down {
+ z-index: 1; //override to accessible-autocomplete's -1 index, which hides arrow
+ top: 18px; //override to accommodate extra margin on input
+ }
+ .autocomplete__hint, .autocomplete__input {
+ border: 1px solid #565c65;
+ color: #1b1b1b;
+ margin-top: 0.5rem;
+ }
+}
 
 .entry-notes {
  textarea {

tock/tock/templates/base.html

@@ -17,12 +17,12 @@
  <meta name="tock-icon-angry" content="{% static 'img/favicon-angry' %}">
  <link rel="stylesheet" href="{% static 'css/dist/core.css' %}">
  <link rel="stylesheet" href="{% static 'vendor/jqueryui_v1.12.1/jquery-ui.min.css' %}">
- <link rel="stylesheet" href="{% static 'vendor/chosen_v1.8.7/chosen.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/vendor/font-awesome.min.css' %}">
+ <link rel="stylesheet" href="{% static 'vendor/accessible-autocomplete_v2.0.3/css/accessible-autocomplete.min.css' %}" />
  <script src="{% static 'vendor/jquery_v3.5.1/jquery.min.js' %}"></script>
- <script src="{% static 'vendor/chosen_v1.8.7/chosen.jquery.min.js' %}"></script>
  <script src="{% static 'vendor/jqueryui_v1.12.1/jquery-ui.min.js' %}"></script>
  <script src="{% static 'vendor/uswds_v2.3.1/js/uswds.min.js' %}"></script>
+ <script type="text/javascript" src="{% static 'vendor/accessible-autocomplete_v2.0.3/js/accessible-autocomplete.min.js' %}"></script>
 
  <script src="{% static 'js/components/notifications.js' %}"></script>
  <script>