Bogdan Cerovac d5e19e45cd
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>
2023-10-25 12:53:44 +00:00
..
2023-06-30 23:50:47 -05:00