Fix .sr-only -> .visually-hidden

Author: stephenyeargin

templates/_entity_collection_javascript.html.twig

@@ -53,7 +53,7 @@ function addFormToCollection($collectionHolderClass) {
 }
 
 function addCollectionFormDeleteLink($collectionFormLi) {
-    var $removeFormButton = $('<button type="button" class="btn btn-sm bg-danger text-bg-danger"><i class="fas fa-trash"></i><span class="sr-only">Delete</span></button>');
+    var $removeFormButton = $('<button type="button" class="btn btn-sm bg-danger text-bg-danger"><i class="fas fa-trash"></i><span class="visually-hidden">Delete</span></button>');
     $('div.input-group', $collectionFormLi).append($removeFormButton);
     $removeFormButton.on('click', function(e) {
         // remove the li for the form

templates/donation/_donation_row.html.twig

@@ -20,7 +20,7 @@
   <td class="text-end" data-order="{{ donation.amount }}">{{ donation.amount|format_currency(donation.currency) }}</td>
   <td class="text-end" data-order="{{ donation.processingFee }}">{{ donation.processingFee|format_currency(donation.currency) }}</td>
   <td class="text-end font-weight-bold" data-order="{{ donation.netAmount }}">{{ donation.netAmount|format_currency(donation.currency) }}</td>
-  <td class="text-center" data-order="{{ donation.isRecurring }}">{{ donation.isRecurring ? '<i class="fas fa-redo"></i><span class="sr-only">Yes</span>' : '<span class="sr-only">No</span>' }}</td>
+  <td class="text-center" data-order="{{ donation.isRecurring }}">{{ donation.isRecurring ? '<i class="fas fa-redo"></i><span class="visually-hidden">Yes</span>' : '<span class="visually-hidden">No</span>' }}</td>
   <td>
     {% if donation.id %}
     <a href="{{ path('donation_edit', {id: donation.id}) }}"><i class="fas fa-edit fa-fw"></i></a>

templates/security/login.html.twig

@@ -22,9 +22,9 @@
       {% else %}
       <div class="h3 mb-3 font-weight-normal">Please sign in</div>
       {% endif %}
-      <label for="inputEmail" class="sr-only">Email address</label>
+      <label for="inputEmail" class="visually-hidden">Email address</label>
       <input name="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" value="{{ last_username }}" required autofocus>
-      <label for="inputPassword" class="sr-only">Password</label>
+      <label for="inputPassword" class="visually-hidden">Password</label>
       <input name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
       <div class="checkbox mb-3">
         <label>