New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extend <router-link> to set an aria-current attribute for active links, instead of an active class #2116

Open
rjgotten opened this Issue Mar 19, 2018 · 8 comments

Comments

Projects
4 participants
@rjgotten
Copy link

rjgotten commented Mar 19, 2018

What problem does this feature solve?

This feature enables developers to mark up the active router link in an accessible manner for users of assistive technologies.

What does the proposed API look like?

Similar to the active-class property on <router-link> introduce an aria-current string property, defaulting to a null value. When set, use the aria-current DOM attribute in addition to the active class.

Criteria for whether the DOM attribute should be set are the same as for active-class. The attribute should be set on the DOM node itself -- or instead on the special nested <a> element that router-link can upgrade, should one exist.

The DOM attribute's value should be taken from the aria-current router-link property. Optionally, this could be validated against the list of valid options as per the ARIA 1.1 specification and console warnings could be provided on attempts to set invalid values.

@posva

This comment has been minimized.

Copy link
Member

posva commented Mar 19, 2018

I need a bit more help to know what is the right approach here. Is it just setting aria-current="page" along with the class? I based myself reading this article

@posva posva added the improvement label Mar 19, 2018

@rjgotten

This comment has been minimized.

Copy link
Author

rjgotten commented Mar 19, 2018

That's pretty much it, yes.

The only nuance here is that there's more choices than just aria-current="page" and depending on what the router-link represents, something like aria-current="step" might be a better fit. (E.g. wizard steps in a purchase process?)

Hence the ability to configure the value of the attribute is needed.
(It's also a bit more future-proof should later ARIA revisions introduce new values.)

@posva posva added this to Todo in 3.x Apr 8, 2018

@enwin

This comment has been minimized.

Copy link

enwin commented Sep 12, 2018

Hello there!

I just happened to have the same issue as I wanted to manage the aria-current attribute on certain links.

Any update on this improvement? I'm glad to help and do a PR if you want.

The first step would be to have the possibility to add the aria-current attribute to a user defined value but in the end I think that it would be better to leave the possibility to add any kind of attribute based on the active and exact data (that should be made available in the routerLink component). That means that the user will have to extend the default component maybe?

Happy to discuss the matter and give a hand 😃

@posva

This comment has been minimized.

Copy link
Member

posva commented Sep 12, 2018

That means that the user will have to extend the default component maybe?

This is something we have in mind for the next iteration actually, to make it easier to extend router-link :)

@enwin

This comment has been minimized.

Copy link

enwin commented Sep 12, 2018

Thats great news! Now I can't wait for the next version :P

My obvious question, and sorry for asking this: do you have an idea of the time frame for the next iteration?

Thanks for the reply

@posva

This comment has been minimized.

Copy link
Member

posva commented Sep 12, 2018

Unfortunately not. I don't even know how much time I will have to work on it 😅

@enwin

This comment has been minimized.

Copy link

enwin commented Sep 12, 2018

Haha

Take care and thanks for all the work done so far!

@marcus-herrmann

This comment has been minimized.

Copy link

marcus-herrmann commented Jan 23, 2019

For what its worth, here is one possible solution to work/hack with aria-current before the next version arrives:

https://github.com/accessible-app/vuejs/blob/master/src/App.vue#L75

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment