/*
* ADA Compliance Guardian - Enhanced Focus Styling
* Version: 2.4.0
* Description: Provides clearer visual indicators for keyboard-focused elements and enhances dropdown interaction on the front-end.
*/
/*
* Apply a consistent and highly visible focus style using :focus-visible.
* This applies when an element receives keyboard focus.
*/
*:focus-visible {
outline: 3px solid #007cba !important; /* WordPress blue, adjust if needed */
outline-offset: 2px !important;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #007cba !important;
border-radius: 3px !important;
transition: outline 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
z-index: 9999; /* Ensure focus outline is on top */
}
/* --- Enhanced Hover for List Items (mimicking focus) --- */
/*
* Styles the list item itself on hover.
* This is mostly for visual feedback on the LI itself. Submenu expansion is handled below.
*/
ul > li:hover,
ol > li:hover {
/*
outline: 3px solid #007cba !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #007cba !important;
border-radius: 3px !important;
transition: outline 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
*/
}
/* --- Dropdown Submenu Expansion on Hover and Focus-Within --- */
/*
* These rules aim to make submenus (e.g., in navigation) visible when their parent list item
* is hovered with a mouse, or when any interactive element within the parent list item
* (like a link) receives keyboard focus.
*
* COMMON HTML STRUCTURE ASSUMPTION:
*
*
* **IMPORTANT**:
* 1. These styles target direct child or elements of an - for submenus.
* 2. Theme JavaScript might interfere. These CSS rules might need to be very specific or
* you might need to dequeue/modify theme JS if it's aggressively managing dropdowns.
* 3. The `!important` flag is used because theme styles for hiding submenus can be quite specific.
* Test thoroughly.
*/
/* * Hide submenu by default (complementing theme styles if needed).
* Most themes will hide submenus using display: none, visibility: hidden, or positioning.
* These styles are a fallback or can be used to ensure a consistent starting state for transitions.
* You might need to uncomment and adjust these if your theme's default hiding mechanism
* isn't being properly overridden for the :hover/:focus-within states.
*/
ul > li > ul, /* Targets a
that is a direct child of an - inside another
*/
ul > li > ol, /* Targets an that is a direct child of an - inside another
*/
ol > li > ul, /* Targets a that is a direct child of an - inside another
*/
ol > li > ol { /* Targets an that is a direct child of an - inside another
*/
/*
display: none;
opacity: 0;
visibility: hidden;
max-height: 0;
overflow: hidden;
position: absolute;
left: -9999px;
*/
/* Add any properties your theme uses to hide submenus, to ensure a baseline. */
}
/* Show submenu when parent LI is hovered or when an element inside parent LI receives focus */
ul > li:hover > ul,
ul > li:hover > ol,
ol > li:hover > ul,
ol > li:hover > ol,
ul > li:focus-within > ul,
ul > li:focus-within > ol,
ol > li:focus-within > ul,
ol > li:focus-within > ol {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
position: absolute !important; /* Crucial for positioning out of normal flow */
left: 0 !important; /* Default: aligns with the left of the parent LI. Adjust if needed (e.g., '100%' for side menus) */
top: 100% !important; /* Default: positions below the parent LI. Adjust if needed. */
width: auto !important; /* Let content dictate width */
min-width: 180px !important; /* Ensure a minimum usable width */
height: auto !important;
max-height: 1000px !important; /* Prevent infinitely tall dropdowns, allow scroll if content overflows */
overflow: visible !important; /* Ensure content isn't clipped if it's larger than max-height */
clip: auto !important; /* Undoes any clipping */
z-index: 9998 !important; /* Ensure submenu is on top of other content, but below global focus outline */
border: 1px solid #ccc !important; /* Basic border for visibility */
background-color: #fff !important; /* Essential for readability */
padding: 5px 0 !important; /* Padding for submenu items */
margin: 0 !important; /* Reset any margins */
list-style: none !important; /* Remove list bullets/numbers if any */
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, max-height 0.3s ease-in-out;
}
/* Further styling for items within the now-visible submenu */
ul > li:hover > ul > li,
ul > li:hover > ol > li,
ol > li:hover > ul > li,
ol > li:hover > ol > li,
ul > li:focus-within > ul > li,
ul > li:focus-within > ol > li,
ol > li:focus-within > ul > li,
ol > li:focus-within > ol > li {
display: block !important; /* Ensure list items stack vertically */
width: 100% !important;
}
ul > li:hover > ul > li > a,
ul > li:hover > ol > li > a,
ol > li:hover > ul > li > a,
ol > li:hover > ol > li > a,
ul > li:focus-within > ul > li > a,
ul > li:focus-within > ol > li > a,
ol > li:focus-within > ul > li > a,
ol > li:focus-within > ol > li > a {
display: block !important;
padding: 8px 15px !important; /* Padding for links */
white-space: nowrap !important; /* Prevent text wrapping */
/* Add other link styling as needed (color, text-decoration) */
}
/*
* Ensure the parent LI itself doesn't clip the submenu if it has overflow:hidden.
* This is a common issue.
*/
ul > li:hover,
ul > li:focus-within,
ol > li:hover,
ol > li:focus-within {
overflow: visible !important; /* Allow submenu to show */
position: relative !important; /* Often needed for absolute positioning of children */
}
/*
* Ensure that the focus style from `*:focus-visible` still applies to the
* links within the dropdown when they are focused. The rules above handle
* the *visibility* of the dropdown container.
*/