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>