Permalink
Browse files

fix(link): take link out of tab sequence if disabled (#1347)

* fix(link): take link out of tab sequence if disabled

links, even when "disabled" were still in the document tab sequence.

This fix sets `tabindex="-1"` when the link is disabled

* Update README.md
  • Loading branch information...
tmorehouse committed Nov 14, 2017
1 parent a42b7b1 commit 360588aa4aa4011a0cc90141801ad4c778aa45fe
Showing with 10 additions and 3 deletions.
  1. +9 −3 src/components/link/README.md
  2. +1 −0 src/components/link/link.js
@@ -22,6 +22,11 @@ To generate a `<router-link>` instead, specify the route location via the `to` p
Router links support various additional props. Refer to the [Router support](/docs/reference/router-links)
reference section for details.
## Links with href="#"
Typically `<a href="#">` will cause the document to scroll to the top of page when clicked.
`<b-link>` addresses this by preventing the default action (scroll to top) when `href` is set to `#`.
## Link disabled state
Disable link functionality by setting the `disabled` prop to true.
@@ -35,11 +40,12 @@ Disable link functionality by setting the `disabled` prop to true.
```
Disabling a link will set the Bootstrap V4 `.disabled` class on the link
as well as handles stoping event propegation and preventing the default action
from occuring.
as well as handles stoping event propegation, preventing the default action
from occuring, and removing the link from the document tab sequence.
**Note:** Boostrap V4 CSS currently does not style disbled links differently than
non-disabled links. You can use hte following custom CSS to style disabled links:
non-disabled links. You can use the following custom CSS to style disabled links
(by preventing hover style changes):
```css
a.disabled {
@@ -192,6 +192,7 @@ export default {
rel,
href,
target: props.target,
tabindex: props.disabled ? '-1' : null,
"aria-disabled": (tag === "a" && props.disabled) ? "true" : null
},
props: assign(props, { tag: props.routerTag })

0 comments on commit 360588a

Please sign in to comment.