18F · aduth · Feb 4, 2021 · Feb 2, 2021 · Feb 3, 2021 · Feb 3, 2021
diff --git a/.erb-lint.yml b/.erb-lint.yml
@@ -28,8 +28,8 @@ linters:
           - 'order-([0-3]|last)'
           - 'not-rounded'
           - 'rounded-(top|right|bottom|left)'
-          - '(md|lg)-hide'
-          - '(xs|md|lg)-show'
+          - '((sm|md|lg)-)?hide'
+          - '(sm|md|lg)-show'
           - 'btn-(small|big|narrow|transparent)'
           - 'border-(black|gray|white|aqua|orange|fuchsia|purple|maroon|darken-[1-4]|lighten-[1-4])'
         suggestion: 'Use USWDS classes instead of BassCSS.'
diff --git a/app/assets/stylesheets/_vendor.scss b/app/assets/stylesheets/_vendor.scss
@@ -14,7 +14,6 @@
 @import 'basscss-sass/utility-layout';
 @import 'basscss-sass/white-space';
 @import 'basscss-sass/positions';
-@import 'basscss-sass/responsive-states';
 @import 'basscss-sass/grid';
 @import 'basscss-sass/flex-object';
 @import 'basscss-sass/borders';

diff --git a/app/assets/stylesheets/components/_btn.scss b/app/assets/stylesheets/components/_btn.scss
@@ -83,7 +83,6 @@
   border-style: solid;
   border-width: $border-width;
   box-sizing: border-box;
-  display: inline-block;
   padding: $space-1 $space-2;
 
   &.is-focused {

diff --git a/app/javascript/packs/pw-strength.js b/app/javascript/packs/pw-strength.js
@@ -128,7 +128,7 @@ function analyzePw() {
 
   disableSubmit(submit);
 
-  // the pw strength module is hidden by default ("hide" CSS class)
+  // the pw strength module is hidden by default ("display-none" CSS class)
   // (so that javascript disabled browsers won't see it)
   // thus, first step is unhiding it
   pwCntnr.className = '';

diff --git a/app/javascript/packs/saml-post.js b/app/javascript/packs/saml-post.js
@@ -1,4 +1,4 @@
 document.addEventListener('DOMContentLoaded', function () {
-  document.body.className += ' hide';
+  document.body.className += ' usa-sr-only';
   document.getElementById('saml-post-binding').submit();
 });
diff --git a/app/javascript/packs/webauthn-unhide-signin.js b/app/javascript/packs/webauthn-unhide-signin.js
@@ -4,14 +4,14 @@ function unhideWebauthn() {
   if (WebAuthn.isWebAuthnEnabled()) {
     const elem = document.getElementById('select_webauthn');
     if (elem) {
-      elem.classList.remove('hide');
+      elem.classList.remove('display-none');
     }
   } else {
     const checkboxes = document.querySelectorAll(
       'input[name="two_factor_options_form[selection]"]',
     );
     for (let i = 0, len = checkboxes.length; i < len; i += 1) {
-      if (!checkboxes[i].classList.contains('hide')) {
+      if (!checkboxes[i].classList.contains('display-none')) {
         checkboxes[i].checked = true;
         break;
       }

diff --git a/app/javascript/packs/webauthn-unhide-signup.js b/app/javascript/packs/webauthn-unhide-signup.js
@@ -5,7 +5,7 @@ function unhideWebauthn() {
     const elem = document.querySelector('label[for=two_factor_options_form_selection_webauthn]');
     if (elem) {
       elem.hidden = false;
-      elem.classList.remove('hide');
+      elem.classList.remove('display-none');
     }
   }
 }

diff --git a/app/presenters/two_factor_authentication/webauthn_selection_presenter.rb b/app/presenters/two_factor_authentication/webauthn_selection_presenter.rb
@@ -5,7 +5,7 @@ def method
     end
 
     def html_class
-      'hide'
+      'display-none'
     end
 
     # :reek:UtilityFunction

diff --git a/app/views/account_reset/request/show.html.erb b/app/views/account_reset/request/show.html.erb
@@ -23,7 +23,7 @@
       t('users.personal_key.print'),
       '#',
       data: { print: true },
-      class: 'ml2 btn-border ico ico-print text-decoration-none',
+      class: 'ml2 btn-border display-inline-block ico ico-print text-decoration-none',
     ) %>
   </div>
   <hr/>

diff --git a/app/views/accounts/_header.html.erb b/app/views/accounts/_header.html.erb
@@ -1,19 +1,19 @@
 <div class="clearfix pt2 pb3 sm-py0 mb3 bg-lightest-blue sm-bg-none">
   <div class="sm-col sm-col-4">
     <h1 class="h3 m0 center sm-left-align">
-      <span class="regular sans-serif sm-hide">
+      <span class="regular sans-serif tablet:display-none">
         <%= t('account.welcome') %>,
         <span class="bold">
           <%= view_model.header_personalization %>
         </span>
       </span>
-      <span class="sm-show">
+      <span class="display-none tablet:display-inline">
         <%= t('headings.account.login_info') %>
       </span>
     </h1>
   </div>
   <%= render 'accounts/badges' %>
 </div>
-<div class="px2 pb1 bold h3 sm-hide serif">
+<div class="px2 pb1 bold h3 tablet:display-none serif">
   <%= t('headings.account.login_info') %>
 </div>
diff --git a/app/views/accounts/actions/_delete_account.html.erb b/app/views/accounts/actions/_delete_account.html.erb
@@ -1,5 +1,5 @@
 <%= link_to account_delete_path do %>
-  <span class='hide'>
+  <span class='usa-sr-only'>
     <%= t('account.items.delete_your_account') %>
   </span>
   <%= t('account.links.delete_account') %>

diff --git a/app/views/accounts/actions/_edit_action_button.html.erb b/app/views/accounts/actions/_edit_action_button.html.erb
@@ -1,5 +1,5 @@
 <%= link_to path do %>
-  <span class='hide'>
+  <span class='usa-sr-only'>
     <%= name %>
   </span>
   <%= t('forms.buttons.edit') %>

diff --git a/app/views/accounts/actions/_enable_piv_cac.html.erb b/app/views/accounts/actions/_enable_piv_cac.html.erb
@@ -1,5 +1,5 @@
 <%= link_to setup_piv_cac_url, class: 'btn btn-account-action rounded-lg bg-light-blue add-piv' do %>
-  <span class="hide">
+  <span class="usa-sr-only">
     <%= t('account.index.piv_cac_card') %>
   </span>
   <%= prefix_with_plus(t('forms.buttons.enable')) %>

diff --git a/app/views/accounts/actions/_manage_action_button.html.erb b/app/views/accounts/actions/_manage_action_button.html.erb
@@ -1,5 +1,5 @@
 <%= link_to path do %>
-  <span class='hide'>
+  <span class='usa-sr-only'>
     <%= name %>
   </span>
   <%= t('forms.buttons.manage') %>

diff --git a/app/views/accounts/actions/_manage_personal_key.html.erb b/app/views/accounts/actions/_manage_personal_key.html.erb
@@ -4,7 +4,7 @@
   class: 'btn btn-link ml1',
   form_class: 'inline-block',
 ) do %>
-  <span class='hide'>
+  <span class='usa-sr-only'>
     <%= t('account.items.personal_key') %>
   </span>
   <%= t('account.links.regenerate_personal_key') %>

diff --git a/app/views/devise/shared/_password_strength.html.erb b/app/views/devise/shared/_password_strength.html.erb
@@ -1,4 +1,4 @@
-<div id='pw-strength-cntnr' class='hide' aria-live='polite' aria-atomic='true'>
+<div id='pw-strength-cntnr' class='display-none' aria-live='polite' aria-atomic='true'>
   <div class='mtn3 mb3'>
     <div class='clearfix mxn-tiny pt-tiny'>
       <div class='pw-bar'></div>

diff --git a/app/views/idv/in_person/usps_list.html.erb b/app/views/idv/in_person/usps_list.html.erb
@@ -33,7 +33,7 @@
           FORT MYER, VA 22211-9998 </div>
       </div>
     </label>
-    <label class="btn-border col-12 mb2 hide" for="two_factor_options_form_selection_webauthn">
+    <label class="btn-border col-12 mb2 display-none" for="two_factor_options_form_selection_webauthn">
       <div class="radio">
         <input type="radio" name="two_factor_options_form[selection]" id="two_factor_options_form_selection_webauthn" value="webauthn" />
         <span class="indicator mt-tiny"></span>

diff --git a/app/views/service_provider_mfa/new.html.erb b/app/views/service_provider_mfa/new.html.erb
@@ -18,7 +18,7 @@
       <% @presenter.options.each do |option| %>
         <%= label_tag "two_factor_options_form_selection_#{option.type}",
                       class: "btn-border col-12 mb2 #{option.html_class}",
-                      hidden: option.html_class == 'hide' do %>
+                      hidden: option.html_class == 'display-none' do %>
           <div class="radio">
             <%= radio_button_tag('two_factor_options_form[selection]', option.type) %>
             <span class="indicator mt-tiny"></span>

diff --git a/app/views/shared/_footer_lite.html.erb b/app/views/shared/_footer_lite.html.erb
@@ -5,7 +5,7 @@
 
 <footer class='footer bg-light-blue sm-bg-navy'>
   <% if show_language_dropdown %>
-    <div class='sm-hide border-bottom'>
+    <div class='tablet:display-none border-bottom'>
       <div class='container cntnr-wide py1 px2 lg-px0 h5'>
         <div class='i18n-mobile-toggle center'>
           <%= link_to('#', class: 'block text-decoration-none blue fs-13p', 'aria-expanded': 'false') do %>
@@ -15,7 +15,7 @@
         </div>
       </div>
     </div>
-    <div class='i18n-mobile-dropdown sm-hide display-none'>
+    <div class='i18n-mobile-dropdown tablet:display-none display-none'>
       <ul class='list-reset mb0 white center'>
         <%  I18n.available_locales.each do |locale| %>
           <li class='border-bottom'>
@@ -28,15 +28,15 @@
   <div class='container py1 px2 lg-px0 <%= 'sm-py0' if show_language_dropdown %>'>
     <div class='flex flex-center'>
       <div class='flex flex-auto flex-first'>
-        <div class="sm-hide">
-          <%= new_window_link_to 'https://gsa.gov', { class: 'flex flex-center text-decoration-none white h6 mr1 sm-hide',
+        <div class="tablet:display-none">
+          <%= new_window_link_to 'https://gsa.gov', { class: 'flex flex-center text-decoration-none white h6 mr1 tablet:display-none',
                                                       'aria-label': t('shared.footer_lite.gsa') } do %>
             <%= image_tag asset_url('sp-logos/square-gsa-dark.svg'),
               width: 20, alt: '' %>
           <% end %>
         </div>
 
-        <div class="sm-show">
+        <div class="display-none tablet:display-block">
           <%= new_window_link_to 'https://gsa.gov', { class: 'flex flex-center text-decoration-none white h6 mr1 usa-link--alt',
                                                       'aria-label': t('shared.footer_lite.gsa') } do %>
             <%= image_tag asset_url('sp-logos/square-gsa.svg'),
@@ -49,7 +49,7 @@
       </div>
       <div class='flex flex-center'>
         <% if show_language_dropdown %>
-          <ul class='list-reset sm-show mb0'>
+          <ul class='list-reset display-none tablet:display-block mb0'>
             <li class='i18n-desktop-toggle flex my1 mx2 relative'>
               <%= link_to '#', class: 'white text-decoration-none border border-blue rounded-lg px1 py-tiny', 'aria-expanded': 'false' do %>
                 <%= image_tag asset_url('globe-white.svg'), width: 12, class: 'mr1', alt: '',
@@ -70,29 +70,22 @@
           </ul>
         <% end %>
 
-        <div class="sm-hide">
-          <div class="display-flex">
-            <%= new_window_link_to(t('links.help'), MarketingSite.help_url,
-                                  class: 'caps h6 blue text-decoration-none mr2') %>
-            <%= new_window_link_to(t('links.contact'), MarketingSite.contact_url,
-                                  class: 'caps h6 blue text-decoration-none mr2') %>
-            <%= new_window_link_to(t('links.privacy_policy'), MarketingSite.security_and_privacy_practices_url,
-                                  class: 'caps h6 blue text-decoration-none mr2') %>
-          </div>
+        <div class="display-flex tablet:display-none">
+          <%= new_window_link_to(t('links.help'), MarketingSite.help_url,
+                                class: 'caps h6 blue text-decoration-none mr2') %>
+          <%= new_window_link_to(t('links.contact'), MarketingSite.contact_url,
+                                class: 'caps h6 blue text-decoration-none mr2') %>
+          <%= new_window_link_to(t('links.privacy_policy'), MarketingSite.security_and_privacy_practices_url,
+                                class: 'caps h6 blue text-decoration-none mr2') %>
         </div>
 
-        <div class="sm-show">
-          <%# Note: Once BassCSS is removed, absorb this wrapper into the parent and use class
-              `display-none tablet:display-flex`. This is not currently possible because BassCSS's
-              `display-none` applies using `!important`. %>
-          <div class="display-flex">
-            <%= new_window_link_to(t('links.help'), MarketingSite.help_url,
-                                  class: 'caps h6 white text-decoration-none mr2 usa-link--alt') %>
-            <%= new_window_link_to(t('links.contact'), MarketingSite.contact_url,
-                                  class: 'caps h6 white text-decoration-none mr2 usa-link--alt') %>
-            <%= new_window_link_to(t('links.privacy_policy'), MarketingSite.security_and_privacy_practices_url,
-                                  class: 'caps h6 white text-decoration-none mr2 usa-link--alt') %>
-          </div>
+        <div class="display-none tablet:display-flex">
+          <%= new_window_link_to(t('links.help'), MarketingSite.help_url,
+                                class: 'caps h6 white text-decoration-none mr2 usa-link--alt') %>
+          <%= new_window_link_to(t('links.contact'), MarketingSite.contact_url,
+                                class: 'caps h6 white text-decoration-none mr2 usa-link--alt') %>
+          <%= new_window_link_to(t('links.privacy_policy'), MarketingSite.security_and_privacy_practices_url,
+                                class: 'caps h6 white text-decoration-none mr2 usa-link--alt') %>
         </div>
       </div>
     </div>

diff --git a/app/views/shared/_personal_key_confirmation_modal.html.erb b/app/views/shared/_personal_key_confirmation_modal.html.erb
@@ -20,7 +20,7 @@
         <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
 
         <div class="clearfix mxn2">
-          <div class="col col-12 sm-col-6 px2 mb2 sm-mb0 sm-hide">
+          <div class="col col-12 sm-col-6 px2 mb2 sm-mb0 tablet:display-none">
             <button type="submit" class="col-12 btn btn-primary personal-key-confirm">
               <%= t('forms.buttons.continue') %>
             </button>
@@ -30,7 +30,7 @@
               <%= t('forms.buttons.back') %>
             </button>
           </div>
-          <div class="col col-12 sm-col-6 px2 mb2 sm-mb0 sm-show">
+          <div class="col col-12 sm-col-6 px2 mb2 sm-mb0 display-none tablet:display-block">
             <button type="submit" class="col-12 btn btn-primary personal-key-confirm">
               <%= t('forms.buttons.continue') %>
             </button>

diff --git a/app/views/users/two_factor_authentication_setup/index.html.erb b/app/views/users/two_factor_authentication_setup/index.html.erb
@@ -20,7 +20,7 @@
       <% @presenter.options.each do |option| %>
         <%= label_tag "two_factor_options_form_selection_#{option.type}",
                       class: "btn-border col-12 mb2 #{option.html_class}",
-                      hidden: option.html_class == 'hide' do %>
+                      hidden: option.html_class == 'display-none' do %>
           <div class="radio">
             <%= radio_button_tag('two_factor_options_form[selection]', option.type) %>
             <span class="indicator mt-tiny"></span>

diff --git a/spec/features/users/user_profile_spec.rb b/spec/features/users/user_profile_spec.rb
@@ -112,7 +112,7 @@
       sign_in_and_2fa_user
       click_link 'Edit', href: manage_password_path
 
-      expect(page).to_not have_css('#pw-strength-cntnr.hide')
+      expect(page).to_not have_css('#pw-strength-cntnr.display-none')
       expect(page).to have_content '...'
 
       fill_in 'update_user_password_form_password', with: 'this is a great sentence'

diff --git a/spec/features/visitors/set_password_spec.rb b/spec/features/visitors/set_password_spec.rb
@@ -28,7 +28,7 @@
     create(:user, :unconfirmed)
     confirm_last_user
 
-    expect(page).to have_css('#pw-strength-cntnr.hide')
+    expect(page).to have_css('#pw-strength-cntnr.display-none')
   end
 
   context 'password strength indicator when JS is on', js: true do
@@ -37,8 +37,8 @@
       confirm_last_user
     end
 
-    it 'is visible on page (not have "hide" class)' do
-      expect(page).to_not have_css('#pw-strength-cntnr.hide')
+    it 'is visible on page (not have "display-none" class)' do
+      expect(page).to_not have_css('#pw-strength-cntnr.display-none')
     end
 
     it 'updates as password changes' do

diff --git a/spec/features/webauthn/hidden_spec.rb b/spec/features/webauthn/hidden_spec.rb
@@ -22,7 +22,7 @@ def webauthn_option_hidden?
       page.find(
         'label[for=two_factor_options_form_selection_webauthn]',
         visible: :all,
-      )[:class].include?('hide')
+      )[:class].include?('display-none')
     end
   end
 
@@ -50,7 +50,7 @@ def webauthn_option_hidden?
     def webauthn_option_hidden?
       page.find(
         'label[for=two_factor_options_form_selection_webauthn]',
-      ).find(:xpath, '..')[:class].include?('hide')
+      ).find(:xpath, '..')[:class].include?('display-none')
     end
   end
 end
diff --git a/spec/presenters/two_factor_authentication/webauthn_selection_presenter_spec.rb b/spec/presenters/two_factor_authentication/webauthn_selection_presenter_spec.rb
@@ -11,8 +11,8 @@
   end
 
   describe '#html_class' do
-    it 'returns hide' do
-      expect(subject.html_class).to eq 'hide'
+    it 'returns display-none' do
+      expect(subject.html_class).to eq 'display-none'
     end
   end
 end
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ def method @@
         end
         def html_class
-          'hide'
+          'display-none'
         end
         # :reek:UtilityFunction
@@ Expand Down @@