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

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

closed 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

Labels

None yet.

assignee

None yet.

Participants 4
AT URI
at://did:plc:qttsv4e7pu2jl3ilanfgc3zn/sh.tangled.repo.pull/3mamto43bpj22
+82 -22
Diff #0
unified split
+63 -22
appview/pages/templates/layouts/fragments/topbar.html
··· 47 47 {{ end }} 48 48 49 49 {{ define "profileDropdown" }} 50 - <details class="relative inline-block text-left nav-dropdown"> 51 - <summary class="cursor-pointer list-none flex items-center gap-1"> 52 - {{ $user := .Did }} 53 - <img 54 - src="{{ tinyAvatar $user }}" 55 - alt="" 56 - class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700" 57 - /> 58 - <span class="hidden md:inline">{{ $user | resolve | truncateAt30 }}</span> 59 - </summary> 60 - <div class="absolute flex flex-col right-0 mt-4 p-4 rounded w-48 bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700"> 61 - <a href="/{{ $user }}">profile</a> 62 - <a href="/{{ $user }}?tab=repos">repositories</a> 63 - <a href="/{{ $user }}?tab=strings">strings</a> 64 - <a href="/settings">settings</a> 50 + {{ $user := .Did }} 51 + <button type="button" popovertarget="navigation-popover" class="site-navigation-dropdown-trigger" aria-label="Open site navigation dropdown"> 52 + <img 53 + src="{{ tinyAvatar $user }}" 54 + alt="" 55 + class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700" 56 + /> 57 + </button> 58 + <div popover="auto" id="navigation-popover" class="site-navigation-popover shadow-md border border-gray-100 rounded-sm p-2"> 59 + <div class="flex gap-2 py-2"> 60 + <img 61 + src="{{ tinyAvatar $user }}" 62 + alt="" 63 + class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700" 64 + /> 65 + <p>{{ $user | resolve | truncateAt30 }}</p> 66 + </div> 67 + <hr class="h-1 w-full mb-1 mt-2" /> 68 + <ul id="navigation-menu-popover"> 69 + <li> 70 + <a href="/{{ $user }}"> 71 + {{ i "user" "w-4 h-4" }} 72 + <span>profile</span> 73 + </a> 74 + </li> 75 + <li> 76 + <a href="/{{ $user }}?tab=repos"> 77 + {{ i "book-marked" "w-4 h-4" }} 78 + <span>repositories</span> 79 + </a> 80 + </li> 81 + <li> 82 + <a href="/{{ $user }}?tab=strings"> 83 + {{ i "spool" "w-4 h-4" }} 84 + <span>strings</span> 85 + </a> 86 + </li> 87 + <li> 88 + <a href="/settings"> 89 + {{ i "settings" "w-4 h-4" }} 90 + <span>settings</span> 91 + </a> 92 + </li> 93 + <hr class="h-1 w-full mb-1 mt-2" /> 94 + <li> 65 95 <a href="#" 66 - hx-post="/logout" 67 - hx-swap="none" 68 - class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"> 69 - logout 70 - </a> 71 - </div> 72 - </details> 96 + hx-post="/logout" 97 + hx-swap="none" 98 + class="text-red-600 flex gap-2 items-center hover:bg-red-50 hover:text-red-700 px-2 py-2 rounded-sm"> 99 + {{ i "arrow-right-from-line" "w-4 h-4" }} 100 + <span>logout</span> 101 + </a> 102 + </li> 103 + </ul> 104 + </div> 73 105 74 106 <script> 75 107 document.addEventListener('click', function(event) { ··· 80 112 } 81 113 }); 82 114 }); 115 + 116 + const navigationPopoverLinks = document.querySelectorAll("#navigation-menu-popover li a"); 117 + const currentPageURL = window.location.href 118 + navigationPopoverLinks.forEach(link => { 119 + const navigationPopoverLinkURL = link.href 120 + if (navigationPopoverLinkURL === currentPageURL) { 121 + link.ariaCurrent = "page" 122 + } 123 + }) 83 124 </script> 84 125 {{ end }}
+19
input.css
··· 89 89 @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300; 90 90 } 91 91 92 + #navigation-menu-popover li:not(:last-of-type) a { 93 + @apply flex gap-2 items-center px-2 pb-2 pt-1.5 rounded-sm hover:bg-green-50 hover:text-green-700 no-underline 94 + } 95 + 96 + a[hx-post="/logout"] { 97 + @apply no-underline; 98 + } 99 + 92 100 label { 93 101 @apply block text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100; 94 102 } ··· 962 970 color: #f9fafb; 963 971 } 964 972 } 973 + 974 + .site-navigation-dropdown-trigger { 975 + anchor-name: --dropdown-trigger; 976 + } 977 + 978 + .site-navigation-popover { 979 + margin: 0; 980 + inset: auto; 981 + position-anchor: --dropdown-trigger; 982 + position-area: bottom left; 983 + }

History

2 rounds 10 comments
sign up or login to add to the discussion
besaid.zone submitted #1
diff interdiff
9 commits
expand
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
expand 5 comments
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

oppi.li

closing this in that case! thanks for the effort nonetheless, the topbar has changed slightly since to include an account switcher as well.

closed without merging
besaid.zone submitted #0
8 commits
expand
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
expand 5 comments
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