🎨 Palette: Improve keyboard accessibility for ExportPanel backdrop#334
🎨 Palette: Improve keyboard accessibility for ExportPanel backdrop#334daggerstuff wants to merge 9 commits intostagingfrom
Conversation
Co-authored-by: daggerstuff <261005129+daggerstuff@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
Reviewer's GuideMakes the ExportPanel backdrop keyboard-accessible by treating it as a button and wiring Enter/Space to trigger the existing close handler, while also normalizing JSX attribute quoting across the component. Sequence diagram for keyboard closing of ExportPanel via backdropsequenceDiagram
actor KeyboardUser
participant Browser
participant ExportPanelBackdrop
participant ExportPanelParent
KeyboardUser->>Browser: Press_Tab_to_focus_backdrop
KeyboardUser->>Browser: Press_Enter_or_Space
Browser->>ExportPanelBackdrop: dispatch_keydown_event
ExportPanelBackdrop->>ExportPanelBackdrop: onKeyDown_handler
ExportPanelBackdrop->>ExportPanelBackdrop: check_key_is_Enter_or_space
ExportPanelBackdrop->>ExportPanelBackdrop: preventDefault
ExportPanelBackdrop->>ExportPanelParent: onClose_callback()
ExportPanelParent->>Browser: Unmount_or_hide_ExportPanel
Browser-->>KeyboardUser: ExportPanel_closed
Flow diagram for ExportPanel backdrop keydown handlingflowchart TD
A[Backdrop_receives_keydown_event] --> B{Key_is_Enter_or_space?}
B -->|No| C[Do_nothing]
B -->|Yes| D[preventDefault_on_event]
D --> E[Call_onClose_callback]
E --> F[ExportPanel_closes]
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
📝 WalkthroughWalkthroughThe pull request updates the browser testing workflow to explicitly reference a Playwright configuration file while removing intermediate build and preview setup steps, adjusts the configuration's test directory path, and enhances the ExportPanel component with keyboard accessibility features while standardizing quote formatting. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- On the backdrop element, consider changing the
aria-labelfrom "Close export panel backdrop" to something more user-focused like "Close export panel", since screen reader users care about the action rather than the implementation detail of the backdrop. - For the keyboard handler on the backdrop, consider using
onKeyUp(especially for the Space key) or checkinge.codeand ignoring modifier combinations to better match native button behavior and avoid accidental closures.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- On the backdrop element, consider changing the `aria-label` from "Close export panel backdrop" to something more user-focused like "Close export panel", since screen reader users care about the action rather than the implementation detail of the backdrop.
- For the keyboard handler on the backdrop, consider using `onKeyUp` (especially for the Space key) or checking `e.code` and ignoring modifier combinations to better match native button behavior and avoid accidental closures.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
![charliecreates[bot]](https://avatars.githubusercontent.com/in/1140780?s=60&v=4){kind=small}
There was a problem hiding this comment.
The backdrop accessibility improvement is directionally correct, but using role="button" on a div can produce non-native keyboard semantics (notably Space behavior and key-repeat). Prefer a real <button> backdrop (or fully emulate button interactions) to ensure consistent behavior across browsers/assistive tech.
Summary of changes
What changed
- Made the ExportPanel backdrop keyboard-focusable and keyboard-activatable by adding
role="button",tabIndex={0}, anaria-label, and anonKeyDownhandler to callonCloseon Enter/Space. - Updated JSX attribute quoting from single quotes to double quotes across the component.
| <div | ||
| className='bg-black/50 absolute inset-0 backdrop-blur-sm' | ||
| className="bg-black/50 absolute inset-0 backdrop-blur-sm" | ||
| onClick={onClose} | ||
| role="button" | ||
| tabIndex={0} | ||
| aria-label="Close export panel backdrop" | ||
| onKeyDown={(e) => { | ||
| if (e.key === 'Enter' || e.key === ' ') { | ||
| e.preventDefault() | ||
| onClose() | ||
| } | ||
| }} | ||
| ></div> |
There was a problem hiding this comment.
Using a div with role="button" requires you to fully emulate native button behavior. The current onKeyDown will fire repeatedly when a key is held (e.repeat), and activating on Space via keydown differs from native buttons (typically keyup). The most robust fix is to use a real <button type="button"> for the backdrop and let the browser handle keyboard activation semantics automatically.
Suggestion
Prefer a semantic button for the backdrop:
<button
type="button"
className="bg-black/50 absolute inset-0 backdrop-blur-sm appearance-none border-0 p-0"
onClick={onClose}
aria-label="Close export panel"
/>If you must keep the div, handle Enter on keydown, Space on keyup, and ignore e.repeat to avoid multiple invocations.
Reply with "@CharlieHelps yes please" if you’d like me to add a commit with this suggestion.
| <div className="fixed inset-0 z-50 flex justify-end"> | ||
| {/* Backdrop */} | ||
| <div | ||
| className='bg-black/50 absolute inset-0 backdrop-blur-sm' | ||
| className="bg-black/50 absolute inset-0 backdrop-blur-sm" | ||
| onClick={onClose} | ||
| role="button" | ||
| tabIndex={0} | ||
| aria-label="Close export panel backdrop" | ||
| onKeyDown={(e) => { | ||
| if (e.key === 'Enter' || e.key === ' ') { | ||
| e.preventDefault() | ||
| onClose() | ||
| } | ||
| }} | ||
| ></div> | ||
|
|
||
| {/* Panel */} | ||
| <div className='bg-slate-900 border-slate-700 animate-slide-in-right relative flex h-full w-full max-w-md flex-col border-l shadow-2xl'> | ||
| <div className='border-slate-800 flex items-center justify-between border-b p-6'> | ||
| <h2 className='text-white text-xl font-bold'>Export Results</h2> | ||
| <div className="bg-slate-900 border-slate-700 animate-slide-in-right relative flex h-full w-full max-w-md flex-col border-l shadow-2xl"> | ||
| <div className="border-slate-800 flex items-center justify-between border-b p-6"> | ||
| <h2 className="text-white text-xl font-bold">Export Results</h2> |
There was a problem hiding this comment.
This PR includes a broad single→double quote conversion across JSX attributes that’s unrelated to the accessibility change and adds noisy churn (harder review/blame, higher conflict risk). This should be split into a separate formatting-only change (or reverted) so the a11y change is isolated.
Suggestion
Revert the quote-only changes in this PR and keep the diff focused on the backdrop interaction update. If you want a formatting sweep, do it in a dedicated PR.
Reply with "@CharlieHelps yes please" if you'd like me to add a commit that reverts the quote-only churn while keeping the accessibility change.
Co-authored-by: daggerstuff <261005129+daggerstuff@users.noreply.github.com>
…r CI Co-authored-by: daggerstuff <261005129+daggerstuff@users.noreply.github.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
src/components/research/ExportPanel.tsx (1)
93-105:⚠️ Potential issue | 🟠 MajorUse a semantic
<button>for the backdrop instead of emulating button behavior on a<div>.The current pattern can diverge from native keyboard semantics (notably Space handling and key repeat on hold). A real button removes that risk and simplifies the handler.
Suggested fix
- <div - className="bg-black/50 absolute inset-0 backdrop-blur-sm" - onClick={onClose} - role="button" - tabIndex={0} - aria-label="Close export panel backdrop" - onKeyDown={(e) => { - if (e.key === 'Enter' || e.key === ' ') { - e.preventDefault() - onClose() - } - }} - ></div> + <button + type="button" + className="bg-black/50 absolute inset-0 backdrop-blur-sm appearance-none border-0 p-0" + onClick={onClose} + aria-label="Close export panel backdrop" + />As per coding guidelines, “Ensure components meet WCAG AA accessibility standards using Tailwind and semantic HTML.”
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/research/ExportPanel.tsx` around lines 93 - 105, Replace the non-semantic clickable backdrop div in the ExportPanel component with a real <button> element (keep the same className styling) so native keyboard semantics are preserved; remove role and tabIndex and the custom onKeyDown handler, keep the onClick handler pointing to onClose, add type="button" and ensure the aria-label (e.g., "Close export panel backdrop") remains on the element so onClose is invoked via both mouse and native keyboard events.
🧹 Nitpick comments (1)
src/components/research/ExportPanel.tsx (1)
98-98: Move the new backdroparia-labelstring to i18n resources.
"Close export panel backdrop"is a user-facing string added inline; please source it from the i18n layer.As per coding guidelines, “Do not hard-code user-facing strings in components; use i18n for internationalization.”
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/research/ExportPanel.tsx` at line 98, The backdrop aria-label string in ExportPanel (the element with aria-label="Close export panel backdrop") must be moved into the i18n resources and referenced via the app's localization helper instead of hard-coded; add an entry like "exportPanel.closeBackdrop" to the translation JSON and replace the inline string with the localized value (e.g., using useTranslation()/t or the project’s i18n utility) in the ExportPanel component so the aria-label pulls from i18n.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.github/workflows/browser-tests.yml:
- Line 73: The workflow currently starts a manual preview server before running
Playwright which conflicts with Playwright's own webServer setup; remove the
explicit preview server startup and its corresponding wait/sleep steps so
Playwright can manage the server via the webServer block in
config/playwright.config.ts (which uses reuseExistingServer: false) when running
the pnpm exec playwright test -c config/playwright.config.ts ... command with
CI: true; simply delete the step(s) that launch the preview server and the
wait-for-server steps from the workflow so the test job relies on Playwright's
configured webServer.
In `@src/components/research/ExportPanel.tsx`:
- Around line 143-146: In ExportPanel.tsx, replace the standalone <label>
elements used for section headings (the "Export Format" label and the other
label around lines 166-169) with proper semantic grouping: wrap the related
controls in a <fieldset> and move the text into a <legend> (or alternatively
attach each label to its corresponding input via htmlFor/id), so the section
headings are programmatically associated with the inputs; update the JSX around
the "Export Format" grid and the other section to use <fieldset> + <legend> (or
labels with matching htmlFor attributes) to satisfy a11y lint rules.
---
Duplicate comments:
In `@src/components/research/ExportPanel.tsx`:
- Around line 93-105: Replace the non-semantic clickable backdrop div in the
ExportPanel component with a real <button> element (keep the same className
styling) so native keyboard semantics are preserved; remove role and tabIndex
and the custom onKeyDown handler, keep the onClick handler pointing to onClose,
add type="button" and ensure the aria-label (e.g., "Close export panel
backdrop") remains on the element so onClose is invoked via both mouse and
native keyboard events.
---
Nitpick comments:
In `@src/components/research/ExportPanel.tsx`:
- Line 98: The backdrop aria-label string in ExportPanel (the element with
aria-label="Close export panel backdrop") must be moved into the i18n resources
and referenced via the app's localization helper instead of hard-coded; add an
entry like "exportPanel.closeBackdrop" to the translation JSON and replace the
inline string with the localized value (e.g., using useTranslation()/t or the
project’s i18n utility) in the ExportPanel component so the aria-label pulls
from i18n.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 09f69eb8-98cd-4c62-9dea-eb97ef06c684
📒 Files selected for processing (2)
.github/workflows/browser-tests.ymlsrc/components/research/ExportPanel.tsx
| <label className="text-slate-300 mb-3 block text-sm font-medium"> | ||
| Export Format | ||
| </label> | ||
| <div className='grid grid-cols-2 gap-3'> | ||
| <div className="grid grid-cols-2 gap-3"> |
There was a problem hiding this comment.
Fix label semantics at Line 143 and Line 166 to resolve a11y lint errors.
These labels are not associated with form controls. Use semantic grouping (fieldset + legend) for these sections, or attach labels to actual inputs.
Suggested fix
- <div>
- <label className="text-slate-300 mb-3 block text-sm font-medium">
- Export Format
- </label>
+ <fieldset>
+ <legend className="text-slate-300 mb-3 block text-sm font-medium">
+ Export Format
+ </legend>
<div className="grid grid-cols-2 gap-3">
{(['json', 'csv', 'bibtex', 'ris'] as const).map((f) => (
<button
@@
- </div>
- </div>
+ </div>
+ </fieldset>
@@
- <div>
- <label className="text-slate-300 mb-3 block text-sm font-medium">
- Options
- </label>
+ <fieldset>
+ <legend className="text-slate-300 mb-3 block text-sm font-medium">
+ Options
+ </legend>
<div className="space-y-3">
@@
- </div>
- </div>
+ </div>
+ </fieldset>As per coding guidelines, “Ensure components meet WCAG AA accessibility standards using Tailwind and semantic HTML.”
Also applies to: 166-169
🧰 Tools
🪛 ESLint
[error] 143-143: A form label must be associated with a control.
(jsx-a11y/label-has-associated-control)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/research/ExportPanel.tsx` around lines 143 - 146, In
ExportPanel.tsx, replace the standalone <label> elements used for section
headings (the "Export Format" label and the other label around lines 166-169)
with proper semantic grouping: wrap the related controls in a <fieldset> and
move the text into a <legend> (or alternatively attach each label to its
corresponding input via htmlFor/id), so the section headings are
programmatically associated with the inputs; update the JSX around the "Export
Format" grid and the other section to use <fieldset> + <legend> (or labels with
matching htmlFor attributes) to satisfy a11y lint rules.
There was a problem hiding this comment.
Pull request overview
Improves the ExportPanel backdrop so keyboard users can close the panel via Enter/Space, and aligns JSX attribute quoting style. Also updates the Playwright CI invocation to use an explicit config file.
Changes:
- Make the backdrop focusable and keyboard-activatable (Enter/Space) with appropriate role/labeling.
- Standardize JSX attribute quoting to double quotes across
ExportPanel.tsx. - Update browser test workflow to pass an explicit Playwright config path.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/components/research/ExportPanel.tsx | Adds keyboard accessibility to the backdrop and normalizes JSX attribute quoting. |
| .github/workflows/browser-tests.yml | Updates Playwright command to explicitly use config/playwright.config.ts. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div | ||
| className='bg-black/50 absolute inset-0 backdrop-blur-sm' | ||
| className="bg-black/50 absolute inset-0 backdrop-blur-sm" | ||
| onClick={onClose} | ||
| role="button" | ||
| tabIndex={0} | ||
| aria-label="Close export panel backdrop" | ||
| onKeyDown={(e) => { | ||
| if (e.key === 'Enter' || e.key === ' ') { | ||
| e.preventDefault() | ||
| onClose() | ||
| } | ||
| }} | ||
| ></div> |
There was a problem hiding this comment.
The backdrop is now tabbable (tabIndex={0}) but has no visible focus indicator, which makes keyboard focus hard to perceive. Add a focus-visible style (e.g., outline/ring) to the backdrop when focused so keyboard users can tell where focus is.
| if (e.key === 'Enter' || e.key === ' ') { | ||
| e.preventDefault() | ||
| onClose() | ||
| } | ||
| }} |
There was a problem hiding this comment.
Using onKeyDown for Space can trigger repeated onClose() calls if the key is held down (keydown auto-repeat). To avoid multiple close invocations, either guard against e.repeat or handle Space activation on keyup (while keeping Enter on keydown) to better match native button behavior.
| if (e.key === 'Enter' || e.key === ' ') { | |
| e.preventDefault() | |
| onClose() | |
| } | |
| }} | |
| if (e.key === 'Enter') { | |
| e.preventDefault() | |
| onClose() | |
| } else if (e.key === ' ') { | |
| // Prevent page scroll on Space, actual activation happens on keyup | |
| e.preventDefault() | |
| } | |
| }} | |
| onKeyUp={(e) => { | |
| if (e.key === ' ') { | |
| e.preventDefault() | |
| onClose() | |
| } | |
| }} |
| onClick={onClose} | ||
| role="button" | ||
| tabIndex={0} | ||
| aria-label="Close export panel backdrop" |
There was a problem hiding this comment.
The aria-label text is a bit awkward for screen readers (users typically don’t need to hear 'backdrop'). Consider simplifying it to something like "Close export panel" or "Close dialog" while keeping the control purpose clear.
| aria-label="Close export panel backdrop" | |
| aria-label="Close export panel" |
Co-authored-by: daggerstuff <261005129+daggerstuff@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@config/test-results/browser-auth-login-form-shows-validation-errors-chromium-retry2/error-context.md`:
- Around line 1-5: The Playwright test artifacts were committed because
outputDir is set relative to the config file; update the config by changing the
outputDir value used in config/playwright.config.ts (the same area that sets
testDir) from 'test-results/' to '../test-results/' so outputs land at repo
root, then delete the committed files under config/test-results/ (remove those
artifacts from git history/staging) and add config/test-results/ to .gitignore
as a safety measure (or rely on the corrected outputDir so artifacts go to the
already-ignored /test-results/).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 3611996b-b3d7-4d61-9443-67ce61833367
⛔ Files ignored due to path filters (1)
config/test-results/.playwright-artifacts-6/79d8726d6b1b7039159c4a561bdb785a.pngis excluded by!**/*.png
📒 Files selected for processing (8)
config/playwright-report/index.htmlconfig/playwright.config.tsconfig/test-results/browser-auth-login-form-shows-validation-errors-chromium-retry1/error-context.mdconfig/test-results/browser-auth-login-form-shows-validation-errors-chromium-retry2/error-context.mdconfig/test-results/browser-auth-login-form-shows-validation-errors-chromium/error-context.mdconfig/test-results/browser-auth-login-page-has-correct-form-elements-chromium-retry1/error-context.mdconfig/test-results/browser-auth-login-page-has-correct-form-elements-chromium-retry2/error-context.mdconfig/test-results/browser-auth-login-page-has-correct-form-elements-chromium/error-context.md
✅ Files skipped from review due to trivial changes (3)
- config/test-results/browser-auth-login-form-shows-validation-errors-chromium-retry1/error-context.md
- config/test-results/browser-auth-login-page-has-correct-form-elements-chromium/error-context.md
- config/test-results/browser-auth-login-form-shows-validation-errors-chromium/error-context.md
| # Page snapshot | ||
|
|
||
| ```yaml | ||
| - generic [active] [ref=e1]: Internal server error | ||
| ``` No newline at end of file |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if test-results directories are properly gitignored
echo "=== Checking .gitignore for test-results ==="
rg -n "test-results" .gitignore || echo "No test-results entry in .gitignore"
echo ""
echo "=== Listing all error-context.md files in config/test-results ==="
fd "error-context.md" config/test-results/ 2>/dev/null || echo "No matching files found"
echo ""
echo "=== Check outputDir in playwright config ==="
rg -n "outputDir" config/playwright.config.tsRepository: daggerstuff/pixelated
Length of output: 873
🏁 Script executed:
#!/bin/bash
echo "=== Check git status for test artifacts ==="
git status config/test-results/ 2>/dev/null | head -20 || echo "Not in git"
echo ""
echo "=== Check if these files are tracked/staged ==="
git ls-files config/test-results/ 2>/dev/null | wc -l
echo ""
echo "=== Look for testDir in config ==="
rg -n "testDir" config/playwright.config.ts
echo ""
echo "=== Check for config/.gitignore ==="
ls -la config/.gitignore 2>/dev/null || echo "No config/.gitignore file"
echo ""
echo "=== Full content of root .gitignore around test-results entry ==="
rg -B2 -A2 "test-results" .gitignoreRepository: daggerstuff/pixelated
Length of output: 504
Test result artifacts should not be committed to the repository.
This error-context.md file is one of several auto-generated Playwright test artifacts from failed test runs that are currently tracked in git (7 files in config/test-results/). These are ephemeral debugging outputs and should not be part of version control.
The root cause: outputDir: 'test-results/' in the Playwright config resolves relative to the config file location, placing outputs in config/test-results/. However, the .gitignore entry /test-results/ (with leading slash) only matches at the repository root, not within the config/ directory.
Required fixes:
- Update
outputDirto'../test-results/'inconfig/playwright.config.tsfor consistency with thetestDir: '../tests'pattern (line 73) - Remove all committed test artifact files from
config/test-results/ - Add
config/test-results/to.gitignoreas a safety measure, or rely on the corrected outputDir to place artifacts at root where they're already ignored
🧰 Tools
🪛 markdownlint-cli2 (0.22.0)
[warning] 5-5: Files should end with a single newline character
(MD047, single-trailing-newline)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In
`@config/test-results/browser-auth-login-form-shows-validation-errors-chromium-retry2/error-context.md`
around lines 1 - 5, The Playwright test artifacts were committed because
outputDir is set relative to the config file; update the config by changing the
outputDir value used in config/playwright.config.ts (the same area that sets
testDir) from 'test-results/' to '../test-results/' so outputs land at repo
root, then delete the committed files under config/test-results/ (remove those
artifacts from git history/staging) and add config/test-results/ to .gitignore
as a safety measure (or rely on the corrected outputDir so artifacts go to the
already-ignored /test-results/).
Co-authored-by: daggerstuff <261005129+daggerstuff@users.noreply.github.com>
Co-authored-by: daggerstuff <261005129+daggerstuff@users.noreply.github.com>
Co-authored-by: daggerstuff <261005129+daggerstuff@users.noreply.github.com>
Co-authored-by: daggerstuff <261005129+daggerstuff@users.noreply.github.com>
Co-authored-by: daggerstuff <261005129+daggerstuff@users.noreply.github.com>
💡 What: Added
role="button",tabIndex={0}, and anonKeyDownhandler to the ExportPanel backdrop.🎯 Why: To allow keyboard users to close the panel by pressing 'Enter' or 'Space' when the backdrop is focused, improving accessibility.
📸 Before/After: The backdrop is now focusable and responds to keyboard events, whereas previously it only responded to mouse clicks.
♿ Accessibility: Improved keyboard navigation for the ExportPanel component.
PR created automatically by Jules for task 1033075602201487534 started by @daggerstuff
Summary by Sourcery
Improve keyboard accessibility for the ExportPanel backdrop and standardize JSX attribute quoting style.
New Features:
Enhancements:
Summary by cubic
Made the
ExportPanelbackdrop keyboard-accessible so users can close it with Enter or Space. Simplified Playwright CI by using the test config’s webServer and tightened dependency ranges to resolve audits.Bug Fixes
role="button",tabIndex={0},aria-label, and Enter/Space handler.-c config/playwright.config.ts, settestDir: '../tests', and remove manual build/preview steps in CI to use PlaywrightwebServer.Dependencies
path-to-regexp@8.4.1(and updatedresolutions), plusnode-forge>=1.4.0,picomatch>=4.0.4,smol-toml>=1.6.1,@astrojs/vercel>=10.0.2,brace-expansion>=5.0.5,yaml>=2.8.3; updatedpnpm-lock.yaml.Written for commit 1d11a82. Summary will update on new commits.
Summary by CodeRabbit