fix: drawer console warning #4871
Conversation
|
WalkthroughThis pull request introduces several changes across multiple files. In Changes
Possibly related PRs
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/@core/ui-kit/popup-ui/src/drawer/drawer.vueOops! Something went wrong! :( ESLint: 9.14.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/@vben/eslint-config/dist/index.mjs' imported from /eslint.config.mjs Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue (2)
181-186: Great accessibility improvement!The addition of hidden ARIA landmarks when no visible title/description is present ensures better screen reader compatibility and maintains a consistent DOM structure.
Consider documenting this accessibility feature in the component's documentation to help other developers understand its purpose and importance.
181-186: Consider enhancing accessibility furtherWhile the hidden elements improve accessibility, consider adding these enhancements:
<template v-else> - <VisuallyHidden> + <VisuallyHidden + role="dialog" + :aria-label="$t('drawer')" + :aria-modal="modal"> <SheetTitle /> <SheetDescription /> </VisuallyHidden> </template>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
packages/@core/base/shared/src/utils/download.ts(0 hunks)packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue(1 hunks)packages/effects/plugins/package.json(0 hunks)pnpm-workspace.yaml(9 hunks)
💤 Files with no reviewable changes (2)
- packages/@core/base/shared/src/utils/download.ts
- packages/effects/plugins/package.json
🔇 Additional comments (3)
pnpm-workspace.yaml (2)
16-16: Dependency updates look safe.
The remaining updates are mostly patch and minor version bumps that should maintain backward compatibility:
- Build tools: postcss (^8.4.47 → ^8.4.49), vite (^5.4.10 → ^5.4.11)
- Linting: typescript-eslint, eslint plugins
- Testing: happy-dom (^15.11.0 → ^15.11.2)
- UI components: vxe-table (^4.8.9 → ^4.8.10)
These changes appear to be routine maintenance updates.
Also applies to: 30-30, 33-33, 52-53, 91-91, 93-93, 102-102, 108-108, 127-127, 131-131, 152-152, 162-162, 168-168, 177-178
56-57: Review Vue ecosystem updates for drawer warning fix.
The updates to Vue-related packages could be relevant to fixing the drawer console warning:
@vitejs/plugin-vue: ^5.1.4 → ^5.1.5@vitejs/plugin-vue-jsx: ^4.0.1 → ^4.1.0ant-design-vue: ^4.2.5 → ^4.2.6
Please verify that these updates don't introduce any new console warnings.
Also applies to: 63-63
packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue (1)
Line range hint 89-92: Verify focus management behavior
The current implementation of handleFocusOutside aggressively blocks all focus-related events. This could impact keyboard navigation accessibility.
Let's check if other drawer implementations in the codebase handle focus differently:
✅ Verification successful
Let me gather more information about the focus handling implementation in both drawer and modal components.
Let me try one more search with different patterns to find the focus handling implementations.
Focus event blocking is consistent with modal pattern
The aggressive focus management implementation is actually correct and consistent across both drawer and modal components. This is a standard pattern for modal/drawer components where:
- Both components use identical focus management to maintain focus within the modal/drawer
- Preventing event propagation is necessary to trap focus within these components for accessibility
- The implementation aligns with WAI-ARIA modal dialog patterns where focus should be contained
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for similar drawer components and their focus handling
ast-grep --pattern 'function handle$_Focus($_) {
$$$
}'
# Search for focus-related event handlers
rg -A 3 '@(focus-outside|close-auto-focus)'
Length of output: 1344
Script:
#!/bin/bash
# Check the implementation of handleFocusOutside in both components
ast-grep --pattern 'function handleFocusOutside($_) {
$$$
}'
# Check for any focus-trap or focus management related imports
rg -l "focus-trap|focus.*management"
# Look for any accessibility-related comments or documentation
rg -i "a11y|accessibility|keyboard.*navigation"
Length of output: 168
Script:
#!/bin/bash
# Search for the handleFocusOutside function with a more specific pattern
ast-grep --pattern 'handleFocusOutside(e) {
$$$
}'
# Also try searching with ripgrep for the function definition
rg -A 5 "handleFocusOutside.*\{"
# Check if there are any focus-related utilities or composables
fd -e ts -e js -e vue . | xargs rg "useFocus|createFocus"
Length of output: 992
Description
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
Release Notes
New Features
Bug Fixes
Chores