Bug: Tab Navigation of forms lacks focus outline for certain inputs

[thejonroberts]

Impacted User Types

• all

Environment

ex: all

Current Behavior

When I tab through a form, the focus outline disappears for certain inputs. Notable in case contact form. Affects at least checkbox inputs.

This is annoying for me, who likes to use keyboard for things, but a huge problem for accessibility.

Expected Behavior

I expect to see an outline of where I currently am in the form so that I can tab navigate all the way through it.

How to Replicate

1. • Log in as an volunteer.
2. • Navigate to a Case
3. • Click on Create New Contact.
4. • Try to tab around the form.

How to access the QA site

Login Details:
Link to QA site

Login Emails:

• [email protected] view site as a volunteer
• [email protected] view site as a supervisor
• [email protected] view site as an admin
• [email protected] view site as an all casa admin
  • go to /all_casa_admins/sign_in

password for all users: 12345678

The Problem:

public/assets/css/main.css

a:focus,
input:focus,
textarea:focus,
button:focus,
.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

In app/views/layouts/application.html.erb:

  <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

  <% if all_casa_admin_signed_in? %>
    <%= javascript_include_tag "all_casa_admin", "data-turbo-track": "reload", defer: true %>
  <% end %>

  <link rel="stylesheet" href="/assets/css/lineicons.css">
  <link rel="stylesheet" href="/assets/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="/assets/css/main.css">

• main.css is a mess & separate from CSS build process
  • does a lot of reset-type things, which bootstrap already does for us
  • included after application.css build, so overwrites anything in bootstrap, application scss (bc of cascade)
  • this includes removing focus styles like outline, which are necessary for tab navigation
  • it is also formatted poorly and has syntax errors
  • main.css does a lot - many rules to overwrite bootstrap classes, which could probably be done via configuration instead?

proposed solutions:

1. Move main.css from application.html to application css bundle
   • remove anything in main.css that bootstrap reset takes care of, like focus styles
   • will increase bundle size
   • won't change any rules, still could be change in styles from cascade re-ordering
2. Clean up main.css so that it doesn't contain focus reset rules.
   • also move it above stylesheet_link_tag in app layout?
3. Remove main.css and configure bootstrap properly, fix issues that arise...
   • probably too much work

[joaoiguana]

Hi! I would like to give it a try on this issue. Could you please assign it to me?