Open VaniChinnam opened 7 months ago
scurker
commented
7 months ago @VaniChinnam I'm having a little trouble following exactly what the issue is here. What element is focus being obscured on? I tested the page myself and all of the focusable elements appear to have focus, so maybe I'm missing something.
VaniChinnam
commented
6 months ago @scurker The elements are receiving focus and have visible focus but the elements are not visible to the users when focused because of the sticky header/ sticky footer. Attached the NVDA speech viewer.
Still yes button during shift+tab navigation - Not visible due to sticky header
Source link during shift+tab navigation - Not visible due to sticky header
Still Yes button during tab key navigation - Not visible due to sticky footer
Current Behaviour
The focused element is completely covered by other author-created content. Element description 1: "Still Yes" button. Element location: In Example, under "Do you like coffee?". Description of the issue: The Focus element is completely covered while tabbing through the "tab" key. Focus is not at all visible to the user.
Element Description 2: "Source" link and "Still Yes" radio button. Element location: In the "Radio card group".
Note: The above-mentioned elements are completely covered by the header section on the "Shift- tab" focus.
Expected Behaviour
RULE : When a user interface component receives keyboard focus, the component MUST NOT be entirely hidden due to author-created content. HOW TO FIX: Fix this issue by using an applicable technique below: For content such as sticky headers, sticky footers, cookie consent banners, etc: 1. Use a technique such as CSS scroll-padding to ensure sticky headers or sticky footers do not obscure the focused item when tabbing forward or backward through the page. For overlays such as non-modal dialogs, tooltips, submenus, chat widgets, message panels, etc. that are opened and closed BY THE USER (e.g. by using the Spacebar or Enter key or when tabbed to): 1. Position the popup so it does not cover other focusable content OR 2. Make the content modal and move focus to it and trap focus in it OR 3. Close the content when focus leaves it OR 4. Provide a way for the user to close the overlay content (e.g. the ESC key) while focus is on an item behind the overlay. For overlays such as non-modal dialogs, popups, submenus, chat widgets, message panels, etc. that open AUTOMATICALLY: 1. Position the popup so it does not cover other focusable content OR 2. Make the content modal and move focus to it and trap focus in it OR 3. Don’t open the content automatically. Allow the user to open and close it and follow the recommendations for user-controlled content above. For content such as modal dialogs that don’t automatically get and trap focus when opened: 1. Move focus to the modal dialog and trap focus inside it.Impact
- [ ] Blocker - [ ] Serious - [ ] Critical - [x] Moderate - [ ] Minor ### Issue Details
View Issue 1625838
_**Auditor ID**_ : [1625838](https://axeauditor.dequecloud.com/issue-global-search?searchKeyword=1625838&searchOn=id) _**description**_ : undefined _**Page Name**_ : Radio card group _**source**_ : `