New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
aria-disabled
buttons should have same CSS as disabled
#39727
Comments
Thanks for this suggestion @coliff. Edit: If I understand the content correctly, we're talking here simply to ensure some visual consistency so that @patrickhlauke would it make sense to you to have such a defensive CSS approach or would it be necessary on the contrary to have a different rendering? |
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
In principle, I don't have anything against also applying the regular <button type="button" class="btn btn-primary disabled" aria-disabled="true"> … </button> If we go with these styles being applied out-of-the-box directly based on the If we don't want to go with this, we can at least expand the explanation in https://getbootstrap.com/docs/5.3/components/buttons/#disabled-state to mention that the same caveat about adding |
is it something which i can solve? |
We'd probably need to make a decision on which direction to go (see my two suggestions above). @julien-deramond et al? |
There are currently 7 occurrences of .btn:disabled, .btn.disabled, fieldset:disabled .btn {
/* ... */
}
.dropdown-item.disabled, .dropdown-item:disabled {
/* ... */
}
.nav-link.disabled, .nav-link:disabled {
/* ... */
}
.page-link.disabled, .disabled > .page-link {
/* ... */
}
.list-group-item.disabled, .list-group-item:disabled {
/* ... */
}
.btn-close:disabled, .btn-close.disabled {
/* ... */
} I would go with the following strategy:
If it makes sense for each component, and we don't find weird edge cases, we would enforce accessibility even more by getting rid of a useless Thoughts @twbs/css-review or here? |
If you're building a form then you may want the submit button to be
disabled
until the form has been completed correctly. Using thedisabled
attribute on the submit button will however not allow the user to tab to it.A better solution could to be disable click events on the submit button and make the button be announced as disabled with the
aria-disabled="true"
attribute. If you do that with Bootstrap though it doesn't use the disabled state button CSS. (Quick demo: https://stackblitz.com/edit/bootstrap-disabled-buttons )I read about this on: https://a11y-101.com/development/aria-disabled
TLDR: A disabled button currently has CSS something like this:
I suggest it should include
aria-disabled="true"
buttons so compiled CSS would be:I know there are more accessibility considerations regarding my form scenario example mentioned above, but I still think it probably makes sense for
aria-disabled="true"
buttons to use the same styles asdisabled
buttons.The text was updated successfully, but these errors were encountered: