Discussion on: Writing Logic in CSS

[Rob OLeary]

Thanks for putting this together. I have wanted to look further into this. Do you have an opinion on when you should use JS instead of these techniques?

[RRKallan]

My opinion when not to use JS, if it can be done without JS

[Daniel Schulz]

When you absolutely hit the limits of CSS. Container queries would be an example, until its native CSS counterpart is widely adopted in browsers.

I also think you should use JS alongside CSS to help accessibilty.

[RRKallan]

I don’t see where JS will help accessibility. I think it’s a plus for ui / look and feel

[Daniel Schulz]

For example setting showing/hiding elements for screenreaders. Dis/enabling inputs. Switching out aria attributes. Stuff like that. CSS isn't the right tool for that.

[RRKallan]

Show / hide element could be done by html & css

<input type=“checkbox” /> 
<div>hi content</div>

.input[type=“checkbox”] ~ div {
    display: none;
}

.checkbox:checked ~ div {
    display: block;
}

Switching area attributes or changing is not necessary when using correct semantic element when excising.

Let me say, I haven’t yet needed JS to have correct response on screen reader.

[Daniel Schulz]

That works on user input, but how would you hide an element on a responsive layout change? How would you set aria-expanded on a drawer? How would you try and build a mega menu in CSS only while keeping it accessible to SRs? How would you tab-lock a modal in CSS? Just because you didn't come across a use case yet doesn't mean they aren't plentiful.

[RRKallan]

Responsive layout changes when browser size changed. I will use media queries.

No need for aria-expanded with HTML5 elements details & summary
Also aria-live

<details>
    <summary>Title</summary>
    <div>
        Place your content which will show / hide on press 
    </div>
</details>

To prevent the ability to tab / focus outside your element you can use

element:focus-within {}

A massive menu. Assumption more then multiple levels. Here I would go to talk first with business. Why so many. Levels. Looking for better better cleaner structure.
Also for menu there is no need to use aria-expanded. Show hide text based on checked
And yes for multi level menu and keyboard support there will be need JS for esc, arrows pageup and pagedown.

[Daniel Schulz]

Aria-live and focus-within don't work like you describe. Please read up on those topics. And please manually test in screen readers, keyboard only navigation and/or other assistive tech.

[RRKallan]

It's magic. your response said enough. Yes the focus-within is correct not totally described. It's right when you can speek. ?? i wooul=ld me more and moer lrss