Skip to content
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

fix(system): add aria-disabled to the disabled state #297

Merged
merged 2 commits into from
Aug 26, 2021

Conversation

AlfonzAlfonz
Copy link
Contributor

xstyled has disabled state which allows to style elements which support disabled attribute, unfortunately if I want to render button as an link I need to use "aria-disabled" attribute. Solution is straightforward, change the disabled state so it includes &[aria-disabled=true]. I know that I can make the change locally in the theme, but I think it is important to include it in the library.

Summary

Chakra ui has similar concept to the states and their implementation of disabled includes. https://chakra-ui.com/docs/features/style-props#pseudo

Test plan

@netlify
Copy link

netlify bot commented Aug 24, 2021

‼️ Deploy request for xstyled rejected.
Learn more about Netlify's sensitive variable policy

🔨 Explore the source changes: 4cc2a74

@codecov
Copy link

codecov bot commented Aug 24, 2021

Codecov Report

Merging #297 (4cc2a74) into main (250d21f) will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##             main     #297   +/-   ##
=======================================
  Coverage   92.74%   92.74%           
=======================================
  Files          60       60           
  Lines        1255     1255           
  Branches      244      244           
=======================================
  Hits         1164     1164           
  Misses         91       91           
Impacted Files Coverage Δ
packages/system/src/defaultTheme.ts 100.00% <ø> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 250d21f...4cc2a74. Read the comment docs.

@agriffis
Copy link
Collaborator

unfortunately if I want to render button as an link I need to use "aria-disabled" attribute

Could you explain this?

@AlfonzAlfonz
Copy link
Contributor Author

Yeah, here is a simple use case. Sometimes I need to create button, but I can't use the button element and if I want to make it disabled I need to use aria-disabled attribute.

https://codesandbox.io/s/angry-matsumoto-huzym?file=/src/App.js

@gregberge
Copy link
Collaborator

Hello @AlfonzAlfonz, can you update documentation? I think there is a page where it is described.

@AlfonzAlfonz
Copy link
Contributor Author

Docs should be updated now :)

@gregberge gregberge merged commit d28cf38 into styled-components:main Aug 26, 2021
@gregberge
Copy link
Collaborator

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants