Hacker News Reader

That popup menu is not accessible though, no keyboard navigation and if you really wanted follow all accessibility guidelines you still need javascript to toggle attributes and stuff. https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-b...

It also isn't a "pure" HTML solution as all the magic is happening on CSS. So, convoluted CSS or two lines of JS?

As someone who browses with js off by default (uMatrix rule) and has implemented a fancy drop-down using css rather than js[1], my current opinion is that it's better to display all menus expanded by default and then hide them if/when your js loads. It's less effort to write and, more importantly, browsing with js disabled means I want interactivity off. If I want the "full experience as intended", I'll enable js. I frequently do. But I browse without it by default because frequently that experience is a downgrade from just the raw (well, styled) content. Leaving the fancy stuff to js suits everyone best.

[1] please note the content on the page is outdated, this is just a prototype -- the drop-down below "PayPal": https://sdproto.gitlab.io/donate/

If a native html feature isn't accessible, that sounds like something the browser makers need to correct, no?

(Although, you could argue the end-result for users who need accessibility features is the same, regardless of who is at fault.)

The progressive enhancement way to do show/hide sidebar used to be to have the sidebar content displayed in full at the bottom of the page, then use an anchor link that jumps the user down to that content.

Then the JavaScript that loads can hide that area and cause it to display in place when the show link is clicked.

Or... these days you can get a lot done with the HTML summary/details elements - including implementing popup menus.

Popup menus, sidebars, drawing on top of a pages can all be done to a certain extent with some CSS

Accessibility is possible with standard semantic HTML and aria tags (again to a certain extent)

D&D is probably not workable though

1. Probably not in general? Maybe with a vertical <input type="range"> for each item and a lot of server-generated CSS hackery, for small lists?

2. Use ARIA

3. Use position: absolute?

4. Create it with position: absolute/relative and use CSS :hover selector to show it (or see #5 for explicit open/close)

5. Use <details> or a checkbox along with the appropriate CSS

Reply on news.ycombinator.com