mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

⌨️ Improve Divider accessibility by add role="separator" (#18116)

Browse Source 
https://www.w3.org/WAI/PF/aria/roles#separator
This commit is contained in:
偏右 2019-08-08 12:32:39 +08:00 committed by zombieJ
parent cf44d44f0f
commit a224d7c2e9
8 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -6750,18 +6750,21 @@ exports[`ConfigProvider components DatePicker WeekPicker prefixCls 1`] = `
exports[`ConfigProvider components Divider configProvider 1`] = `
<div
class="config-divider config-divider-horizontal"
role="separator"
/>
`;
exports[`ConfigProvider components Divider normal 1`] = `
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>
`;
exports[`ConfigProvider components Divider prefixCls 1`] = `
<div
class="prefix-Divider prefix-Divider-horizontal"
role="separator"
/>
`;

11
components/divider/__tests__/__snapshots__/demo.test.js.snap
View File

@ -4,18 +4,22 @@ exports[`renders ./components/divider/demo/customize-style.md correctly 1`] = `
<div>
<div
class="ant-divider ant-divider-horizontal"
role="separator"
style="height:2px;background-color:#7cb305"
/>
<div
class="ant-divider ant-divider-horizontal ant-divider-dashed"
role="separator"
style="border-color:#7cb305"
/>
<div
class="ant-divider ant-divider-vertical"
role="separator"
style="height:60px;background-color:#7cb305"
/>
<div
class="ant-divider ant-divider-vertical ant-divider-dashed"
role="separator"
style="height:60px;border-color:#7cb305"
/>
</div>
@ -28,12 +32,14 @@ exports[`renders ./components/divider/demo/horizontal.md correctly 1`] = `
</p>
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
</p>
<div
class="ant-divider ant-divider-horizontal ant-divider-dashed"
role="separator"
/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
@ -46,6 +52,7 @@ exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
Text
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="#"
@ -54,6 +61,7 @@ exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="#"
@ -70,6 +78,7 @@ exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
</p>
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text-center"
role="separator"
>
<span
class="ant-divider-inner-text"
@ -82,6 +91,7 @@ exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
</p>
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
role="separator"
>
<span
class="ant-divider-inner-text"
@ -94,6 +104,7 @@ exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
</p>
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text-right"
role="separator"
>
<span
class="ant-divider-inner-text"

2
components/divider/index.tsx
View File

@ -31,7 +31,7 @@ const Divider: React.SFC<DividerProps> = props => (
[`${prefixCls}-dashed`]: !!dashed,
});
return (
<div className={classString} {...restProps}>
<div className={classString} {...restProps} role="separator">
{children && <span className={`${prefixCls}-inner-text`}>{children}</span>}
</div>
);

1
components/empty/__tests__/__snapshots__/demo.test.js.snap
View File

@ -91,6 +91,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
</button>
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>
<div
class="config-provider"

2
components/page-header/__tests__/__snapshots__/demo.test.js.snap
View File

@ -36,6 +36,7 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
</div>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
</div>
<div
@ -445,6 +446,7 @@ exports[`renders ./components/page-header/demo/basic.md correctly 1`] = `
</div>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
</div>
<div

1
components/steps/__tests__/__snapshots__/demo.test.js.snap
View File

@ -104,6 +104,7 @@ exports[`renders ./components/steps/demo/clickable.md correctly 1`] = `
</div>
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>
<div
class="ant-steps ant-steps-vertical"

26
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -397,6 +397,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -451,6 +452,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -510,6 +512,7 @@ exports[`renders ./components/table/demo/basic.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -2584,6 +2587,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -2592,6 +2596,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
class="ant-dropdown-link"
@ -2686,6 +2691,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -2694,6 +2700,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
class="ant-dropdown-link"
@ -2788,6 +2795,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -2796,6 +2804,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
class="ant-dropdown-link"
@ -2890,6 +2899,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -2898,6 +2908,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
class="ant-dropdown-link"
@ -2992,6 +3003,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -3000,6 +3012,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
class="ant-dropdown-link"
@ -3094,6 +3107,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -3102,6 +3116,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
class="ant-dropdown-link"
@ -3196,6 +3211,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -3204,6 +3220,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
class="ant-dropdown-link"
@ -3298,6 +3315,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -3306,6 +3324,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
class="ant-dropdown-link"
@ -3400,6 +3419,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -3408,6 +3428,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
class="ant-dropdown-link"
@ -3502,6 +3523,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -3510,6 +3532,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
class="ant-dropdown-link"
@ -10489,6 +10512,7 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -10544,6 +10568,7 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"
@ -10604,6 +10629,7 @@ exports[`renders ./components/table/demo/jsx.md correctly 1`] = `
</a>
<div
class="ant-divider ant-divider-vertical"
role="separator"
/>
<a
href="javascript:;"

1
components/typography/__tests__/__snapshots__/demo.test.js.snap
View File

@ -82,6 +82,7 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
</div>
<div
class="ant-divider ant-divider-horizontal"
role="separator"
/>
<h1
class="ant-typography"