beenull/immich
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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 user.isAdmin}
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}>
<div class="hidden sm:block">
<LinkButton>
<a
data-sveltekit-preload-data="hover"
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
class={$page.url.pathname.includes('/admin')
? 'item text-immich-primary underline dark:text-immich-dark-primary'
@ -86,22 +93,20 @@
>
Administration
</span>
</LinkButton>
</div>
<div class="block sm:hidden">
<IconButton title="Administration">
</div>
<div class="block sm:hidden" aria-hidden="true">
<Cog
size="1.5em"
class="dark:text-immich-dark-fg {$page.url.pathname.includes('/admin')
? 'text-immich-primary dark:text-immich-dark-primary'
: ''}"
/>
</IconButton>
<hr
class={$page.url.pathname.includes('/admin')
? 'border-1 mx-auto block w-2/3 border-immich-primary dark:border-immich-dark-primary'
: 'hidden'}
/>
<div
class={$page.url.pathname.includes('/admin')
? 'border-t-1 mx-auto block w-2/3 border-immich-primary dark:border-immich-dark-primary'
: 'hidden'}
/>
</div>
</div>
</a>
{/if}