Add skip navigation link
This is needed because SPAs do not perform a full page load.
- Add watchers to change focus on ApplicationHeader component element.
This is needed because SPAs do not perform a full page load.
- Add styling for skip to content button
Remove setTimeout call the nextTick method is sufficient. The setTimeout
call was used to handle an iOS 7 bug, which is not a device we support.
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ia80c4442ee917d50513c5d1aeb22791e8598bee7
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 8dacd03..7974f70 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -1,7 +1,9 @@
<template>
<div>
- <a href="#main-content">Skip to main content</a>
- <header>
+ <a class="link-skip-nav btn btn-light" href="#main-content"
+ >Skip to content</a
+ >
+ <header id="page-header">
<b-navbar toggleable="lg" variant="dark" type="dark">
<b-navbar-nav small>
<b-nav-text>BMC System Management</b-nav-text>
@@ -91,4 +93,17 @@
.navbar-text {
padding: 0;
}
+
+.link-skip-nav {
+ position: absolute;
+ top: -60px;
+ left: 0.5rem;
+ z-index: 10;
+ transition: 150ms cubic-bezier(0.4, 0.14, 1, 1);
+
+ &:focus {
+ top: 0.5rem;
+ transition-timing-function: cubic-bezier(0, 0, 0.3, 1);
+ }
+}
</style>