<template>
   <main class="demo">
      <!-- Skip Links -->
  <a href="#main" class="skipLink" ref="skipLink">Skip to main content</a>
   
<!-- Main content of the page      -->
    <section id='main'>
      <h1>{{message}}</h1>
         <p> Note: use to the tab key to navigate  </p>  
    <button @click="alertHello">Say hello.          </button>
    </section>
  </main>
</template>

<script>
export default {
//   using ref attribute to access focus on the element
    watch: {
    $route() {
      this.$refs.skipLink.focus();
    }
  },
  data() {
    return {
      message: 'Welcome to Vue!'
    };
  },
  methods: {
    alertHello() {
      alert('Hello!');
    }
  }
};
</script>

<style>
.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}

#main {
  margin: 3em auto;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}

.skipLink {
  white-space: nowrap;
  margin: 1em auto;
  top: 0;
  position: fixed;
  left: 50%;
  margin-left: -72px;
  opacity: 0;
}

.skipLink:focus {
  opacity: 1;
  background-color: white;
  padding: .5em;
  border: 1px solid black;
}
  
</style>