Shift keyboard focus on page change

[lmounsey]

For improved accessibility it would be good to move the keyboard focus when navigating to a new page to the h1 of the new content.

I wrote up a directive to help assist with this, but I'm sure there's other ways to address this.

Plugin:

import Vue from 'vue'

let firstMounted = false

// Register a global custom directive called 'v-focus'
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted (el) {
    // Skip moving focus on page load
    if (!firstMounted) {
      firstMounted = true
      return
    }

    // Focus the element
    el.focus()
  }
})

Then in Vue component: <h1 v-focus tabindex="-1">{{ title }}</h1>

[tim-yao]

Thanks @lmounsey for your suggestion! We are using https://github.com/simplesmiler/vue-focus in Ripple, that means we have the focus directive in use already.

For focusing on h1 when a page load, unfortunately it is not how we are doing at SDP site. Keyboard nav is only on link, button and clickable elements, however our h1 is not a link. Our keyboard nav order is from top to bottom, with the first item is skip to main content option which can jump to the page main content directly.

Any reason your project need go to h1?

[lmounsey]

Hi @tim-yao

Just to clear up, it should not focus on h1 on first page load - sorry if my code is a bit misleading, it could possibly be cleaned up with detecting process.client instead.

I feel though it should move focus when navigating between pages in nuxt - for example, if I use VoiceOver on https://www.vic.gov.au and click a footer link, the focus still stays in the footer.

Let me know if you want to chat more to talk through some possible solutions

[tim-yao]

@lmounsey Yes, the footer link case make sense to me. I will raise an issue to UX/BA for discovering this requirement. It may take some time. If it's urgent in your project, please use SDP support portal to ask for support. Thanks!

[tim-yao]

This will be look at in https://digital-engagement.atlassian.net/browse/SDPA-3251