Fix look of inactive settings tab icons

[chrisgrieser]

the name of the inactive tab is not properly hidden, causing issues with some themes like mine. This PR adds a rule which should properly fix this issue for any theme.

without the PR:

with the PR:

[pjkaufman]

@chrisgrieser, thanks for pointing this out! Is there a reason to not use the hidden class? Display none works, but is not accessibility friendly.

[chrisgrieser]

What do you mean by "hidden class"? If you mean visibility: hidden;, yeah that does work, too, I didn't know that this makes a difference accessibility wise. Have changed the PR accordingly.

[pjkaufman]

What do you mean by "hidden class"? If you mean visibility: hidden;, yeah that does work, too, I didn't know that this makes a difference accessibility wise. Have changed the PR accordingly.

There is a style called hidden which is not perfect, but it should be more accessibility friendly.

[pjkaufman]

I had the name wrong. Here is the style:

obsidian-linter/src/styles.css

Line 135 in 3668268

.linter-visually-hidden {

[chrisgrieser]

well, since the inactive tab names do not get that hidden class, I assume that would have to be done via js, and not via css, and therefore outside my area of expertise 😝

although if I understand the article correctly, opacity: 0 would also work to hide it while keeping it there fore screenreaders etc.

[pjkaufman]

I could be wrong, but why would it not be feasible to extend visually hidden with the css selector you had? It should be able to apply to both based on what you are saying.

[chrisgrieser]

to my knowledge, there is no way in (pure) css to extend the styling of one class to another?

[chrisgrieser]

ah, now I understand what you mean. Yeah, adding the selector to that block also works, sure. done so in the latest commit

[pjkaufman]

That's what I was going for. Thanks!