From 1b6c7248b06aa82c0bdc498a73caca09e46d91f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=B3=E5=BB=B7=E5=AE=89?= <73953029+nrps9909@users.noreply.github.com> Date: Thu, 27 Aug 2026 04:09:14 +0800 Subject: [PATCH 1/3] fix: expose accessible progress semantics --- README.md | 15 +++++++++++++++ README.zh-CN.md | 15 +++++++++++++++ src/Line.tsx | 1 + src/interface.ts | 2 +- tests/__snapshots__/index.spec.js.snap | 5 +++++ tests/semantic.spec.tsx | 26 +++++++++++++++++++++++++- 6 files changed, 62 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5894fd2..fff0445 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,19 @@ export default () => ( ); ``` +The SVG is decorative by default. When using it as the progress indicator itself, provide progress semantics and an accessible name with standard SVG/ARIA props: + +```tsx | pure + +``` + ## Examples Run the local dumi site: @@ -88,6 +101,8 @@ Then open `http://localhost:8000`. | `styles` | Partial> | - | Semantic styles for internal slots. | | `transition` | string | - | CSS transition for track updates. | +Standard SVG attributes, including `role` and `aria-*`, are forwarded to the root SVG. + ## Development ```bash diff --git a/README.zh-CN.md b/README.zh-CN.md index 83a06d9..7cfa887 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -52,6 +52,19 @@ export default () => ( ); ``` +SVG 默认作为装饰元素。当 SVG 本身作为进度指示器时，可通过标准 SVG／ARIA 属性提供进度语义和无障碍名称： + +```tsx | pure + +``` + ## 示例 运行本地 dumi 站点： @@ -88,6 +101,8 @@ npm start | `styles` | Partial> | - | 内部插槽的语义化样式。 | | `transition` | string | - | 用于跟踪更新的 CSS 过渡。 | +标准 SVG 属性（包括 `role` 和 `aria-*`）会透传到根 SVG。 + ## 本地开发 ```bash diff --git a/src/Line.tsx b/src/Line.tsx index 39a9b59..3fcbb99 100644 --- a/src/Line.tsx +++ b/src/Line.tsx @@ -54,6 +54,7 @@ const Line: React.FC = (props) => { viewBox={viewBoxString} preserveAspectRatio="none" style={style} + role="presentation" {...restProps} > { id?: string; strokeWidth?: number; railWidth?: number; diff --git a/tests/__snapshots__/index.spec.js.snap b/tests/__snapshots__/index.spec.js.snap index d854fc7..b566b25 100644 --- a/tests/__snapshots__/index.spec.js.snap +++ b/tests/__snapshots__/index.spec.js.snap @@ -321,6 +321,7 @@ exports[`Progress Diff Line should match snapshot 1`] = ` { + it('hides decorative SVGs and supports explicit progress semantics', () => { + const { container } = render( + <> + + + , + ); + + const [line, circle] = container.querySelectorAll('svg'); + expect(line).toHaveAttribute('role', 'presentation'); + expect(circle).toHaveAttribute('role', 'progressbar'); + expect(circle).toHaveAccessibleName('Upload progress'); + expect(circle).toHaveAttribute('aria-valuemin', '0'); + expect(circle).toHaveAttribute('aria-valuemax', '100'); + expect(circle).toHaveAttribute('aria-valuenow', '50'); + }); + describe('Circle', () => { function test( name: string, From 6b559b59af600e792527a5e1f70e27327edd3468 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=B3=E5=BB=B7=E5=AE=89?= <73953029+nrps9909@users.noreply.github.com> Date: Thu, 27 Aug 2026 04:16:55 +0800 Subject: [PATCH 2/3] test: cover line progress semantics --- src/interface.ts | 7 ++++++- tests/semantic.spec.tsx | 20 ++++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/src/interface.ts b/src/interface.ts index 7af981d..ca048b7 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -1,7 +1,11 @@ export type SemanticName = 'root' | 'rail' | 'track'; -export interface ProgressProps extends React.SVGAttributes { +export interface ProgressProps extends Omit< + React.SVGAttributes, + 'strokeWidth' | 'strokeLinecap' +> { id?: string; + /** Component geometry width, rather than the root SVG stroke-width attribute. */ strokeWidth?: number; railWidth?: number; className?: string; @@ -10,6 +14,7 @@ export interface ProgressProps extends React.SVGAttributes { percent?: number | number[]; strokeColor?: StrokeColorType; railColor?: string; + /** Component path line cap, rather than the root SVG stroke-linecap attribute. */ strokeLinecap?: StrokeLinecapType; prefixCls?: string; style?: React.CSSProperties; diff --git a/tests/semantic.spec.tsx b/tests/semantic.spec.tsx index c47a504..573b96f 100644 --- a/tests/semantic.spec.tsx +++ b/tests/semantic.spec.tsx @@ -27,6 +27,26 @@ describe('Semantic', () => { expect(circle).toHaveAttribute('aria-valuenow', '50'); }); + it('supports explicit progress semantics for lines', () => { + const { container } = render( + , + ); + + const line = container.querySelector('svg'); + expect(line).toHaveAttribute('role', 'progressbar'); + expect(line).toHaveAccessibleName('Download progress'); + expect(line).toHaveAttribute('aria-valuemin', '0'); + expect(line).toHaveAttribute('aria-valuemax', '100'); + expect(line).toHaveAttribute('aria-valuenow', '25'); + }); + describe('Circle', () => { function test( name: string, From aa2e50042bbb91d24f65e62caf58766649e4300a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=B3=E5=BB=B7=E5=AE=89?= <73953029+nrps9909@users.noreply.github.com> Date: Thu, 27 Aug 2026 04:29:19 +0800 Subject: [PATCH 3/3] fix: forward line SVG id --- src/Line.tsx | 1 + tests/semantic.spec.tsx | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/Line.tsx b/src/Line.tsx index 3fcbb99..cfb8c17 100644 --- a/src/Line.tsx +++ b/src/Line.tsx @@ -50,6 +50,7 @@ const Line: React.FC = (props) => { return ( { it('supports explicit progress semantics for lines', () => { const { container } = render( { ); const line = container.querySelector('svg'); + expect(line).toHaveAttribute('id', 'download-progress'); expect(line).toHaveAttribute('role', 'progressbar'); expect(line).toHaveAccessibleName('Download progress'); expect(line).toHaveAttribute('aria-valuemin', '0');