Issue Fix: use-focus-trap doesn't handle Radio Groups well

[Shresth72]

Fixes #4678

import { findTabbableDescendants } from './tabbable';

export function scopeTab(node: HTMLElement, event: KeyboardEvent) {
  const tabbable = findTabbableDescendants(node);
  if (!tabbable.length) {
    event.preventDefault();
    return;
  }
  const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1];
  const root = node.getRootNode() as unknown as DocumentOrShadowRoot;
  let leavingFinalTabbable = finalTabbable === root.activeElement || node === root.activeElement;

  // Handle the case of the active element being in a RadioGroup with the finalTabbable element
  const activeElement = root.activeElement as Element;
  const activeElementIsRadio =
    activeElement.tagName === 'INPUT' && activeElement.getAttribute('type') === 'radio';
  if (activeElementIsRadio) {
    const activeRadioGroup = tabbable.filter(
      (element) =>
        element.getAttribute('type') === 'radio' &&
        element.getAttribute('name') === activeElement.getAttribute('name')
    );
    leavingFinalTabbable = activeRadioGroup.includes(finalTabbable);
  }

  if (!leavingFinalTabbable) {
    return;
  }

  event.preventDefault();

  const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0];

  if (target) {
    target.focus();
  }
}

[rtivital]

Please do not downgrade caniuse-lite.

[Shresth72]

This was a previous commit, it was resolved earlier. It's now same as the master repo

[rtivital]

Please resolve conflicts

[rtivital]

Thanks!