Accessibility shown when not requested

  • eddio

    (@eddio)


    2 months, 3 weeks ago

    Hi there. Any chance of adjusting this accessibility focus outline when it’s not requested via tabbing? This square/rectangle appears when clicked with a mouse on any link or image with link.
    Here is a screenshot for reference.
    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Zubair Zahid (woo-hc)

    (@doublezed2)

    2 months, 3 weeks ago

    Hello eddio,

    Thank you for contacting WooCommerce support.

    I understand your question about the focus outline that appears on links and images when clicked.
    Please note that this is a design feature in the Storefront theme.

    If you want to change it, you may use custom CSS to override the theme CSS.
    Let me know if you have any further questions.

    Best regards.

    Thread Starter eddio

    (@eddio)

    2 months, 3 weeks ago

    I see. I used this custom code and it seemed to hide this feature and only show when tabbing. Any suggestion to make this code better or would it be ok? Tested on storefront+elementor pro
    Thanks

    *:focus {
        outline: none !important;
    }

    *:focus-visible {
        outline: 2px solid #ff6600 !important;
        border-radius: 3px;
    }
    Mahfuzur Rahman(woo-hc)

    (@mahfuzurwp)

    2 months, 3 weeks ago

    Hi @eddio ,

    Thanks for reaching out!

    Regarding your custom code, while we understand you’re trying to modify the focus outline behavior, please note that custom code falls outside our support scope. We recommend consulting with a developer for further enhancements or joining the WooCommerce community Slack channel for more tailored advice.

    Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.