fix: expose accessible SVG semantics (#325)

* fix: expose accessible progress semantics

* test: cover line progress semantics

* fix: forward line SVG id

Author: nrps9909

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
+<Line
+  percent={42}
+  role="progressbar"
+  aria-label="Upload progress"
+  aria-valuemin={0}
+  aria-valuemax={100}
+  aria-valuenow={42}
+/>
+```
+
 ## Examples
 
 Run the local dumi site:
@@ -88,6 +101,8 @@ Then open `http://localhost:8000`.
 | `styles` | Partial<Record<'root' \| 'rail' \| 'track', React.CSSProperties>> | - | 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

README.zh-CN.md

@@ -52,6 +52,19 @@ export default () => (
 );
 ```
 
+SVG 默认作为装饰元素。当 SVG 本身作为进度指示器时，可通过标准 SVG／ARIA 属性提供进度语义和无障碍名称：
+
+```tsx | pure
+<Line
+  percent={42}
+  role="progressbar"
+  aria-label="上传进度"
+  aria-valuemin={0}
+  aria-valuemax={100}
+  aria-valuenow={42}
+/>
+```
+
 ## 示例
 
 运行本地 dumi 站点：
@@ -88,6 +101,8 @@ npm start
 | `styles` | Partial<Record<'root' \| 'rail' \| 'track', React.CSSProperties>> | - | 内部插槽的语义化样式。 |
 | `transition` | string | - | 用于跟踪更新的 CSS 过渡。 |
 
+标准 SVG 属性（包括 `role` 和 `aria-*`）会透传到根 SVG。
+
 ## 本地开发
 
 ```bash

src/Line.tsx

@@ -50,10 +50,12 @@ const Line: React.FC<ProgressProps> = (props) => {
 
   return (
     <svg
+      id={id}
       className={clsx(`${prefixCls}-line`, className)}
       viewBox={viewBoxString}
       preserveAspectRatio="none"
       style={style}
+      role="presentation"
       {...restProps}
     >
       <path

src/interface.ts

@@ -1,7 +1,11 @@
 export type SemanticName = 'root' | 'rail' | 'track';
 
-export interface ProgressProps {
+export interface ProgressProps extends Omit<
+  React.SVGAttributes<SVGSVGElement>,
+  '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 {
   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;

tests/__snapshots__/index.spec.js.snap

@@ -321,6 +321,7 @@ exports[`Progress Diff Line should match snapshot 1`] = `
   <svg
     class="rc-progress-line"
     preserveAspectRatio="none"
+    role="presentation"
     viewBox="0 0 100 1"
   >
     <path
@@ -347,6 +348,7 @@ exports[`Progress Diff Line should match snapshot 1`] = `
   <svg
     class="rc-progress-line"
     preserveAspectRatio="none"
+    role="presentation"
     viewBox="0 0 100 1"
   >
     <path
@@ -373,6 +375,7 @@ exports[`Progress Diff Line should match snapshot 1`] = `
   <svg
     class="rc-progress-line"
     preserveAspectRatio="none"
+    role="presentation"
     viewBox="0 0 100 1"
   >
     <path
@@ -402,6 +405,7 @@ exports[`Progress Line change with animation 1`] = `
 <svg
   class="rc-progress-line"
   preserveAspectRatio="none"
+  role="presentation"
   viewBox="0 0 100 1"
 >
   <path
@@ -430,6 +434,7 @@ exports[`Progress Line change with animation 2`] = `
 <svg
   class="rc-progress-line"
   preserveAspectRatio="none"
+  role="presentation"
   viewBox="0 0 100 1"
 >
   <path

tests/semantic.spec.tsx

@@ -1,8 +1,54 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { Circle, type ProgressProps } from '../src';
+import { Circle, Line, type ProgressProps } from '../src';
 
 describe('Semantic', () => {
+  it('hides decorative SVGs and supports explicit progress semantics', () => {
+    const { container } = render(
+      <>
+        <Line percent={25} />
+        <Circle
+          percent={50}
+          role="progressbar"
+          aria-label="Upload progress"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={50}
+        />
+      </>,
+    );
+
+    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');
+  });
+
+  it('supports explicit progress semantics for lines', () => {
+    const { container } = render(
+      <Line
+        id="download-progress"
+        percent={25}
+        role="progressbar"
+        aria-label="Download progress"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={25}
+      />,
+    );
+
+    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');
+    expect(line).toHaveAttribute('aria-valuemax', '100');
+    expect(line).toHaveAttribute('aria-valuenow', '25');
+  });
+
   describe('Circle', () => {
     function test(
       name: string,