q-tree with tickable nodes traps the keyboard

[chrisnruud]

What happened?

When a q-tree with any tick-strategy is present, it will not tab through the tickable boxes and in fact trap the keyboard.

What did you expect to happen?

I would expect to be able to tab to each checkable item and check them, using the keyboard

Reproduction URL

https://github.com/quasarframework/quasar/blob/dev/docs/src/examples/QTree/TickStrategy.vue

How to reproduce?

1. Go to the link, try to get focus in one of the checkboxes. try to escape by using tab. Notice how this is not working.

It is the same in the official docs

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar), Accessibility [a11y] (quasar)

Platforms/Browsers

Firefox, Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[github-actions]

Hi @chrisnruud! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[chrisnruud]

I have updated the link to point at the quasar example code

[Bornstein93]

Are there any updates on this issue? This seems like a real issue to me and I would like to ask if there is any chance on pushing this.

[Bornstein93]

I'm not sure if this is helpfull for patching the quasar QTree component, but at least this plain JavaScript works for me as a temporary workaround. Maybe we can improve it further (I did not put that much effort in the code. Just wanted some fast fix) :

/**
 * Modify checkbox behaviour and fix keyboard trap
 */
function modifyCheckbox() {
  const treeDom = tree.value?.$el as HTMLDivElement | undefined;
  if (!treeDom) return;
  // Get all checkboxes of q-tree
  const checkboxes = treeDom.querySelectorAll('.q-tree__tickbox');
  checkboxes.forEach((box) => {
    if (!(box instanceof HTMLElement)) return;
    const parent = box.parentNode as HTMLElement | null;
    // Hint of what is done on using checkbox
    const title = i18n.global.t('tree.checkboxTitle') || '';
    if (parent?.getAttribute('role') === 'checkbox') {
      // Update existing wrapper attributes
      parent.setAttribute('tabindex', '0');
      parent.setAttribute('title', title);
    } else {
      // Create a wrapper and add attributes
      const wrapper = document.createElement('div');
      wrapper.setAttribute('tabindex', '0');
      wrapper.setAttribute('role', 'checkbox');
      wrapper.setAttribute('title', title);
      // Remove checkbox keyboard trap by excluding actual checkbox from tab sequence
      box.setAttribute('tabindex', '-1');
      // Wrap the checkbox
      if (parent) {
        parent.insertBefore(wrapper, box);
        wrapper.appendChild(box);
      }
      // Click checkbox on pressing Enter
      wrapper.addEventListener('keydown', (event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          box.click();
          wrapper.focus();
        }
      });
    }
  });
  // Hide the root checkbox if disableRootSelection is enabled
  if (props.disableRootSelection) {
    treeDom
      .querySelector('.q-tree__node-header-content')
      ?.previousElementSibling?.classList.add('hidden');
  }
  // Add tabindex to tree headers to select tree entry via Enter
  const headers = treeDom.querySelectorAll('.q-tree__node-header-content');
  headers.forEach((header) => header.setAttribute('tabindex', '0'));
}

onMounted(modifyCheckbox);
onUpdated(modifyCheckbox);