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

* 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>

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -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}