ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
93.39k stars 51.04k forks source link

feat: improve segmented accessibility #52618

Closed aojunhao123 closed 3 days ago

aojunhao123 commented 1 week ago

🤔 This is a ...

🔗 Related Issues

-ref https://github.com/react-component/segmented/pull/299

💡 Background and Solution

  • The specific problem to be addressed.
  • List the final API implementation and usage if needed.
  • If there are UI/interaction changes, consider providing screenshots or GIFs.

📝 Change Log

Language Changelog
🇺🇸 English improve segmented accessibility
🇨🇳 Chinese 改善segmented组件可访问性
stackblitz[bot] commented 1 week ago

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

github-actions[bot] commented 1 week ago

👁 Visual Regression Report for PR #52618 Failed ❌

🎯 Target branch: next (26234bcd029090ad0b0c834806c4313676daac9d) 📖 View Full Report ↗︎ 📊 Summary: 🔄 131 changed

Expected (Branch next) Actual (Current PR) Diff
card-component-token.compact.png card-component-token.compact.png card-component-token.compact.png card-component-token.compact.png
card-component-token.compact.png card-component-token.compact.png card-component-token.compact.css-var.png card-component-token.compact.css-var.png
card-component-token.dark.png card-component-token.dark.png card-component-token.dark.png card-component-token.dark.png
card-component-token.dark.png card-component-token.dark.png card-component-token.dark.css-var.png card-component-token.dark.css-var.png
card-component-token.default.png card-component-token.default.png card-component-token.default.png card-component-token.default.png
card-component-token.default.png card-component-token.default.png card-component-token.default.css-var.png card-component-token.default.css-var.png
card-tabs.compact.png card-tabs.compact.png card-tabs.compact.png card-tabs.compact.png
card-tabs.compact.png card-tabs.compact.png card-tabs.compact.css-var.png card-tabs.compact.css-var.png

[!WARNING] There are more diffs not shown in the table. Please check the Full Report for details.


[!IMPORTANT] There are 131 diffs found in this PR: 🔄 131 changed. Please check all items:

  • [x] Checked all diffs in the full report
  • [x] Visual diff is acceptable
github-actions[bot] commented 1 week ago

Preview is ready

petercat-assistant[bot] commented 1 week ago

Walkthrough: This pull request enhances the accessibility of the segmented component by updating tests and dependencies. It removes temporary skips in accessibility tests and updates the @rc-component/segmented package to version 1.1.0.

Changes: Files Summary
components/flex/tests/a11y.test.ts, components/qr-code/tests/a11y.test.ts, components/segmented/tests/a11y.test.ts Removed temporary skips and adjusted disabled rules in accessibility tests.
components/segmented/tests/snapshots/demo-extend.test.ts.snap, components/segmented/tests/snapshots/demo.test.ts.snap, components/segmented/tests/snapshots/index.test.tsx.snap Updated snapshot tests for segmented component.
package.json Updated @rc-component/segmented dependency to version 1.1.0.
pkg-pr-new[bot] commented 1 week ago

Open in Stackblitz

More templates

- [farm-normal](https://pkg.pr.new/template/86cdf6f1-eef9-4908-b68d-e98f439a1235) - [rsbuild-normal](https://pkg.pr.new/template/f150df62-587c-45fc-99e3-a37372b9d9dc) - [vite-normal](https://pkg.pr.new/template/23b9c626-58c1-4d5d-b64e-5623fce1ea89) - [vite-practice](https://pkg.pr.new/template/83abf2ae-0501-42c8-acd4-f6cc58cae7c1) - [umi-normal](https://pkg.pr.new/template/d129cdcb-0104-4ea0-8579-2abf52cdc42f) - [with-nextjs-app-router-inline-style](https://pkg.pr.new/template/d17b8bc1-0ca7-4fc9-bebf-e2d8610b2d4c) - [with-nextjs-extract-style](https://pkg.pr.new/template/2a41bdb9-f65c-474a-82fd-a59d8a860a49) - [with-nextjs-generate-css-on-demand](https://pkg.pr.new/template/e5caea02-2f7a-4f8d-a258-952b085773b7) - [with-nextjs-inline-style](https://pkg.pr.new/template/0d0e5ead-3498-4906-ae5a-ab8b37c96fc8)

npm i https://pkg.pr.new/ant-design/ant-design/antd@52618

commit: 9790c93

codecov[bot] commented 1 week ago

Bundle Report

Changes will increase total bundle size by 28 bytes (0.0%) :arrow_up:. This is within the configured threshold :white_check_mark:

Detailed changes | Bundle name | Size | Change | | ----------- | ---- | ------ | | antd.min-array-push | 3.73MB | 28 bytes (0.0%) :arrow_up: |

Affected Assets, Files, and Routes:

view changes for bundle: antd.min-array-push #### **Assets Changed:** | Asset Name | Size Change | Total Size | Change (%) | | ---------- | ----------- | ---------- | ---------- | | ```antd-with-locales.min.js``` | 14 bytes | 2.02MB | 0.0% | | ```antd.min.js``` | 14 bytes | 1.71MB | 0.0% |
socket-security[bot] commented 1 week ago

New, updated, and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/lodash@4.17.21 None 0 1.41 MB bnjmnt4n
npm/lz-string@1.5.0 None 0 176 kB pieroxy
npm/minimist@1.2.8 None 0 54.5 kB ljharb
npm/regenerator-runtime@0.14.1 None 0 27.9 kB benjamn
npm/typescript@5.7.3 None 0 22.7 MB typescript-bot

🚮 Removed packages: npm/@ant-design/colors@7.2.0, npm/@ant-design/compatible@5.1.4, npm/@ant-design/cssinjs-utils@1.1.3, npm/@ant-design/cssinjs@1.23.0, npm/@ant-design/fast-color@2.0.6, npm/@ant-design/happy-work-theme@1.0.0, npm/@ant-design/icons@5.6.1, npm/@ant-design/react-slick@1.1.2, npm/@ant-design/tools@18.0.3, npm/@ant-design/v5-patch-for-react-19@1.0.3, npm/@antfu/eslint-config@4.1.1, npm/@antv/g6@4.8.24, npm/@babel/runtime@7.26.7, npm/@biomejs/biome@1.9.4, npm/@codecov/webpack-plugin@1.8.0, npm/@codesandbox/sandpack-react@2.19.11, npm/@dnd-kit/core@6.3.1, npm/@dnd-kit/modifiers@9.0.0, npm/@dnd-kit/sortable@10.0.0, npm/@dnd-kit/utilities@3.2.2, npm/@emotion/css@11.13.5, npm/@emotion/react@11.14.0, npm/@emotion/server@11.11.0, npm/@eslint-react/eslint-plugin@1.26.2, npm/@ianvs/prettier-plugin-sort-imports@4.4.1, npm/@inquirer/prompts@7.3.1, npm/@madccc/duplicate-package-checker-webpack-plugin@1.0.0, npm/@microflash/rehype-figure@2.1.2, npm/@npmcli/run-script@9.0.2, npm/@octokit/rest@21.1.0, npm/@qixian.cs/github-contributors-list@2.0.2, npm/@rc-component/collapse@1.0.1, npm/@rc-component/color-picker@2.0.1, npm/@rc-component/dialog@1.0.1, npm/@rc-component/form@1.0.0, npm/@rc-component/mutate-observer@2.0.0, npm/@rc-component/qrcode@1.0.0, npm/@rc-component/segmented@1.0.0, npm/@rc-component/table@1.0.2, npm/@rc-component/tooltip@1.0.0, npm/@rc-component/tour@1.15.1, npm/@rc-component/trigger@2.2.6, npm/@rc-component/util@1.2.0, npm/@size-limit/file@11.1.6, npm/@stackblitz/sdk@1.11.0, npm/@testing-library/dom@10.4.0, npm/@testing-library/jest-dom@6.6.3, npm/@testing-library/react@16.2.0, npm/@testing-library/user-event@14.6.1, npm/@types/adm-zip@0.5.7, npm/@types/ali-oss@6.16.11, npm/@types/cli-progress@3.11.6, npm/@types/fs-extra@11.0.4, npm/@types/gtag.js@0.0.20, npm/@types/http-server@0.12.4, npm/@types/isomorphic-fetch@0.0.39, npm/@types/jest-axe@3.5.9, npm/@types/jest-environment-puppeteer@5.0.6, npm/@types/jest-image-snapshot@6.4.0, npm/@types/jest@29.5.14, npm/@types/jquery@3.5.32, npm/@types/jsdom@21.1.7, npm/@types/lodash@4.17.15, npm/@types/minimist@1.2.5, npm/@types/node@22.13.1, npm/@types/nprogress@0.2.3, npm/@types/pixelmatch@5.2.6, npm/@types/pngjs@6.0.5, npm/@types/prismjs@1.26.5, npm/@types/progress@2.0.7, npm/@types/qs@6.9.18, npm/@types/react-copy-to-clipboard@5.0.7, npm/@types/react-dom@19.0.3, npm/@types/react-highlight-words@0.20.0, npm/@types/react-resizable@3.0.8, npm/@types/react@19.0.8, npm/@types/semver@7.5.8, npm/@types/spinnies@0.5.3, npm/@types/tar@6.1.13, npm/@types/throttle-debounce@5.0.2, npm/@types/warning@3.0.3, npm/adm-zip@0.5.16, npm/ali-oss@6.22.0, npm/antd-img-crop@4.24.0, npm/antd-style@3.7.1, npm/antd-token-previewer@2.0.8, npm/axios@1.7.9, npm/chalk@5.4.1, npm/cheerio@1.0.0, npm/circular-dependency-plugin@5.2.2, npm/classnames@2.5.1, npm/cli-progress@3.12.0, npm/copy-to-clipboard@3.3.3, npm/cross-env@7.0.3, npm/cross-fetch@4.1.0, npm/dekko@0.2.1, npm/rc-cascader@3.33.0, npm/rc-checkbox@3.5.0, npm/rc-drawer@8.0.0, npm/rc-dropdown@4.2.1, npm/rc-image@7.11.0, npm/rc-input-number@9.4.0, npm/rc-input@1.7.2, npm/rc-mentions@2.19.1, npm/rc-menu@9.16.0, npm/rc-motion@2.9.5, npm/rc-notification@5.6.2, npm/rc-pagination@5.1.0, npm/rc-picker@4.9.2, npm/rc-progress@4.0.0, npm/rc-rate@2.13.0, npm/rc-resize-observer@1.4.3, npm/rc-select@14.16.6, npm/rc-slider@11.1.8, npm/rc-steps@6.0.1, npm/rc-switch@4.1.0, npm/rc-tabs@15.5.1, npm/rc-textarea@1.9.0, npm/rc-tree-select@5.27.0, npm/rc-tree@5.13.0, npm/rc-upload@4.8.1, npm/rc-util@5.44.3, npm/react-dom@19.0.0, npm/react@19.0.0, npm/scroll-into-view-if-needed@3.1.0, npm/throttle-debounce@5.0.2

View full report↗︎

codecov[bot] commented 3 days ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 100.00%. Comparing base (b9e3fb8) to head (9790c93). Report is 2 commits behind head on next.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## next #52618 +/- ## ========================================= Coverage 100.00% 100.00% ========================================= Files 765 765 Lines 13738 13738 Branches 3578 3578 ========================================= Hits 13738 13738 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.