Button not working with keyboard in Firefox

  • Resolved jpb10

    (@jpb10)


    4 years, 8 months ago

    Hello,

    1. In Firefox, I noticed that when “tabbing” (keyboard accessibility) to focus on the different links on my page, pressing Enter doesn’t work on the Smart Slider button. In Chrome, it works as expected and follows the link.

    2. Also, instead of using the page’s default focus style (eg. outline), Smart Slider elements use the hover effect. Is there any custom CSS that can override this behavior?

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Laszlo

    (@laszloszalvak)

    Hi @jpb10

    1.) We managed to reproduce this problem with the latest Firefox, so we created a fix for this problem which will be available in the next release of Smart Slider 3.
    However if you would like to give it a try right now, then please open a support ticket at: https://smartslider3.com/contact-us/support/?ref=https://www.ads-software.com/support/topic/button-not-working-with-keyboard-in-firefox/
    and we will send you the installer of our latest build.

    2.) If you check the elements e.g. buttons of some themes ( e.g.: Twenty Sixteen, Twenty Seventeen, Twenty Twenty ) you will notice that they are using the hovered style for the focus state as well. ( E.g.: search button )
    If you don’t want this to happen, then you could go to Smart Slider 3 > Global Settings > Framework settings > Improved Frontend Accessibility – https://smartslider.helpscoutdocs.com/article/1785-framework
    however please note that, if you disable this setting nothing will indicate the currently active link in the slider.

    Note: We can not provide support for custom coding, so if you would like to set a different style for the focus state then you should inspect the HTML structure of the elements and write a stronger CSS for the focus state – https://www.w3schools.com/cssref/sel_focus.asp – to override ours.

    You will be able to enter your custom CSS at Slider Settings > Developer tab > CSS: https://smartslider.helpscoutdocs.com/article/1806-slider-settings-developer

    Best regards,
    Laszlo.

    Thread Starter jpb10

    (@jpb10)

    Thanks. Great work.

    As you suggested, I was able to change the hovered style focus by disabling “Improved Frontend Accessibility”, combined with this custom CSS:

    
div#n2-ss-2 .n2-style-<id>:focus {
	outline: <values>!important; 			
}

    I put it in my theme’s “Additional CSS” because it’s more convenient to edit and preview. It may or may not be the optimal way, but it works for now.

    Cheers

    • This reply was modified 4 years, 8 months ago by jpb10.
    Thread Starter jpb10

    (@jpb10)

    More generally:

    div#n2-ss-2 .n2-ss-button-container a:focus {
	outline: <values>!important; 			
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Button not working with keyboard in Firefox’ is closed to new replies.