fix: Collapse a11y issue and cursor style (#51400)

This commit is contained in:
afc163 2024-10-28 17:41:28 +08:00 committed by GitHub
parent 7410b536b4
commit 1687634565
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 40 additions and 16 deletions

View File

@ -430,12 +430,14 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header ant-collapse-header-collapsible-only"
class="ant-collapse-header ant-collapse-collapsible-header"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-expand-icon"
role="button"
tabindex="0"
>
<span
aria-label="expanded"
@ -459,7 +461,11 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
</span>
</div>
<span
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header-text"
role="button"
tabindex="0"
>
This panel can only be collapsed by clicking text
</span>
@ -490,12 +496,14 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header ant-collapse-icon-collapsible-only"
class="ant-collapse-header ant-collapse-collapsible-icon"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-expand-icon"
role="button"
tabindex="0"
>
<span
aria-label="expanded"
@ -552,7 +560,7 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
<div
aria-disabled="true"
aria-expanded="false"
class="ant-collapse-header"
class="ant-collapse-header ant-collapse-collapsible-disabled"
role="button"
tabindex="-1"
>

View File

@ -424,12 +424,14 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header ant-collapse-header-collapsible-only"
class="ant-collapse-header ant-collapse-collapsible-header"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-expand-icon"
role="button"
tabindex="0"
>
<span
aria-label="expanded"
@ -453,7 +455,11 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
</span>
</div>
<span
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header-text"
role="button"
tabindex="0"
>
This panel can only be collapsed by clicking text
</span>
@ -484,12 +490,14 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
class="ant-collapse-item ant-collapse-item-active"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-header ant-collapse-icon-collapsible-only"
class="ant-collapse-header ant-collapse-collapsible-icon"
>
<div
aria-disabled="false"
aria-expanded="true"
class="ant-collapse-expand-icon"
role="button"
tabindex="0"
>
<span
aria-label="expanded"
@ -546,7 +554,7 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
<div
aria-disabled="true"
aria-expanded="false"
class="ant-collapse-header"
class="ant-collapse-header ant-collapse-collapsible-disabled"
role="button"
tabindex="-1"
>

View File

@ -149,7 +149,15 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
},
},
[`${componentCls}-icon-collapsible-only`]: {
[`${componentCls}-collapsible-header`]: {
cursor: 'default',
[`${componentCls}-header-text`]: {
flex: 'none',
cursor: 'pointer',
},
},
[`${componentCls}-collapsible-icon`]: {
cursor: 'unset',
[`${componentCls}-expand-icon`]: {

View File

@ -122,7 +122,7 @@
"dayjs": "^1.11.11",
"rc-cascader": "~3.29.0",
"rc-checkbox": "~3.3.0",
"rc-collapse": "~3.8.0",
"rc-collapse": "~3.9.0",
"rc-dialog": "~9.6.0",
"rc-drawer": "~7.2.0",
"rc-dropdown": "~4.2.0",