onnxruntime
4efcb865 - Add focus-visible indicator to scrolling cards in Trusted By section (#26933)

Commit
31 days ago
Add focus-visible indicator to scrolling cards in Trusted By section (#26933) Keyboard users and low vision users cannot see focus on the scrolling logo cards in the Trusted By section, violating MAS 2.4.7 Focus Visible requirements. ### Changes - Added `focus-visible:ring-4` and `focus-visible:ring-primary` classes to anchor tags in `InfiniteMovingCards.svelte` - Added `block h-full w-full` to make the entire card area clickable and focusable - Added `focus-visible:ring-offset-2` for clear visual separation ### Before/After Before: No visible focus indicator when tabbing through cards After: ![Focus ring visible on card](https://github.com/user-attachments/assets/7525d0c3-169e-47fa-a852-3d52aaac0be6) The focused card now displays a 4px cyan ring when navigated via keyboard, making focus state clearly visible. <!-- START COPILOT ORIGINAL PROMPT --> <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>Focus is not visible on Scrolling cards under Trusted By section: A11y_ONNX Runtime & Ecosystem_Runtime_Focus Visible</issue_title> > <issue_description>#A11yTCS #A11yMAS #A11ySev2 #MAS2.4.7#FocusVisible #DesktopWeb #Chrome #Win11 #BM_ONNX Runtime & Ecosystem_Web_June2025; #ONNX Runtime & Ecosystem; #Benchmark #rev:moda > **"Please do not close this bug. This bug should only be closed by TCS, C+AI Accessibility tester after bug verification."** > ### Environment Details: > Application Name: WCP URLs - ONNX Runtime > URL: https://onnxruntime.ai/ > Chrome Version: 120.0.6099.130 > OS: Windows 11 version 23H2 > > ### Steps to Reproduce > > 1. Hit the URL "https://onnxruntime.ai/". > 2. "ONNX Runtime" home page appeared. > 3. Tab till "Toggle Scrolling" button and press enter. > 4. Tab till the scrolling cards. > 5. Observe that Focus is not visible on the cards. > ###Actual: > Focus is not visible on the scrolling cards under the Trusted By section. > **Note: Env is inconsistent some times issue is not repro** > ### Expected: > Focus should be visible on the scrolling cards under the Trusted By section. > ### User Impact: > keyboard users and low vision users will face difficulties if focus is not visible on the cards. > ### Recommendations: > Refer[ Developer Resources (sharepoint.com)] > ### MAS Reference: > [MAS 2.4.7 – Focus Visible](https://aka.ms/MAS2.4.7) > Check out [MAS 2.4.7: Focus Visible Guide](https://microsoft.sharepoint.com/sites/accessibility/SitePages/MAS-2.4.7-Focus-Visible-Guide.aspx?) > Attachment > > [A11y_ONNX Runtime & Ecosystem_Runtime_Focus Visible 2.zip](https://github.com/user-attachments/files/20654734/A11y_ONNX.Runtime.Ecosystem_Runtime_Focus.Visible.2.zip)</issue_description> > > <agent_instructions>fix the issue and open a PR</agent_instructions> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> <!-- START COPILOT CODING AGENT SUFFIX --> - Fixes microsoft/onnxruntime#24996 <!-- START COPILOT CODING AGENT TIPS --> --- ✨ Let Copilot coding agent [set things up for you](https://github.com/microsoft/onnxruntime/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: MaanavD <24942306+MaanavD@users.noreply.github.com>
Author
Parents
Loading