个人中心
gpt4 book ai didi

javascript - 当当前焦点元素从 DOM 中移除时，如何挽救焦点？

转载 作者：行者123 更新时间：2023-12-05 00:27:41 25 4
gpt4 key购买 nike

我创建了一个 composite widget grid这适用于键盘导航。我遇到的一个问题是，当当前焦点元素所在的网格中有一行时，焦点返回到 <body>元素。我希望能够将焦点转移到最接近的有意义的交互式元素上(在上方或下方的行中)。
我的问题是:
当当前焦点元素从 DOM 中移除时，如何将焦点设置到最近的交互元素(仍在 dom 中)？
我尝试将焦点/模糊事件与 setTimeout 结合使用来获得正确的信号，但没有得到任何结果。
还尝试在当前聚焦的元素上使用 MutationObserver ，但我遇到了问题，因为网格实际上是滚动的，因此当前聚焦的元素可以从 DOM 中删除，因为行被虚拟滚动器回收，在这种情况下，我不想拯救焦点(它会导致网格不断向上滚动到新的“拯救”焦点，你永远无法到达底部)

const grid = document.querySelector('.grid');

// Remove all buttons/links from the natural tab order
grid
  .querySelectorAll('a:not([tabindex="0"]), button:not([tabindex="0"])')
  .forEach(el => el.setAttribute('tabindex', '-1'));

grid.addEventListener('keydown', (e) => {
    // Prevent scrolling
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
      e.preventDefault();
    }
    if (e.key === 'ArrowUp') moveFocus(grid, 'up');
    if (e.key === 'ArrowDown') moveFocus(grid, 'down');
    if (e.key === 'ArrowLeft') moveFocus(grid, 'left');
    if (e.key === 'ArrowRight') moveFocus(grid, 'right');
})  


function moveFocus(grid, direction) {
  const hasFocusableElement = ensureFocusableElementInGrid(grid)
  if (!hasFocusableElement) return;
  if (direction === 'up') focusUp(grid);
  if (direction === 'down') focusDown(grid);
  if (direction === 'left') focusLeft(grid);
  if (direction === 'right') focusRight(grid);
}

function ensureFocusableElementInGrid(grid) {
  const firstElem = grid.querySelectorAll('a, button')[0];
  const currentFocusable = grid.querySelector('[tabindex="0"]') || firstElem;

  // Happens if the grid does not contain any a or button elements.
  if (!currentFocusable) {
    return false;
  }
  currentFocusable.setAttribute('tabindex', '0');
  return true;
}

function focusDown(grid) {
  const currentFocus = grid.querySelector('[tabindex="0"]');
  const nextCell = findNextCell(grid, currentFocus, p => ({
    row: p.row + 1,
    col: p.col,
  }));
  if (!nextCell) return;

  // Target the first interactive element in the cell below
  const firstElem = nextCell.querySelectorAll('a, button')[0];
  transferFocus(currentFocus, firstElem);
}

function focusUp(grid) {
  const currentFocus = grid.querySelector('[tabindex="0"]');
  const nextCell = findNextCell(grid, currentFocus, p => ({
    row: p.row - 1,
    col: p.col,
  }));
  if (!nextCell) return;

  // Target the first interactive element in the cell above
  const firstElem = nextCell.querySelectorAll('a, button')[0];
  transferFocus(currentFocus, firstElem);
}

function focusLeft(grid) {
  const currentFocus = grid.querySelector('[tabindex="0"]');
  const nextEl = findNextElementInCell(currentFocus, -1);

  if (nextEl) {
    transferFocus(currentFocus, nextEl);
    return;
  }

  const nextCell = findNextCell(grid, currentFocus, p => ({
    row: p.row,
    col: p.col - 1,
  }));
  if (!nextCell) return;

  // Target the last interactive element in the cell to the left
  const prevCellElems = nextCell.querySelectorAll('a, button');
  const lastLink = prevCellElems[prevCellElems.length - 1];
  transferFocus(currentFocus, lastLink);
}

function focusRight(grid) {
  const currentFocus = grid.querySelector('[tabindex="0"]');

  // Exit early if next focusable element is found in the cell
  const nextEl = findNextElementInCell(currentFocus, 1);
  if (nextEl) {
    transferFocus(currentFocus, nextEl);
    return;
  }

  const nextCell = findNextCell(grid, currentFocus, p => ({
    row: p.row,
    col: p.col + 1,
  }));
  if (!nextCell) return;

  // Target the first interactive element in the cell to the right
  const nextCellEl = nextCell.querySelectorAll('a, button');
  const firstEl = nextCellEl[0];
  transferFocus(currentFocus, firstEl);
}

/**
 * Given an interactive element (button or a) this functions figures out it's
 * position in the grid based on aria attributes on it's parent elements.
 * @param interactiveElement element to find position of
 */
function getGridPosition(interactiveElement) {
  const row = parseInt(
    interactiveElement
      .closest('[aria-rowindex]')
      .getAttribute('aria-rowindex'),
    10,
  );
  const col = parseInt(
    interactiveElement
      .closest('[aria-colindex]')
      .getAttribute('aria-colindex'),
    10,
  );
  return { row, col };
}

/**
 * Move focus from oldEl -> newEl
 * @param oldEl element loosing focus
 * @param newEl element gaining focus
 */
function transferFocus(oldEl, newEl) {
  if (!oldEl || !newEl) return;
  oldEl.tabIndex = -1;
  newEl.tabIndex = 0;
  newEl.focus();
}

/**
 * Find the next/previous interactive element in the cell of provded element
 * @param element element to start search from
 * @param dir direction to search in, 1 : next, -1 : previous
 */
function findNextElementInCell(element, dir) {
  const cellElements = Array.from(
    element
      .closest('[aria-colindex]')
      .querySelectorAll('a, button')
  );
  const prevIndex = cellElements.findIndex(l => l === element) + dir;
  return cellElements[prevIndex];
}

/**
 * Traverse the grid in a direction until a cell with interactive elements is found
 * @param grid the grid element
 * @param element element to start search from.
 *                           It's position is calculated and used as a starting point
 * @param updatePos A function to update the position in a certain direction
 */
function findNextCell(grid, element, updatePos) {
  // recursively visit cells at given position and checks if it has any interactive elements
  const rec = currPos => {
    const nextPos = updatePos(currPos);
    const nextCell = grid.querySelector(
      `[aria-rowindex="${nextPos.row}"] [aria-colindex="${nextPos.col}"]`,
    );
    // No next cell found. Hitting edge of grid
    if (nextCell === null) return null;
    // Found next cell containing a or button tags, return it
    if (nextCell.querySelectorAll('a, button').length) {
      return nextCell;
    }
    // Continue searching. Visit next cell
    return rec(nextPos);
  };
  const position = getGridPosition(element);
  return rec(position);
}
.arrow-keys-indicator {
  bottom: 10px;
  right: 0;
  position: fixed;
  height: 65px;
  width: 85px;
  display: none;
}

.grid {
  display: grid;
  grid-gap: 16px;
}
.grid:focus-within ~ .arrow-keys-indicator {
  display: block;
}


.grid__header-row,
.grid__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.heart {
  /* screen reader only */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.grid__row:focus-within .heart,
.grid__row:hover .heart {
  /* undo screen reader only */
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.sr-only {
    /* screen reader only */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
<h1>Accessible Grid</h1>
<p>Start <a href="#">pressing</a> the Tab key until you <a href="#">reach</a> the grid</p>

<div class="grid" role="grid" tabindex="0">
  <div class="grid__header-row" role="row" aria-rowindex="1">
    <div role="columnheader" aria-colindex="1">
      <button>TITLE</button>
    </div>
    <div role="columnheader" aria-colindex="2">
      <button>ALBUM</button>
    </div>
    <div role="columnheader" aria-colindex="3">DURATION</div>
  </div>
  <div class="grid__row" role="row" aria-rowindex="2">
    <div role="gridcell" aria-colindex="1">
      <div>Black Parade</div>
      <a href="#">Beyoncé</a>
    </div>
    <div role="gridcell" aria-colindex="2"></div>
    <div role="gridcell" aria-colindex="3">
      4:41
      <button class="heart">
        <span class="sr-only">Add to your liked songs</span>
        ♡
      </button>
    </div>
  </div>
  <div class="grid__row" role="row" aria-rowindex="3">
    <div role="gridcell" aria-colindex="1">
      <div>Texas Sun</div>
      <a href="#">Kruangbin</a>,
      <a href="#">Leon Bridges</a>
    </div>
    <div role="gridcell" aria-colindex="2">
      <a href="#">Texas Sun</a>
    </div>
    <div role="gridcell" aria-colindex="3">
      4:12
      <button class="heart">
        <span class="sr-only">Add to your liked songs</span>
        ♡
      </button>
      </div>
  </div>
  <div class="grid__row" role="row" aria-rowindex="4">
    <div role="gridcell" aria-colindex="1">
      <div>Disconnect</div>
      <a href="#">Basement</a>
    </div>
    <div role="gridcell" aria-colindex="2">
      <a href="#">Beside Myself</a>
    </div>
    <div role="gridcell" aria-colindex="3">
      3:29
      <button class="heart">
        <span class="sr-only">Add to your liked songs</span>
        ♡
      </button>
      </div>
  </div>
</div>

<img class="arrow-keys-indicator" src="https://www.w3.org/TR/wai-aria-practices/examples/grid/imgs/black_keys.png" alt=""/>

</br>

<p>The <a href="#">links</a> in this section should be <a href="#">reachable</a> with a single Tab key press if the grid is in focus.</p>

最佳答案

您必须始终确保焦点永远不会丢失。正如您亲 body 验的那样，这是键盘可访问性的黄金法则。
移除 DOM 元素的一般规则如下:
如果必须从 DOM 中移除当前聚焦的元素，则必须将焦点移至其他位置 之前 删除它。
如果您之前不移动焦点，那么一旦元素被移除，焦点就会移动到任意位置，并且键盘可访问性被破坏。
有时焦点甚至根本没有移动，没有任何方法可以在没有鼠标的情况下恢复它。
在您的示例中，您应该像这样继续删除一行:

  • 检查焦点是否在您要删除的行内。使用document.activeElement并在需要时向上移动 DOM 层次结构以确定它。
  • 如果是，则调用 focusDown 将焦点放在下一行(如果您在最后一行，则调用 focusUp)，就像用户按下向上/向下箭头一样。您可能不需要其他特殊的逻辑来找出最值得关注的元素。
  • 有效地从 DOM 中删除行。现在焦点不再存在，你不再有问题了。

    • 如果您无法准确控制删除行的方式和时间，那么您的网格控件设计不当。你必须修复它。

    关于javascript - 当当前焦点元素从 DOM 中移除时，如何挽救焦点？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63799682/

    25 4 0
    文章推荐： javascript - Angular 示意图条件属性/提示
    文章推荐： VB.Net Datagridview转数据表
    文章推荐： r - 用逻辑测试索引
    文章推荐： javascript - 如何使用 Jest 检查元素是否可见？
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com