zhoujunyu
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(button & button-grounp): [button, button-group]improve the accessibility (#1586) 

* fix(button): [button]modify the button prop tabindex's default value to 0

* fix(button-grounp): [button-group]improve the tab select style
This commit is contained in:
AcWrong02 2024-04-30 12:09:38 +08:00 committed by GitHub
parent 538fb4925a
commit 3ed478d26d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/theme/src/button-group/index.less
View File

@ -60,17 +60,24 @@
padding: 0 var(--ti-button-group-btn-padding-horizontal);
text-decoration: none;
font-size: var(--ti-button-group-item-btn-font-size);
outline: none;
cursor: pointer;
transition: all 0.3s;
transition:
background ease-in 0.3s,
border ease-in 0.3s;
border-radius: var(--ti-button-group-middle-border-radius);
&:focus-visible {
outline: 2px solid var(--ti-button-group-item-active-bg-color);
}
&.disabled,
&[disabled] {
background: var(--ti-button-group-item-btn-disabled-bg-color);
border-color: var(--ti-button-group-item-btn-disabled-border-color);
cursor: not-allowed;
color: var(--ti-button-group-item-disabled-text-color);
outline: none;
}
&.plain,
@ -86,7 +93,6 @@
background: var(--ti-button-group-item-btn-hover-bg-color);
color: var(--ti-button-group-item-btn-hover-text-color);
border-color: var(--ti-button-group-item-btn-hover-border-color);
outline: none;
&.plain,
&[plain] {
@ -120,7 +126,6 @@
background: var(--ti-button-group-item-active-bg-color);
color: var(--ti-button-group-item-active-text-color);
border-color: var(--ti-button-group-item-active-border-color);
outline: none;
&.plain,
&[plain] {

1
packages/vue/src/button-group/src/pc.vue
View File

@ -25,6 +25,7 @@
'line-height': size === 'medium' ? '40px' : size === 'small' ? '30px' : size === 'mini' ? '22px' : ''
}"
type="button"
:tabindex="getItemClass(node).disabled ? '-1' : '0'"
@click="handleClick(node)"
>
{{ node[textField] }}

2
packages/vue/src/button/src/index.ts
View File

@ -18,7 +18,7 @@ export const buttonProps = {
type: String,
default: 'default'
},
tabindex: { type: String, default: '1' },
tabindex: { type: String, default: '0' },
icon: {
type: [Object, String],
default: ''