Fix focus not visible
Focus is not visible when CSS removes the outline and does not replace it.
Keyboard users cannot see which control they are on, including the pay button.
Steps
- Tab through the header and a form.
- Look for a visible indicator on each stop.
- Remove outline none or replace it.
Failing example
Buttons use outline none and no box shadow.
Better example
Focused controls show a 3 pixel solid outline.
Shopify
In the Shopify theme CSS, delete outline: none on links and buttons, or replace it with a 3 pixel solid outline using :focus-visible.
WooCommerce
Search the WooCommerce theme stylesheet for outline: none and restore a visible focus style on buttons and fields.
WordPress
Remove outline: none from the WordPress theme. The block editor's focus style is a pattern you can keep.
Wix
Do not add custom CSS in Wix that removes focus rings from buttons and links. Keep a visible ring.