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

Select: remove readOnly? #2405

Closed
eirikbacker opened this issue Sep 12, 2024 · 2 comments
Closed

Select: remove readOnly? #2405

eirikbacker opened this issue Sep 12, 2024 · 2 comments
Labels
♿️ accessibility Issues related to accessibility 🕵️ investigate Needs investigation react @digdir/designsystemet-react

Comments

@eirikbacker
Copy link
Contributor

eirikbacker commented Sep 12, 2024

Bringing this up again, native HTML <select> has no readOnly state, because you can't interact with it anyway. In HTML, only <input readonly> is possible if wanting to display some data in a form-field design.

  • This is already discussed in Readonly NativeSelect missing kb focus #1659, but I would like to point out that creating a "fake" readOnly requires a lot of unnecessary Javascript (which makes it harder to create a solution when we go framework independent).
  • The current solution is not accessibility compliant to have the current solution (could work around by adding aria-disabled though this is a a bit weird too)
  • The current solution disables ability to select text, which is expected to be able to do when using readonly in other components
  • I see Aksel has created a fake readOnly, but still thinks this is the wrong solution 😇
  • I would suggest that we remove readOnly functionality on Select, and rather document that you can use Input with value and readonly to display readOnly data
  • We could alternatively automatically render <Select readOnly> as a <input readOnly> under the hood, though this will not be possible for HTML/CSS-only version of the Designsystem.
@eirikbacker eirikbacker converted this from a draft issue Sep 12, 2024
@eirikbacker eirikbacker moved this from 🔵 Inbox to 📄 Todo in Team Designsystemet Sep 12, 2024
@eirikbacker eirikbacker self-assigned this Sep 12, 2024
@eirikbacker eirikbacker added react @digdir/designsystemet-react ♿️ accessibility Issues related to accessibility labels Sep 12, 2024
@eirikbacker eirikbacker changed the title Select: remove readOnly Select: remove readOnly? Sep 15, 2024
@eirikbacker eirikbacker added the 🕵️ investigate Needs investigation label Sep 15, 2024
@eirikbacker eirikbacker removed their assignment Sep 16, 2024
@eirikbacker
Copy link
Contributor Author

Should be investigated in relation to #2311

@eirikbacker
Copy link
Contributor Author

Keeping readonly in React as we have many users who use this feature

@github-project-automation github-project-automation bot moved this from 📄 Todo to ✅ Done in Team Designsystemet Oct 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
♿️ accessibility Issues related to accessibility 🕵️ investigate Needs investigation react @digdir/designsystemet-react
Projects
Status: ✅ Done
Development

No branches or pull requests

1 participant