feat: accessibility improvements #363
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次变更主要包含对 Collapse 组件及其子组件（Panel、PanelContent）的增强改造，同时对样式文件和测试用例进行了相应更新。CSS 中扩展了 header 的选择器以支持包裹结构；组件中新增了通过 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant C as Collapse组件
participant H as useItems钩子
participant P as Panel组件
participant W as HeaderWrapper
U->>C: 请求渲染 Collapse
C->>C: 检查是否提供 id（无则使用 useId 生成）
C->>H: 传递 id 与 headingLevel
H->>P: 将 id（可能附加索引）和 headingLevel 传给各 Panel
P->>W: 根据 headingLevel 包装 header
W-->>P: 返回处理后的 header
Possibly related PRs
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
src/Collapse.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. src/hooks/useItems.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. src/Panel.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 30th. To opt out, configure 📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (3)
🧰 Additional context used🧬 Code Graph Analysis (1)tests/index.spec.tsx (2)
🔇 Additional comments (7)
✨ Finishing Touches
🧪 Generate Unit Tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
src/Collapse.tsx
Outdated
| @@ -6,6 +6,7 @@ import useItems from './hooks/useItems'; | |||
| import type { CollapseProps } from './interface'; | |||
| import CollapsePanel from './Panel'; | |||
| import pickAttrs from '@rc-component/util/lib/pickAttrs'; | |||
| import { v4 as uuid4 } from 'uuid'; | |||
There was a problem hiding this comment.
Can we try not to rely on additional third-party packages?
There was a problem hiding this comment.
We do not need to add this - the purpose was to create a default ID that is unique across multiple react applications that are rendered at the same time. However, if a consumer needs that, they can pass in an ID so I will go ahead and remove this package.
|
@yoyo837 I removed the uuid package, ready for re-review. |
src/hooks/useItems.tsx
Outdated
| @@ -71,6 +80,8 @@ const convertItemsToNodes = (items: ItemType[], props: Props) => { | |||
| collapsible={mergeCollapsible} | |||
| onItemClick={handleItemClick} | |||
| destroyInactivePanel={mergeDestroyInactivePanel} | |||
| headingLevel={headingLevel} | |||
| id={id ? `${id}__item-${index}` : undefined} | |||
There was a problem hiding this comment.
You can use rc-util useId hooks in Panel. It support to use user pass id and fallback with ReactID if not have.
| </div> | ||
| {showArrow && iconNode} | ||
| <span | ||
| className={classNames(`${prefixCls}-title`, customizeClassNames?.title)} |
There was a problem hiding this comment.
replace this with HeadingElement instead of span directly. It's no need to have additional HeaderWrapper.
There was a problem hiding this comment.
I can change HeaderWrapper, but replacing the span would not satisfy the a11y standards for collapse / accordion components. The heading element should wrap the header button, which is where HeaderWrapper is in this PR. Would you prefer it to be a div that is always present around the button, instead of conditionally rendered, but it only would have the heading role and aria-level when the prop is defined?
There was a problem hiding this comment.
OK. So you can add on the rc-collapse-header directly.
There was a problem hiding this comment.
Update - the rc-collapse-header element gets the button role, so to satisfy the a11y standards for the header, I changed to a div element that always wraps rc-collapse-header and will conditionally have the heading role and aria-level props set.
|
Trace #362 |
src/Collapse.tsx
Outdated
| @@ -77,6 +81,8 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) => | |||
| activeKey, | |||
| classNames: customizeClassNames, | |||
| styles, | |||
| headingLevel, | |||
| id: collapseId, | |||
src/Panel.tsx
Outdated
| @@ -85,20 +88,38 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop | |||
| ...(['header', 'icon'].includes(collapsible) ? {} : collapsibleProps), | |||
| }; | |||
|
|
|||
| const HeaderWrapper = ({ children: headerWrapperChildren }: PropsWithChildren) => { | |||
There was a problem hiding this comment.
HeaderWrapper not satisfied with our semantic rule. You can just assign the heading role on the rc-collapse-title element instead of create new element.
https://github.com/react-component/collapse/pull/363/files#r2092418393
src/hooks/useItems.tsx
Outdated
| @@ -142,6 +155,8 @@ const getNewChild = ( | |||
| onItemClick: handleItemClick, | |||
| expandIcon, | |||
| collapsible: mergeCollapsible, | |||
| headingLevel, | |||
| id: id ? `${id}__item-${index}` : undefined, | |||
|
@jon-cullison is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
Implements 2/3 of the proposed changes here:
ant-design/ant-design#53203
I did not implement the panel role change because there is already some logic around setting the panel role to "tabpanel" when in accordion mode, and the panel role = "region" is optional for a11y purposes.
headingLevelprop which will wrap the collapse header in a header elementidprop which will override the default id mentioned aboveSummary by CodeRabbit
Style
新功能
Tests