`Focus-no-Jutsu` 范例

该范例页面使用 Focus-no-Jutsu（no-Jutsu 的发音为 /ˈnɔˌjutsu/）管理和控制焦点，是一个键盘可访问的界面，您可以任意选择鼠标和键盘访问该页面。

网页程序里有很多需要管理和控制的场景，例如弹窗、菜单、选项卡、抽屉等等，在我们按下键盘的 Tab ，焦点进入某个场景，我们希望焦点被施加一个幻术，让焦点陷入一个循环，或者被卡在首尾元素之间的秘密空间，直到我们按下 Esc 或者点击“返回”，解开幻术。

接下来我们将施展 Focus-no-Jutsu，完成和焦点有关的一系列任务！🥷

热身

这个简单的例子演示了 focus-no-jutsu 基本的用法。首先通过 Tab 访问 entryBtn，然后按下 Enter，firstTabbableNode 成为焦点，按住 Tab，焦点将在 firstTabbableNode 和 lastTabbableNode 之间循环，最后，当焦点落在 lastTabbableNode 时按下 Enter，或者在列表内的任意元素上按下 Esc，焦点回到 entryBtn。

focusNoJutsu(["#firstTabbableNode", "#lastTabbableNode"], {
  entry: "#entryBtn",
  exit: "#lastTabbableNode",
  onEscape: true,
  delayToFocus: true,
});

对话框

对话框通常是一个弹窗，当 Tab 访问到“打开”按钮，焦点聚焦按钮，Enter（或者 Space 和鼠标点击）触发“打开”之后，弹出对话框，焦点聚焦对话框的首个可聚焦元素，这时如果继续 Tab，焦点只能访问对话框内的元素，不能逃出对话框或者回到“打开”按钮，最后，我们按下 Esc 或者触发“返回”按钮，焦点回到“打开”按钮。

查看源码。

const dialog = document.getElementById("dialog");
const mask = document.getElementById("dialog_mask");
const entry = document.getElementById("open");

// 6～19 行为焦点管理的部分，管理了焦点的入口、出口，以及焦点在列表内移动的范围
focusNoJutsu(dialog, ["#firstFocusBtn", "#close"], { // L:6
  loop: false,
  entry: {
    node: entry,
    on: openDialog,
    target: ({ list }) => list[0],
  },
  exit: {
    node: ["#close", "#firstFocusBtn", "#confirm"],
    on: closeDialog,
    type: ["click", "outlist"]
  },
  onEscape: true,
}); // L:19

// 下面的两个函数和焦点无关，和样式或其它逻辑有关，这些代码在实际开发中，可以和上面的焦点部分分开，或者可以像本例中，把这些代码集成到焦点管理中

/** 打开弹窗，设置打开样式，设置 ARIA */
function openDialog() {
  dialog.classList.add("openedDialog");
  dialog.classList.remove("closedDialog");
  mask.classList.remove("closed_mask");
  entry.ariaExpanded = true;
}

/** 关闭弹窗，设置关闭样式，设置 ARIA */
function closeDialog() {
  /** 这里的代码省略，代码内容类似上面的 openDialog */
}

查看完整的对话框源码。

导航栏

导航栏是很常见的组件，很多时候会出现在网站的顶部。导航栏上是图标、按钮、链接和一些像主题切换的功能，这些都是这个网站最重要的部分，导航栏提供了最快的访问路径。下面的导航栏包含一个“目录”按钮，当“目录”获得焦点，按下 Enter，焦点会进入目录面板，落到第一个元素上，通过 Tab 导航至目录面板最后一个元素，再次按下 Tab，焦点将退出目录面板，并落到“Focus-no-Jutsu”的链接上。当焦点在目录面板中，按下 Esc 或者点击空白区域，焦点将回到目录按钮。

查看源码。

const menuBtn = document.getElementById("menu_btn");
const menuBody = document.getElementById("menu");

// 5～29 行为焦点管理和控制的部分，包含了触发入口和出口时的行为——切换菜单状态，toggleMenu
focusNoJutsu(menuBody, ["#hot_anchor", "#scroll_anchor"], { // L:5
  onEscape: toggleMenu,
  entry: {
    node: menuBtn,
    on: toggleMenu,
    onExit: true,
    target: ({ list }) => list[0],
  },
  exit: [{
    node: ({ head }) => head,
    type: "keydown",
    key: e => e.key === "Tab" && e.shiftKey,
    on: toggleMenu,
  }, {
    node: ({ tail }) => tail,
    type: "keydown",
    key: e => e.key === "Tab" && !e.shiftKey,
    on: toggleMenu,
    target: "#nav_link",
  }, {
    type: "outlist",
    on: toggleMenu,
    target: ({ e }) => e?.relatedTarget?.id?.includes("h-") ? false : menuBtn,
  }],
}); // L:29

/** 切换菜单时的样式变化 */
function toggleMenu() {
  menuBtn.classList.toggle("opened");
  menuBody.classList.toggle("opened");
  menuBtn.ariaExpanded = menuBtn.classList.contains("opened") ? true : false;
}

查看完整的导航栏源码。

选项卡

选项卡包含一个选项卡列表和一个面板，切换选项卡的时候，改变选项卡面板的内容。Tab 首先访问选项卡列表，焦点落入选项卡列表，再次 Tab 焦点将离开选项卡。在选项卡列表里，使用 Left Arrow 和 Right Arrow 访问每一个选项卡，有的选项卡也支持使用 Home 和 End 聚焦第一个和最后一个选项卡。

查看源码。

          
const tabList = ["#tab_1", "#tab_2", "#tab_3", "#tab_4", "#tab_5"];

// 4～17 行为焦点管理的部分，管理了焦点的入口、出口，以及焦点在列表内的移动
focusNoJutsu("#tab_list", tabList, { // L:4
  next: e => e.key === "ArrowRight",
  prev: e => e.key === "ArrowLeft",
  exit: [{
    key: e => e.key === "Tab" && !e.shiftKey,
    target: "#tags_code",
  }, {
    key: e => e.key === "Tab" && e.shiftKey,
    target: "#navigation_code",
  }],
  initialActive: 1,
  removeListenersEachExit: false,
  onMove,
}); // L:17

// 下面的函数和焦点无关，和样式或其它逻辑有关，这些代码在实际开发中，可以和上面的焦点部分分开，或者可以像本例中，把这些代码集成到焦点管理中

/** 进行样式修改，当焦点移动时，本次聚焦添加样式，上一次聚焦移除样式，更新 ARIA */
function onMove({ prev, cur, prevI, curI }) {
  if (prevI === -1 || curI === -1) return;
  prev.setAttribute("aria-selected", "false");
  cur.setAttribute("aria-selected", "true");
  const prevPanel = document.getElementById("tabpanel_" + (prevI + 1));
  const curPanel = document.getElementById("tabpanel_" + (curI + 1));
  prevPanel.classList.add('is-hidden');
  curPanel.classList.remove('is-hidden');
}

查看完整的选项卡源码。

播放列表

这个“播放列表”是一个真实例子，是 Spotify 的专辑界面，Spotify 网页有很好的键盘体验。如果有一类元素组成了列表，这类元素的每一个内部又包含很多可聚焦的子元素，这时使用 Tab 从头到尾的访问体验是崩溃的，因为元素太多、花费时间太长了。

Spotify 是这样做的。一首专辑有多首单曲，首先 Tab 会聚焦整个专辑列表，继续 Tab，焦点将退出整个专辑列表，聚焦专辑列表的后一个元素；如果正在播放专辑中的某一首歌曲，首先 Tab 会聚焦整个专辑列表，继续 Tab，焦点不会退出专辑，而是会聚焦歌曲；退出专辑之后，回过头如果想要播放某一首歌，只要让焦点回到专辑列表，然后通过 Up Arrow 和 Down Arrow 来选中；听到动听的歌曲，我们会把这首歌曲收藏起来，当焦点回到歌曲，按下 Left Arrow 或者 Right Arrow 找到“收藏”按钮，就能进行后续的操作了。

专辑

NARUTO -ナルト- オリジナルサウンドトラック

Toshio Masuda MUSASHI PROJECT 2003 20 首歌曲, 39 分钟 54 秒

标题

播放量

オレがナルトだってばよ!

Toshio Masuda

730,051