Docs: `aria-disabled` does not disable button. about next.js HOT 6 CLOSED

While aria-disabled does indeed not prevent you from clicking the button itself, it's important to understand why aria-disabled is used to begin with. There's a great article on CSS Tricks about it that's worth a read https://css-tricks.com/making-disabled-buttons-more-inclusive/.

@jenewland1999 Thank you for the additional information.

In my opinion, disabled seems more appropriate than aria-disabled for common examples.

The aria-*** attributes will inform people using assistive technologies, such as screen readers, that such elements are not meant to be editable or otherwise operable.

MDN article explains

Unlike HTML's disabled Boolean attribute, which will communicate a form control as semantically being disabled, change its styling to reflect its state and suppress all functionality along with disallowing the element's value from participating in form submission, the aria-disabled="true" only semantically exposes these elements as being disabled. Web developers must manually ensure such elements have their functionality suppressed when exposed to the disabled state.

I don't disagree that the disabled attribute is more common/familiar and likely easier for the examples because it gives intended behaviour. That said the follow up comments on PR #63852 suggest the intention might be purposefully to promote more accessible examples/docs.

That said it is a bit of a grey area.

from next.js.

While aria-disabled does indeed not prevent you from clicking the button itself, it's important to understand why aria-disabled is used to begin with. There's a great article on CSS Tricks about it that's worth a read https://css-tricks.com/making-disabled-buttons-more-inclusive/.

@jenewland1999 Thank you for the additional information.

In my opinion, disabled seems more appropriate than aria-disabled for common examples.

The aria-*** attributes will inform people using assistive technologies, such as screen readers, that such elements are not meant to be editable or otherwise operable.

MDN article explains

Unlike HTML's disabled Boolean attribute, which will communicate a form control as semantically being disabled, change its styling to reflect its state and suppress all functionality along with disallowing the element's value from participating in form submission, the aria-disabled="true" only semantically exposes these elements as being disabled. Web developers must manually ensure such elements have their functionality suppressed when exposed to the disabled state.

I don't disagree that the disabled attribute is more common/familiar and likely easier for the examples because it gives intended behaviour. That said the follow up comments on PR #63852 suggest the intention might be purposefully to promote more accessible examples/docs.

That said it is a bit of a grey area.

The suggestion in that pr also looks good. I will change and update soon

from next.js.

I fixed it and PR. #63888

from next.js.

While aria-disabled does indeed not prevent you from clicking the button itself, it's important to understand why aria-disabled is used to begin with. There's a great article on CSS Tricks about it that's worth a read https://css-tricks.com/making-disabled-buttons-more-inclusive/.

from next.js.

While aria-disabled does indeed not prevent you from clicking the button itself, it's important to understand why aria-disabled is used to begin with. There's a great article on CSS Tricks about it that's worth a read https://css-tricks.com/making-disabled-buttons-more-inclusive/.

@jenewland1999 Thank you for the additional information.

In my opinion, disabled seems more appropriate than aria-disabled for common examples.

The aria-*** attributes will inform people using assistive technologies, such as screen readers, that such elements are not meant to be editable or otherwise operable.

MDN article explains

Unlike HTML's disabled Boolean attribute, which will communicate a form control as semantically being disabled, change its styling to reflect its state and suppress all functionality along with disallowing the element's value from participating in form submission, the aria-disabled="true" only semantically exposes these elements as being disabled. Web developers must manually ensure such elements have their functionality suppressed when exposed to the disabled state.

from next.js.

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

from next.js.