▸case-22 Specify the ARIA roles and keyboard interaction pattern (Arrow Up, Arrow Down, Arrow Right, Arrow Left) for a multi-level file explorer tree widget. | pass→pass | 11,808 | 8,704 | -26% | 1 | 1 | 0% | 2,040 | 2,257 | +11% | 0 | 0 | — |
▸case-01 When a user activates a trigger button to open a custom UI dialog overlay in a web application, standard CSS transitions reveal the modal element. A developer suggests only toggling visibility classes without executing JavaScript focus logic. Explain what must happen to DOM focus immediately when the dialog opens and provide the necessary implementation steps. | pass→pass | 13,008 | 11,416 | -12% | 1 | 1 | 0% | 2,597 | 2,576 | -1% | 0 | 0 | — |
▸case-02 In a JavaScript dialog component, clicking the close button hides the modal overlay. The developer intends to let focus default to document.body or remain on the hidden close button. Describe the required focus management action when the modal closes and how to implement it. | pass→pass | 9,022 | 5,908 | -35% | 1 | 1 | 0% | 1,833 | 1,590 | -13% | 0 | 0 | — |
▸case-03 After dynamic content loads in a web app, you need to programmatically move keyboard focus to a static heading (<h1 id="page-title">) so screen reader users hear the updated context. The developer considers adding tabindex="0" to the heading tag. Evaluate this proposal and specify the correct attribute and JavaScript call to use. | pass→pass | 7,227 | 7,789 | +8% | 1 | 1 | 0% | 1,340 | 1,711 | +28% | 0 | 0 | — |
▸case-04 In a Single Page Application built with client-side routing, user navigation updates the DOM with new page content without triggering a full browser refresh. By default, the browser leaves focus on the previously clicked link. Detail the complete focus management workflow required during client-side route transitions. | pass→pass | 14,766 | 9,977 | -32% | 1 | 1 | 0% | 2,696 | 2,552 | -5% | 0 | 0 | — |
▸case-05 A multi-step checkout web form dynamically appends step 2 fields into the DOM when step 1 completes. The engineering team assumes screen readers will handle this automatically without moving focus. Explain how focus should be managed for dynamic UI step transitions and provide the implementation approach. | fail→fail | 15,262 | 10,501 | -31% | 1 | 1 | 0% | 2,822 | 2,217 | -21% | 0 | 0 | — |
▸case-06 When keyboard users navigate inside an active modal dialog using the Tab key, focus can spill out into hidden background web page links. A developer suggests disabling all keyboard events on the body. Detail the proper method for containing keyboard focus inside an active modal dialog. | pass→pass | 12,371 | 10,844 | -12% | 1 | 1 | 0% | 2,437 | 2,271 | -7% | 0 | 0 | — |
▸case-07 Conduct an accessibility code review on this React modal hook: function useModal() { const [open, setOpen] = useState(false); const modalRef = useRef(); const openModal = () => setOpen(true); const closeModal = () => setOpen(false); return { open, openModal, closeModal, modalRef }; }. The UI currently traps focus inside the open modal, but when closeModal runs, focus drops to the document body. Identify the exact defect and state how to fix it. | pass→pass | 8,773 | 5,698 | -35% | 1 | 1 | 0% | 1,784 | 1,448 | -19% | 0 | 0 | — |
▸case-08 Review this client-side route handler snippet: function onRouteComplete(newPath) { renderView(newPath); }. Users report losing their place after navigating because focus stays on the former link. Perform a code review flagging the exact focus behavior issue and specify the code changes required. | pass→fail | 7,706 | 7,281 | -6% | 1 | 1 | 0% | 1,202 | 1,443 | +20% | 0 | 0 | — |
▸case-09 After reviewing and fixing focus management logic in a dynamic web application modal component, a developer asks how to verify the fix during code review using developer tools and assistive technology. Detail the specific verification methods. | pass→pass | 15,434 | 13,504 | -13% | 1 | 1 | 0% | 2,657 | 2,411 | -9% | 0 | 0 | — |
▸case-10 An asynchronous status alert banner (<div id="status-message">Order Saved</div>) is rendered onto the page after API response. You need to make this static element focusable via JavaScript without making it accessible through normal Tab key sequences. State the precise attribute to set and the JS call to execute. | pass→pass | 3,199 | 3,489 | +9% | 1 | 1 | 0% | 573 | 889 | +55% | 0 | 0 | — |
▸case-11 Perform a code review on this HTML/JS modal implementation: <div class='modal'><button id='close'>Close</button><input type='text'/></div>. Pressing Tab on the input moves focus to background navbar links behind the overlay. Flag the missing focus behavior rule and explain how to fix it. | pass→pass | 13,133 | 8,640 | -34% | 1 | 1 | 0% | 2,384 | 2,349 | -1% | 0 | 0 | — |
▸case-12 A popup dialog opens containing a heading, a text input, a submit button, and a close button. The developer asks where focus should land immediately upon overlay activation. Detail the expected initial focus target options. | pass→pass | 13,239 | 13,038 | -2% | 1 | 1 | 0% | 2,174 | 1,873 | -14% | 0 | 0 | — |
▸case-13 A responsive navigation drawer slides open when clicking a toggle button (<button id="menu-toggle">Menu</button>). When the user clicks the close drawer button, where must keyboard focus be directed? State the rule and implementation detail. | pass→pass | 6,971 | 5,242 | -25% | 1 | 1 | 0% | 1,171 | 1,269 | +8% | 0 | 0 | — |
▸case-14 Code review request: A developer updated a section heading in a web application to <h2 tabindex="0" id="section-2">Section 2</h2> and calls document.getElementById('section-2').focus() when navigating to section 2. Evaluate this code, flag the violation, and provide the correct code. | pass→pass | 8,944 | 8,689 | -3% | 1 | 1 | 0% | 1,576 | 1,768 | +12% | 0 | 0 | — |
▸case-15 In an interactive accordion widget, expanding a panel triggers an asynchronous fetch for details. Once loaded, how should focus be managed if the expanded section contains interactive actions the user explicitly requested? State the focus management procedure. | pass→pass | 10,421 | 8,804 | -16% | 1 | 1 | 0% | 1,690 | 1,651 | -2% | 0 | 0 | — |
▸case-16 Code review request: An auto-dismissing toast message appears when background data sync occurs: <div id="toast">Data synced</div> with JS document.getElementById('toast').focus(). The user is currently typing in a form text field. Identify the focus management violation in this implementation. | pass→pass | 9,904 | 7,125 | -28% | 1 | 1 | 0% | 1,728 | 1,398 | -19% | 0 | 0 | — |
▸case-17 Perform an accessibility code review on this custom modal component: <div id="my-modal"><p>Are you sure?</p><button onclick="deleteItem()">Yes</button></div>. List the exact elements, ARIA roles, focus behaviors, and keyboard interactions missing according to dynamic interaction standards. | pass→pass | 13,374 | 10,257 | -23% | 1 | 1 | 0% | 2,593 | 2,144 | -17% | 0 | 0 | — |
▸case-18 A user opens a confirmation modal from a table row's Delete button (<button id="del-123">Delete</button>). Confirming the action deletes the row from the DOM, unmounting the trigger button. Where should focus be returned upon modal closure to avoid focus loss? | pass→pass | 10,206 | 5,178 | -49% | 1 | 1 | 0% | 1,636 | 1,422 | -13% | 0 | 0 | — |
▸case-19 A developer builds a Skip to Main Content anchor link <a href="#main-content">Skip to content</a> targeting <main id="main-content">. To ensure focus is reliably placed on the main element when activated across all browsers, what markup attribute is required on the target? | pass→pass | 4,746 | 3,974 | -16% | 1 | 1 | 0% | 765 | 936 | +22% | 0 | 0 | — |
▸case-20 Write CSS code to style custom keyboard focus rings for HTML button elements using the :focus-visible pseudo-class. Ensure the outline has a 2px blue stroke and a 2px offset. | pass→pass | 6,015 | 8,841 | +47% | 1 | 1 | 0% | 1,004 | 1,252 | +25% | 0 | 0 | — |
▸case-21 Create an accessible HTML and ARIA structure for a complex SVG bar chart representing monthly sales data, including an accessible text description for screen reader users. | pass→pass | 17,995 | 22,668 | +26% | 1 | 1 | 0% | 3,707 | 5,022 | +35% | 0 | 0 | — |