Accessibility Fixes

[Brandy]

Brandy

December 3, 2019 at 11:01 am

Hello Team Kadence!

Hope you are all doing well! Can you please add :focus handlers to the custom_css.php file for accessibility? We tried just adding overrides but as each site has it’s own colors it can be bit to manage to add everywhere to make it work with the styling options.

//Menus Styling
if(!empty($virtue_premium['primarymenu_hover_color'])) {
$color_pmenu_hover = '#nav-main ul.sf-menu a:focus, .nav-main ul.sf-menu a:focus, #nav-main ul.sf-menu li.current-menu-item > a, .nav-main ul.sf-menu li.current-menu-item > a, #nav-main ul.sf-menu ul li a:focus, .nav-main ul.sf-menu ul li a:focus {color:'.$virtue_premium['primarymenu_hover_color'].';}';
} else {
$color_pmenu_hover = '';
}
if(!empty($virtue_premium['primarymenu_hover_bg_color'])) {
$color_pmenu_bg_hover = '#nav-main ul.sf-menu li a:focus, .nav-main ul.sf-menu a:focus, #nav-main ul.sf-menu li.current-menu-item > a, .nav-main ul.sf-menu li.current-menu-item > a, #nav-main ul.sf-menu ul li a:focus, .nav-main ul.sf-menu ul li a:focus {background:'.$virtue_premium['primarymenu_hover_bg_color'].';}';
} else {
$color_pmenu_bg_hover = '';
}
if(!empty($virtue_premium['secondarymenu_hover_color'])) {
$color_smenu_hover = '#nav-second ul.sf-menu > li > a:focus, #nav-second ul.sf-menu a:focus, #nav-second ul.sf-menu li.current-menu-item > a, #nav-second ul.sf-menu ul li a:focus {color:'.$virtue_premium['secondarymenu_hover_color'].';}';
} else {
$color_smenu_hover = '';
}
if(!empty($virtue_premium['secondarymenu_hover_bg_color'])) {
$color_smenu_bg_hover = '#nav-second ul.sf-menu > li > a:focus, #nav-second ul.sf-menu > li.current-menu-item, #nav-second ul.sf-menu ul > li.current-menu-item, #nav-second ul.sf-menu ul li a:focus {background:'.$virtue_premium['secondarymenu_hover_bg_color'].';}';
} else {
$color_smenu_bg_hover = '';
}
if(!empty($virtue_premium['mobilemenu_hover_color'])) {
$color_mmenu_hover = '.kad-mobile-nav .kad-nav-inner li.current-menu-item>a, .kad-mobile-nav .kad-nav-inner li a:focus, #kad-banner .mobile-nav-trigger-id a.nav-trigger-case:focus .kad-menu-name, #kad-banner .mobile-nav-trigger-id a.nav-trigger-case:focus .kad-navbtn, .nav-trigger-case:focus .kad-navbtn {color:'.$virtue_premium['mobilemenu_hover_color'].';}';
} else {
$color_mmenu_hover = '';
}
if(!empty($virtue_premium['mobilemenu_hover_bg_color'])) {
$color_mmenu_bg_hover = '.kad-mobile-nav .kad-nav-inner li.current-menu-item>a, .kad-mobile-nav .kad-nav-inner li a:focus, #kad-banner .mobile-nav-trigger-id a.nav-trigger-case:focus .kad-menu-name, #kad-banner .mobile-nav-trigger-id a.nav-trigger-case:focus .kad-navbtn {background:'.$virtue_premium['mobilemenu_hover_bg_color'].';}';
} else {
$color_mmenu_bg_hover = '';
}

If you can’t add it, what is the best way to override the custom_css.php file? Thank you!