The Test mode toggle checkbox is small; keyboard focus should highlight
the entire row. Use .menu label:has(.toggle:focus-visible) to apply the
outline on the label container, and suppress it on the toggle itself.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Change tabindex="0" -> tabindex="-1" on <ul class="menu"> so the
dropdown container is not in the keyboard tab order (user_menu.js
handles focus programmatically; tabindex="-1" still allows mouse
click to satisfy DaisyUI :focus-within dropdown CSS)
- Add .menu li > a:focus-visible and .menu li > button:focus-visible
to global focus rule to override DaisyUI's menu-item focus selectors
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
SCSS: add .input, .select, .checkbox, .radio, .toggle, .tab, .link
to :focus-visible rule so DaisyUI's higher-specificity component-level
rules are overridden by our 8px blue outline in both stylesheets.
Vue: remove !outline-0 and !ring-0 (which used !important to kill
outlines entirely) from 21 elements across 4 template_builder files:
- field_settings.vue (13 inputs/selects)
- payment_settings.vue (5 inputs/selects)
- fields.vue (2 inputs)
- formula_modal.vue (1 textarea)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add tabindex="0" to both decline <label> buttons so they enter the
tab order and :focus-visible applies (labels are not natively focusable)
- Add .btn:focus-visible alongside :focus-visible in SCSS to override
DaisyUI's higher-specificity .btn:focus-visible rule, ensuring the
global 8px blue ring applies to all DaisyUI buttons
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace input:focus with :focus-visible to cover all focusable elements
(buttons, links, inputs, selects, textareas, [tabindex] elements).
Using :focus-visible shows the ring only for keyboard navigation,
not mouse clicks — the correct accessibility behavior per WCAG 2.4.11.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Apply 8px solid blue (rgb(14,99,200)) outline with 4px offset on
input:focus for improved keyboard navigation visibility in both the
application and public form stylesheets.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Marcelo Paiva
Pete Matsyburka
Pete Matsyburka
Alex Turchyn
DocuSeal
Alex Turchyn