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:

• volunteer1@example.com view site as a volunteer
• supervisor1@example.com view site as a supervisor
• casa_admin1@example.com view site as an admin
• all_casa_admin1@example.com 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?

[github-actions]

This issue has been inactive for 262 hours (10.92 days) and will be unassigned after 98 more hours (4.08 days). If you have questions, please

If you are still working on this, comment here to tell the bot to give you more time

[github-actions]

This issue has been inactive for 382 hours (15.92 days) and is past the limit of 360 hours (15.00 days) so is being unassigned.You’ve just been unassigned from this ticket due to inactivity – but feel free to pick it back up (or a new one!) in the future! Thank you again for your contribution to this project.