tangled.org / core
Monorepo for Tangled tangled.org
fork atom

appview/layouts/fragments: topbar dropdown accessibility updates and minor design updates #912

open
opened by besaid.zone targeting master from besaid.zone/core: topbar-dropdown

I've made some minor accessibility and design changes to the topbar dropdown. Mainly just adding icons and adding some accessibility enhancements by putting the dropdown links in an unordered list instead of a details/summary combo and adding aria attributes where needed

wasn't able to test the dropdown with VoiceOver since for some reason I can't log in locally with safari. I did run axe devtools though to make sure I've marked things up correctly and it didn't report any issues with my changes. I went over the Authoring Practicing Guide for menu's and read some relevant articles when working on this:

This dropdown does use a newer browser API but it is baseline in all of the major browsers so there shouldn't be any issues: https://caniuse.com/?search=popover

It also uses some very new css properties for positioning the dropdown but I tested in the latest safari, chrome and Firefox and it worked in all 3

0
by besaid.zone 5 comments
expand 8 commits
83453ec0
core/input.css: add styles needed for dropdown updates
e39c9af3
appview/layouts/fragments: use popopver api + semantic markdown for dropdown menu
cbdd2cb0
appview/layouts/fragments: remove extra end statement and fix indentation
c7941bc5
core/input: remove underline specifically for logout link
c4ea864b
appview/layouts/fragments: remove explicit role and orientation from hr tag
b2e18169
core/input.css: remove anchor fallback position, always anchor bottom left
7ca3fbfb
appview/layouts/fragments: add javascript to set aria-current on dropdown links
a0a9d361
appview/layouts/fragments: remove aria-controls, switch nested nav to div
boltless.me

Wow, I appreciate the work you've put into this. Thanks for the PR!

I haven't tested locally yet, but the image you shared on discord looks good. I'll make sure to take a closer look soon.

oppi.li

IIUC position-anchor has limited availability.

besaid.zone

yeah on mdn it says Firefox is the last holdout, looks like it will be supported in Firefox 147 which releases on Jan 13th. I did test this in Firefox 146 and it worked though which is weird lol

if anything though there is a polyfill for it: https://anchor-positioning.oddbird.net. feels kind of overkill for just this one thing unless we move from details/summary for all of the topbar items

evan.jarrett.net

This is going to need dark mode implementation. currently the text turns white, but the background remains white as well.

Also can confirm the position-anchor does not work in FF 146. It gets shoved into the bookmarks bar.

besaid.zone

This is going to need dark mode implementation. oof yeah, one thing I forgot to add back

Also can confirm the position-anchor does not work in FF 146. It gets shoved into the bookmarks bar. oh weird, could have sworn it was 馃 maybe was looking at the wrong browser. better approach would probably be top use @supports here and fall back to absolute positioning

sign up or login to add to the discussion
1
by besaid.zone 4 comments
expand 9 commits
83453ec0
core/input.css: add styles needed for dropdown updates
e39c9af3
appview/layouts/fragments: use popopver api + semantic markdown for dropdown menu
cbdd2cb0
appview/layouts/fragments: remove extra end statement and fix indentation
c7941bc5
core/input: remove underline specifically for logout link
c4ea864b
appview/layouts/fragments: remove explicit role and orientation from hr tag
b2e18169
core/input.css: remove anchor fallback position, always anchor bottom left
7ca3fbfb
appview/layouts/fragments: add javascript to set aria-current on dropdown links
a0a9d361
appview/layouts/fragments: remove aria-controls, switch nested nav to div
d6efab60
appview/layouts/fragments: adjust dark mode css or topbar dropdown
besaid.zone

dark mode styles should be fixed now! dark mode navbar dropdown for tangled

in the case of compatibility for the position-anchor css rule, would y'all be interested in the idea of using the popover api + anchor positioning for all things popovers/tooltips? this polyfill covers what I've added in the input.css. it also supports a wider range of the position-* stuff which could be useful in other areas.

this pr started off as trying to improve accessibility though and I want to focus on that 馃槄 but this would make it somewhat easier

oppi.li

my opinion on this PR is to use baseline and avoid javascript as much as possible. i would welcome this change soon after this become generally available (i assume that will be a few months after this is baseline).

oppi.li

if you are able to extract the accessibility changes into a separate PR, i'd be more than happy to merge those in!

besaid.zone

if you are able to extract the accessibility changes into a separate PR, i'd be more than happy to merge those in!

yup, can just stick to absolute positioning for now and come back to this when all of the anchor positioning stuff is baseline

no conflicts, ready to merge
sign up or login to add to the discussion
Labels

None yet.

assignee

None yet.

Participants 4
AT URI
at://did:plc:qttsv4e7pu2jl3ilanfgc3zn/sh.tangled.repo.pull/3mamto43bpj22