Repository navigation
fix(web): fix #4574 link button + improves accessibility - #4575
Conversation
Closes [4574]
Based on button styling
…page Horizontal rule indicates current page for users that can see the screen and with aria-current screen-reader users get the same information
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Ignored Deployment
|
|
Can you add to the description before/after screenshots if applicable? |
jrasm91
changed the title
This is a temporary fix as we first need to fix the svelte-material-icons to support role="img" on rendered SVGs.
|
@jrasm91 - sure, please check them below. I also had to make a temporary fix for accessibility name of the link with Screenshots before: Desktop: Mobile: Screenshot after: Desktop: Mobile: |
|
Opened issue for SVG missing role in ramiroaisen/svelte-material-icons#20 |
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...
|
I justed wanted to follow up on this - we don't use svelte-material-icons anymore and our own |
|
@jrasm91 - yes, thank you. Now we must make sure that icons that bear information or are used instead of text in interactive elements also have their accessibility name set (as discussed in ramiroaisen/svelte-material-icons#20 (comment)). Will check and open an issue or PR... |
Button in a link fixed,
horizontal rule is decorative here
and
aria-current="page"informs screen-readers that user is on that page when focusing on the link.fixes #4574