Fix focus visibility in theme settings

[maxatdetroit]

The Problem

When using tab to focus light elements on a dark background (as someone might due using a keyboard to navigate a site), the focus visibility of elements is non-apparent.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://cityofdetroit.github.io/COD-Design-System/?path=/story/components-organisms-navbar--offcanvas-responsive
2. Use 'Tab' key to navigate the menu links
3. Observe that the links 'Home', 'Link' and button 'Dropdown' do not have a box around them while focused

Screenshots

2024-07-16.11-29-30.mp4

Expected Behavior

The links and buttons should have some high contrast visual indicator that they are focused using the keyboard:

2024-07-16.11-28-47.mp4

This behavior was demo by editing the stylesheets like the below, however this is just a reference to understand how the focus styles are computed from the theme. See the next section for a more robust fix for this issue by updating the theme.

/* Inline #3 | https://cityofdetroit.github.io/COD-Design-System/iframe.html?viewMode=story&id=components-organisms-navbar--offcanvas-responsive */

.btn:focus-visible {
  /* box-shadow: var(--bs-btn-focus-box-shadow); */
  /* box-shadow: 0; */
  /* box-shadow: 0 aliceblue; */
  /* box-shadow: 0 0; */
  /* box-shadow: 0 0 aliceblue; */
  /* box-shadow: 0 0 0; */
  /* box-shadow: 0 0 0 aliceblue; */
  /* box-shadow: 0 0 0 .aliceblue; */
  /* box-shadow: 0 0 0 .2; */
  /* box-shadow: 0 0 0 .25; */
  /* box-shadow: 0 0 0 .25e; */
  /* box-shadow: 0 0 0 .25em; */
  /* box-shadow: 0 0 0 .25em aliceblue; */
  /* box-shadow: 0 0 0 .25em beige; */
  /* box-shadow: 0 0 0 .25em black; */
  box-shadow: 0 0 0 .25em blue;
}

/* Inline #6 | https://cityofdetroit.github.io/COD-Design-System/iframe.html?viewMode=story&id=components-organisms-navbar--offcanvas-responsive */

.nav-link:focus-visible {
  /* box-shadow: 0 0 0 0.25em rgba(0, 68, 69, 0.25); */
  /* box-shadow: 0 0 0 0.25em beige; */
  /* box-shadow: 0 0 0 0.25em black; */
  box-shadow: 0 0 0 0.25em blue;
}

The Solution

Override the $focus-ring-color SCSS variable and set it to blue instead of $primary in src/scss/_bootstrap-variables.scss.

Then regenerate the theme CSS using ./scripts/compile_styles.sh.

[sreidthomas]

@maxatdetroit

1. Should thouse rules be in the src/scss/_bootstrap-variables.scss file or do I need to add them?

2. What's the full command to regenerate the. I just add yarn before that right?: ./scripts/compile_styles.sh.

[maxatdetroit]

@sreidthomas

The $focus-ring-color SCSS variable probably isn't in the src/scss/_bootstrap-variables.scss file yet. You'll need to add it.

The full command to regenerate the stylesheets is just ./scripts/compile_styles.sh. Because it has a shebang on line 1, it can be called directly.