Also, inspired by this post by Axel Rauschmayer (npub10fa…rdvy) I made the Navigation menu toggle in mobile/narrow viewports work without JS. Neat!
https://fosstodon.org/@rauschma/114099045695366948
However to make it more accessible I set aria-expanded to true or false, which you can't do with CSS. So I had to use JS for that. So JS is a requirement for accessibility apparently.
#CSS #JS #a11y
Olivier Forget
npub17s…vgkcv
2025-03-10 20:05:41 UTC
in reply to nevent1q…zz9l
Author Public Key
npub17s8mxn97r9qvfhvyz0hmaddh72vt4ad7c9m7dwzkht77q9wl239sjvgkcvSeen on
wss://relay.momostr.pinkPublished at
2025-03-10 20:05:41 UTCEvent JSON
{
"id": "6f60ca0c50b728a88326801db5f0c0b8b5fabf0cd50745647c5b27b944ae9460",
"pubkey": "f40fb34cbe1940c4dd8413efbeb5b7f298baf5bec177e6b856bafde015df544b",
"created_at": 1741637141,
"kind": 1,
"tags": [
[
"p",
"f40fb34cbe1940c4dd8413efbeb5b7f298baf5bec177e6b856bafde015df544b"
],
[
"t",
"css"
],
[
"p",
"7a7a0978cc46ef7fd548fb125e51c04de7d4ca639417a21b56aa95e3711c0b38"
],
[
"e",
"61d5bb5745ce195ce5b47b57e1ec4aba847b58c5d55f1c7dd46f304946034a52",
"",
"root",
"f40fb34cbe1940c4dd8413efbeb5b7f298baf5bec177e6b856bafde015df544b"
],
[
"proxy",
"https://social.tchncs.de/@teleclimber/114139931695838184",
"web"
],
[
"t",
"js"
],
[
"t",
"a11y"
],
[
"proxy",
"https://social.tchncs.de/users/teleclimber/statuses/114139931695838184",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://social.tchncs.de/users/teleclimber/statuses/114139931695838184",
"pink.momostr"
],
[
"-"
]
],
"content": "Also, inspired by this post by nostr:npub10faqj7xvgmhhl42glvf9u5wqfhnafjnrjst6yx6k4227xugupvuqzardvy I made the Navigation menu toggle in mobile/narrow viewports work without JS. Neat!\n\nhttps://fosstodon.org/@rauschma/114099045695366948\n\nHowever to make it more accessible I set aria-expanded to true or false, which you can't do with CSS. So I had to use JS for that. So JS is a requirement for accessibility apparently.\n\n#CSS #JS #a11y",
"sig": "60dbfc837376d30db3abcf582e6ced0f9187da66044e4ca5c62f6c0791e2abbf7726f175d884f2662a51438a76c7a6c9e20b8e2789c74162f5aca4dc558c74a2"
}