feat(css): use native selectors

[poi33]

Part of #1952

Removing classes where native selectors can be used.

• Checkbox
• Fieldset
• NativeSelect
• TextArea
• TextField
• Radio
• Switch
• Search

[Barsnes]

Could we solve readonly by checking .fds-checkbox:not([readonly]), or add aria-readonly="true/false"?
I think it would be nice if we can eliminate the .fds-checkbox--readonly class, and only use data-attributes or selectors.

If that works we can do it for the other components as well 💪🏻

[poi33]

Could we solve readonly by checking .fds-checkbox:not([readonly]),

I was thinking the same thing! 💡 This would make it so much easier to work with, but Readonly is only supported by input types that can change/mutate its value. Checkboxes apparently have two fixed values check or not.

or add aria-readonly="true/false"?

It is used in some places already (also in css). I was thinking about using the aria attr too glad you brought it up.
The downside of this is that the classes might be a little more complex to understand, and its a bit more work to add everywhere.

Nice suggestion, think I'll start with adding aria-readonly attributes and connect the css to those attributes. ✏️

[mimarz]

Lets try these out :)

I suggest however we also do some research on whats the best practice here. Attr selectors also have worse performance than pure classes, but its not exactly big theses days.

I am a bit worried about the longterm development and maintenance for using attr selectors as we are breaking seperation of concern with using attr selectors as we making a hard-link between styling and html. There might be edge-cases where this is might be a problem and also limits composability of the css.

[mimarz]

Readonly-state is a tough one because as mentioned sometimes is enable by readonly, other times aria-readonly depending on the html element. 🤔

Did a quick search on support for using aria-readonly and SR, might be a bit outdated by its things to test for: https://adrianroselli.com/2022/11/brief-note-on-aria-readonly-support-html.html

[Barsnes]

We could always do two selectors for a style 🤔

.fds-checkbox:not([readonly]),
.fds-checkbox:not([aria-readonly]) {
...
}

[mimarz]

Suggest just keeping it as a readonly class for now, we can always change it later if we find out thats a better solution. I am however not sure its the best approach so lets save it for #2065.

[poi33]

Probably waiting with more work on this while: Use data attributes for css #2065 is undecided.

While using :disabled and :readonly falls outside the discussion, [aria-attribute] just falls within. It could be that the decision falls on just using classes for style management, and this pull request should not include [attribute] selectors.

[mimarz]

Probably waiting with more work on this while: Use data attributes for css #2065 is undecided.

While using :disabled and :readonly falls outside the discussion, [aria-attribute] just falls within. It could be that the decision falls on just using classes for style management, and this pull request should not include [attribute] selectors.

I'll have a look at this PR tomorrow :)

[mimarz]

LGTM 👍