From d5e19e45cdaa72f9db519df99830e9f6585675f7 Mon Sep 17 00:00:00 2001 From: Bogdan Cerovac Date: Wed, 25 Oct 2023 14:53:44 +0200 Subject: [PATCH] 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 --- .../navigation-bar/navigation-bar.svelte | 31 +++++++++++-------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte index 6cfb1256df..37d5f21683 100644 --- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte +++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte @@ -76,9 +76,16 @@ {/if} {#if user.isAdmin} - -