Focus and tabIndex after items fetched

  • Resolved i4nd90

    (@i4nd90)


    6 months ago

    Hi there, we have stumbled on a couple of issues which I think were introduced with the latest release.

    When new items are loaded, the first element in the list is run through the moveFocus() function that includes this snippet

      element.setAttribute('tabIndex', '-1'); // Set tabIndex.
  element.style.outline = 'none'; // Set element outline.

  // Add slight delay for elements to settle into DOM.
  setTimeout(function () {
    element.focus({
      preventScroll: true
    });
  }, 25);

    In my mind there are two issues with this

    1. Taking the first item out of the tabindex list means an accessible user can no longer traverse up and down through the items without being forced to skip the first-loaded item in each response
    2. Adding a standard (visible) focus is not preferable here, since the user has not actively engaged with that element – I assume that’s the reason for setting the outline to none. But this doesn’t account for that fact that the focus-visible CSS selector would now come into play.

    To me the best solution is to add focusVisible: false as a focus option, and removing the manually set tabIndex and outline. This kills the two birds with one stone.

    Our second related issue is that on first load of new items, the moveFocus() function isn’t called at all, but on subsequent loads it is. I would assume this is a result of using the preloaded add-on, and the focus logic not accounting for this?

    Many thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Darren Cooney

    (@dcooney)

    @i4nd90
    I’m really following the issues here. Can you provide an example of how focusVisible would help here?

    The plugin moves focus to the newly loaded content and sets a tabindex on the first element.

    Our second related issue is that on first load of new items, the moveFocus() function isn’t called at all, but on subsequent loads it is
    This is by design, on this page for example I wouldn’t want to move focus on initial page load.

    Thread Starter i4nd90

    (@i4nd90)

    1. The main issue is tabindex is getting set to -1, which is a problem when the loaded items are links. This takes the first one out of the tab flow which means it becomes inaccessible to keyboard users after the focus is moved away. With regards to setting focusVisible:false, it is a semantic way of removing the outline (since a browser stylesheet looks a bit like this: :focus-visible { outline: auto 1px -webkit-focus-ring-color }). In my case I had an issue reported to me that the first item in each ajax load had a different background. The item had focus-visible styling, but because the outline had been stripped off, it made no sense visually. focusVisible:false is a consistent solution, and essentially creates an invisible pointer for accessible users to take off from again.
    2. If the first page is preloaded using the add-on, then the first ajax load needs to account for this and trigger the moveFocus() function
    Plugin Author Darren Cooney

    (@dcooney)

    I think the functionality is working as expected. I don’t want the user to know focus has moved.
    if your container the Repeater Template is an anchor element, considering using a div, article or div to wrap the contents.l

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.