Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-24 01:12:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): fix #4574 link button + improves accessibility (#4575)

Browse Source 
* Fixed semantic problem in navigation-bar.svelte

Closes [4574]

* Reintroduced styling for navigation-bar.svelte

Based on button styling

* Horizontal rule set as decoration in navigation-bar.svelte

* aria-current added as an assistive technology indication for current page

Horizontal rule indicates current page for users that can see the screen and with aria-current screen-reader users get the same information

* Temporary fix for accessibility name of the link when SVG replaces text

This is a temporary fix as we first need to fix the svelte-material-icons to support role="img" on rendered SVGs.

* fix(web): horizontal rule replaced with div

hr is not semantically correct, therefore we tried with role="decoration" (that should be role="presentation") but it's actually better to just use a div as it's best practice to not override semantics when we can avoid that...

Btw. the semantics for active element for assistive technology is added with previous commit setting aria-current on the link...

* chore: format

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Bogdan Cerovac 2023-10-25 14:53:44 +02:00 committed by GitHub
parent 4a5654a247
commit d5e19e45cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View File

@ -76,9 +76,16 @@
{/if} {/if}
{#if user.isAdmin} {#if user.isAdmin}
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}> <a
<div class="hidden sm:block"> data-sveltekit-preload-data="hover"
<LinkButton> href={AppRoute.ADMIN_USER_MANAGEMENT}
aria-label="Administration"
aria-current={$page.url.pathname.includes('/admin') ? 'page' : null}
>
<div
class="inline-flex items-center justify-center transition-colors dark:text-immich-dark-fg p-2 font-medium rounded-lg"
>
<div class="hidden sm:block">
<span <span
class={$page.url.pathname.includes('/admin') class={$page.url.pathname.includes('/admin')
? 'item text-immich-primary underline dark:text-immich-dark-primary' ? 'item text-immich-primary underline dark:text-immich-dark-primary'
@ -86,22 +93,20 @@
> >
Administration Administration
</span> </span>
</LinkButton> </div>
</div> <div class="block sm:hidden" aria-hidden="true">
<div class="block sm:hidden">
<IconButton title="Administration">
<Cog <Cog
size="1.5em" size="1.5em"
class="dark:text-immich-dark-fg {$page.url.pathname.includes('/admin') class="dark:text-immich-dark-fg {$page.url.pathname.includes('/admin')
? 'text-immich-primary dark:text-immich-dark-primary' ? 'text-immich-primary dark:text-immich-dark-primary'
: ''}" : ''}"
/> />
</IconButton> <div
<hr class={$page.url.pathname.includes('/admin')
class={$page.url.pathname.includes('/admin') ? 'border-t-1 mx-auto block w-2/3 border-immich-primary dark:border-immich-dark-primary'
? 'border-1 mx-auto block w-2/3 border-immich-primary dark:border-immich-dark-primary' : 'hidden'}
: 'hidden'} />
/> </div>
</div> </div>
</a> </a>
{/if} {/if}