{"id":9649,"date":"2026-05-19T11:55:09","date_gmt":"2026-05-19T02:55:09","guid":{"rendered":"https:\/\/fastcoding.jp\/blog\/?p=9649"},"modified":"2026-05-19T11:55:18","modified_gmt":"2026-05-19T02:55:18","slug":"roving-tabindex-focus-trap","status":"publish","type":"post","link":"https:\/\/fastcoding.jp\/blog\/all\/frontend\/roving-tabindex-focus-trap\/","title":{"rendered":"“\u30ad\u30fc\u30dc\u30fc\u30c9\u3060\u3051\u3067\u4f7f\u3048\u308bUI”\u3092\u6700\u5c0f\u30b3\u30fc\u30c9\u3067 \u2500 Roving Tabindex\u3068Focus Trap\u306e\u5b9f\u88c5\u6cd5"},"content":{"rendered":"
\n

\u3053\u3093\u306b\u3061\u306f\u3001\u682a\u5f0f\u4f1a\u793e\u30d5\u30a1\u30b9\u30c8\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u30a8\u30f3\u30b8\u30cb\u30a2\u3001\u72ec\u8eab\u8cb4\u65cfFire\u3067\u3059\u3002<\/p>\n\n\n\n

\u5148\u65e5\u3001\u5b66\u751f\u6642\u4ee3\u306e\u4ef2\u9593\u306b\u8a98\u308f\u308c\u3066\u30e9\u30a4\u30d6\u30cf\u30a6\u30b9\u306b\u884c\u3063\u305f\u3093\u3067\u3059\u3002\u30b9\u30c6\u30fc\u30b8\u4e0a\u306e\u30b9\u30dd\u30c3\u30c8\u30e9\u30a4\u30c8\u304c\u3001\u30dc\u30fc\u30ab\u30eb\u304b\u3089\u30ae\u30bf\u30ea\u30b9\u30c8\u3001\u30c9\u30e9\u30de\u30fc\u3078\u3068\u6ed1\u3089\u304b\u306b\u79fb\u3063\u3066\u3044\u304f\u3002\u89b3\u5ba2\u306f\u81ea\u7136\u3068\u7167\u3089\u3055\u308c\u305f\u5834\u6240\u306b\u76ee\u304c\u884c\u304f\u3002\u3082\u3057\u7167\u660e\u304c\u30e9\u30f3\u30c0\u30e0\u306b\u98db\u3073\u56de\u3063\u305f\u3089\u3001\u3069\u3053\u3092\u898b\u308c\u3070\u3044\u3044\u304b\u308f\u304b\u3089\u306a\u304f\u3066\u3001\u6f14\u594f\u306b\u96c6\u4e2d\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n\n\n\n

\u2026\u2026\u81ea\u5206\u3082\u30ae\u30bf\u30fc\u7df4\u7fd2\u4e2d\u3067\u3059\u304c\u3001\u30b9\u30dd\u30c3\u30c8\u30e9\u30a4\u30c8\u3092\u6d74\u3073\u308b\u4e88\u5b9a\u306f\u5f53\u5206\u306a\u3044\u3067\u3059\u306d\u3002<\/small><\/p>\n\n\n\n

Web\u306eUI\u64cd\u4f5c\u3067\u3082\u3001\u307e\u3063\u305f\u304f\u540c\u3058\u3053\u3068\u304c\u8d77\u304d\u3066\u3044\u307e\u3059\u3002\u30ad\u30fc\u30dc\u30fc\u30c9\u3067\u30e1\u30cb\u30e5\u30fc\u3092\u64cd\u4f5c\u3057\u3088\u3046\u3068\u3057\u305f\u3089\u3001Tab\u30ad\u30fc\u3092\u62bc\u3059\u305f\u3073\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u753b\u9762\u306e\u3042\u3061\u3053\u3061\u306b\u98db\u3076\u3002\u30e2\u30fc\u30c0\u30eb\u3092\u958b\u3044\u305f\u306e\u306b\u3001Tab\u3067\u88cf\u5074\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u79fb\u3063\u3066\u3057\u307e\u3046\u3002\u30c0\u30a4\u30a2\u30ed\u30b0\u3092\u9589\u3058\u305f\u3089\u3001\u30da\u30fc\u30b8\u306e\u5148\u982d\u306b\u623b\u3055\u308c\u308b\u3002<\/p>\n\n\n\n

\u3053\u308c\u3089\u306f\u3059\u3079\u3066\u300c\u30d5\u30a9\u30fc\u30ab\u30b9\u7ba1\u7406\u300d\u306e\u554f\u984c\u3067\u3059\u3002\u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\u3092\u4f7f\u3063\u3066\u3044\u308b\u65b9\u3084\u3001\u624b\u306e\u969c\u5bb3\u3067\u30de\u30a6\u30b9\u304c\u4f7f\u3048\u306a\u3044\u65b9\u306b\u3068\u3063\u3066\u3001\u30d5\u30a9\u30fc\u30ab\u30b9\u306e\u52d5\u304d\u306f\u30b9\u30dd\u30c3\u30c8\u30e9\u30a4\u30c8\u305d\u306e\u3082\u306e\u3002\u4e88\u6e2c\u53ef\u80fd\u3067\u6ed1\u3089\u304b\u3067\u306a\u3051\u308c\u3070\u3001UI\u306f\u4f7f\u3044\u7269\u306b\u306a\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n

\u300c\u3067\u3082\u3001\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u5bfe\u5fdc\u3063\u3066\u5927\u5909\u3058\u3083\u306a\u3044\u3067\u3059\u304b\uff1f WAI-ARIA\u306e\u4ed5\u69d8\u306f\u81a8\u5927\u3060\u3057\u3001\u5c02\u7528\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u5165\u308c\u308b\u3068\u30d0\u30f3\u30c9\u30eb\u304c\u5897\u3048\u308b\u3057\u2026\u2026\u300d<\/p>\n\n\n\n

\u305d\u3046\u601d\u3046\u65b9\u3082\u591a\u3044\u3067\u3057\u3087\u3046\u3002\u5b9f\u969b\u3001\u79c1\u3082\u304b\u3064\u3066\u306f\u305d\u3046\u8003\u3048\u3066\u3044\u307e\u3057\u305f\u3002\u3057\u304b\u3057Roving Tabindex<\/strong>\u3068Focus Trap<\/strong>\u3068\u3044\u30462\u3064\u306e\u30d1\u30bf\u30fc\u30f3\u3092\u62bc\u3055\u3048\u308b\u3060\u3051\u3067\u3001\u30e1\u30cb\u30e5\u30fc\u30fb\u30bf\u30d6\u30fb\u30c0\u30a4\u30a2\u30ed\u30b0\u306e3\u5927\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d5\u30a9\u30fc\u30ab\u30b9\u7ba1\u7406\u304c\u3001\u5916\u90e8\u30e9\u30a4\u30d6\u30e9\u30ea\u306a\u3057\u3067\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002\u4eca\u56de\u306f\u305d\u306e\u5b9f\u88c5\u65b9\u6cd5\u3092\u3001React\u3068Vue\u306e\u4e21\u65b9\u3067\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u306a\u305c\u30d5\u30a9\u30fc\u30ab\u30b9\u7ba1\u7406\u304c\u58ca\u308c\u308b\u306e\u304b<\/h2>\n\n\n\n

\u307e\u305a\u3001\u3088\u304f\u3042\u308bBad Case\u3092\u898b\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n

<!-- Bad Case: \u30e1\u30cb\u30e5\u30fc\u306e\u5168\u9805\u76ee\u304cTab\u505c\u6b62\u70b9 -->\n<nav>\n  <a href=\"\/\" tabindex=\"0\">\u30db\u30fc\u30e0<\/a>\n  <a href=\"\/about\" tabindex=\"0\">\u4f1a\u793e\u6982\u8981<\/a>\n  <a href=\"\/service\" tabindex=\"0\">\u30b5\u30fc\u30d3\u30b9<\/a>\n  <a href=\"\/blog\" tabindex=\"0\">\u30d6\u30ed\u30b0<\/a>\n  <a href=\"\/contact\" tabindex=\"0\">\u304a\u554f\u3044\u5408\u308f\u305b<\/a>\n<\/nav><\/code><\/pre>\n\n\n\n
\u30e1\u30cb\u30e5\u30fc\u9805\u76ee\u304c5\u3064\u3042\u308b\u3068\u3001Tab\u30ad\u30fc\u30925\u56de\u62bc\u3055\u306a\u3044\u3068\u30e1\u30cb\u30e5\u30fc\u3092\u901a\u904e\u3067\u304d\u307e\u305b\u3093\u3002\u30da\u30fc\u30b8\u5185\u306b\u30d8\u30c3\u30c0\u30fc\u30e1\u30cb\u30e5\u30fc\u3001\u30b5\u30a4\u30c9\u30e1\u30cb\u30e5\u30fc\u3001\u30d5\u30c3\u30bf\u30fc\u30e1\u30cb\u30e5\u30fc\u304c\u3042\u308c\u3070\u3001\u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u5230\u9054\u3059\u308b\u307e\u3067\u306b20\u56de\u4ee5\u4e0a\u306eTab\u64cd\u4f5c\u304c\u5fc5\u8981\u306b\u306a\u308b\u3053\u3068\u3082\u3042\u308b\u3002\u30ad\u30fc\u30dc\u30fc\u30c9\u30e6\u30fc\u30b6\u30fc\u306b\u3068\u3063\u3066\u306f\u82e6\u884c\u3067\u3059\u3002<\/p>\n\n\n\n
\u3082\u3046\u3072\u3068\u3064\u306eBad Case\u3002<\/p>\n\n\n\n
\/\/ Bad Case: \u30e2\u30fc\u30c0\u30eb\u306a\u306e\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u5916\u306b\u6f0f\u308c\u308b\nfunction Modal({ isOpen, onClose, children }) {\n  if (!isOpen) return null;\n  \n  return (\n    <div className=\"modal-overlay\">\n      <div className=\"modal-content\">\n        {children}\n        <button onClick={onClose}>\u9589\u3058\u308b<\/button>\n      <\/div>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
\u8996\u899a\u7684\u306b\u306f\u30e2\u30fc\u30c0\u30eb\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001Tab\u30ad\u30fc\u3092\u62bc\u3059\u3068\u30e2\u30fc\u30c0\u30eb\u306e\u5916\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u51fa\u3066\u3044\u304d\u307e\u3059\u3002\u80cc\u5f8c\u306e\u30ea\u30f3\u30af\u3084\u30dc\u30bf\u30f3\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u5f53\u305f\u308b\u305f\u3081\u3001\u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\u306e\u30e6\u30fc\u30b6\u30fc\u306f\u300c\u4eca\u3069\u3053\u306b\u3044\u308b\u306e\u304b\u300d\u304c\u308f\u304b\u3089\u306a\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
Roving Tabindex \u2500 Tab\u79fb\u52d5\u306f\u30b3\u30f3\u30c6\u30ca\u9593\u3001\u77e2\u5370\u3067\u9805\u76ee\u9593<\/h2>\n\n\n\n
Roving Tabindex\u306f\u3001W3C\u306eARIA Authoring Practices Guide\uff08APG\uff09\u3067\u63a8\u5968\u3055\u308c\u3066\u3044\u308b\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30d1\u30bf\u30fc\u30f3\u3067\u3059\u3002\u8003\u3048\u65b9\u306f\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n
    \n
  • \u30b3\u30f3\u30c6\u30ca\u5185\u3067\u73fe\u5728\u30a2\u30af\u30c6\u30a3\u30d6\u306a\u9805\u76ee\u3060\u3051<\/strong>tabindex=\"0\"<\/code>\u306b\u3059\u308b<\/li>\n
  • \u305d\u308c\u4ee5\u5916\u306e\u9805\u76ee\u306ftabindex=\"-1\"<\/code>\u306b\u3059\u308b<\/li>\n
  • \u77e2\u5370\u30ad\u30fc\uff08\u2191\u2193 \u307e\u305f\u306f \u2190\u2192\uff09\u3067\u9805\u76ee\u9593\u3092\u79fb\u52d5\u3059\u308b<\/li>\n
  • Tab\u30ad\u30fc\u3092\u62bc\u3059\u3068\u3001\u30b3\u30f3\u30c6\u30ca\u5168\u4f53\u3092\u30b9\u30ad\u30c3\u30d7\u3057\u3066\u6b21\u306eUI\u8981\u7d20\u306b\u79fb\u308b<\/li>\n<\/ul>\n\n\n\n
    \u3064\u307e\u308a\u30015\u9805\u76ee\u306e\u30e1\u30cb\u30e5\u30fc\u3092Tab\u3067\u901a\u904e\u3059\u308b\u306e\u306b1\u56de\u3067\u6e08\u307f\u307e\u3059\u3002\u30e1\u30cb\u30e5\u30fc\u5185\u306e\u79fb\u52d5\u306f\u77e2\u5370\u30ad\u30fc\u3002Tab\u30ad\u30fc\u3067\u306e\u5927\u304d\u306a\u79fb\u52d5\u3068\u3001\u77e2\u5370\u30ad\u30fc\u3067\u306e\u7d30\u304b\u3044\u79fb\u52d5\u3092\u5206\u96e2\u3059\u308b\u306e\u304c\u6838\u5fc3\u3067\u3059\u3002<\/p>\n\n\n\n
    APG\u3067\u306f\u3001role=\"tablist\"<\/code>\u3092\u6301\u3064\u8981\u7d20\u306e\u4e2d\u306e\u30bf\u30d6\u9593\u79fb\u52d5\u3084\u3001role=\"menubar\"<\/code>\u3092\u6301\u3064\u30e1\u30cb\u30e5\u30fc\u30d0\u30fc\u306e\u30e1\u30cb\u30e5\u30fc\u9805\u76ee\u9593\u79fb\u52d5\u3067\u3001\u3053\u306e\u30d1\u30bf\u30fc\u30f3\u306e\u4f7f\u7528\u3092\u63a8\u5968\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
    React\u5b9f\u88c5<\/h3>\n\n\n\n
    \/\/ hooks\/useRovingTabindex.ts\nimport { useRef, useCallback, KeyboardEvent } from 'react';\n\nexport function useRovingTabindex(itemCount: number) {\n  const activeIndex = useRef(0);\n  const itemsRef = useRef<(HTMLElement | null)[]>([]);\n\n  const setItemRef = useCallback(\n    (index: number) => (el: HTMLElement | null) => {\n      itemsRef.current[index] = el;\n    },\n    []\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      let nextIndex = activeIndex.current;\n\n      switch (e.key) {\n        case 'ArrowDown':\n        case 'ArrowRight':\n          e.preventDefault();\n          nextIndex = (activeIndex.current + 1) % itemCount;\n          break;\n        case 'ArrowUp':\n        case 'ArrowLeft':\n          e.preventDefault();\n          nextIndex =\n            (activeIndex.current - 1 + itemCount) % itemCount;\n          break;\n        case 'Home':\n          e.preventDefault();\n          nextIndex = 0;\n          break;\n        case 'End':\n          e.preventDefault();\n          nextIndex = itemCount - 1;\n          break;\n        default:\n          return;\n      }\n\n      activeIndex.current = nextIndex;\n      itemsRef.current[nextIndex]?.focus();\n    },\n    [itemCount]\n  );\n\n  const getItemProps = useCallback(\n    (index: number) => ({\n      ref: setItemRef(index),\n      tabIndex: index === activeIndex.current ? 0 : -1,\n      onKeyDown: handleKeyDown,\n    }),\n    [setItemRef, handleKeyDown]\n  );\n\n  return { getItemProps };\n}<\/code><\/pre>\n\n\n\n
    \u4f7f\u3044\u65b9\u306f\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u3002\u30bf\u30d6UI\u306e\u4f8b\u3092\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
    \/\/ components\/TabMenu.tsx\nimport { useState } from 'react';\nimport { useRovingTabindex } from '..\/hooks\/useRovingTabindex';\n\nconst tabs = ['\u6982\u8981', '\u6599\u91d1', '\u4e8b\u4f8b', 'FAQ'];\n\nexport function TabMenu({\n  onSelect,\n}: {\n  onSelect: (index: number) => void;\n}) {\n  const [selected, setSelected] = useState(0);\n  const { getItemProps } = useRovingTabindex(tabs.length);\n\n  const handleSelect = (index: number) => {\n    setSelected(index);\n    onSelect(index);\n  };\n\n  return (\n    <div role=\"tablist\" aria-label=\"\u30b5\u30fc\u30d3\u30b9\u60c5\u5831\">\n      {tabs.map((tab, i) => (\n        <button\n          key={tab}\n          role=\"tab\"\n          aria-selected={i === selected}\n          onClick={() => handleSelect(i)}\n          {...getItemProps(i)}\n        >\n          {tab}\n        <\/button>\n      ))}\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
    role=\"tablist\"<\/code>\u3068role=\"tab\"<\/code>\u3067\u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\u306b\u300c\u3053\u308c\u306f\u30bf\u30d6UI\u3067\u3042\u308b\u300d\u3068\u4f1d\u3048\u3001aria-selected<\/code>\u3067\u73fe\u5728\u9078\u629e\u4e2d\u306e\u30bf\u30d6\u3092\u660e\u793a\u3057\u3066\u3044\u307e\u3059\u3002\u30ad\u30fc\u30dc\u30fc\u30c9\u64cd\u4f5c\u306fuseRovingTabindex<\/code>\u30d5\u30c3\u30af\u304c\u4e00\u62ec\u7ba1\u7406\u3059\u308b\u305f\u3081\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5074\u306e\u30b3\u30fc\u30c9\u306f\u6700\u5c0f\u9650\u3067\u3059\u3002<\/p>\n\n\n\n
    \u672c\u8a18\u4e8b\u306eReact\u30b3\u30fc\u30c9\u4f8b\u306fReact 18\u4ee5\u964d\u3092\u524d\u63d0\u3068\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
    Vue\u5b9f\u88c5<\/h3>\n\n\n\n
    \/\/ composables\/useRovingTabindex.ts\nimport { ref, type Ref } from 'vue';\n\nexport function useRovingTabindex(itemCount: Ref<number>) {\n  const activeIndex = ref(0);\n  const items = ref<HTMLElement[]>([]);\n\n  function setItemRef(el: HTMLElement | null, index: number) {\n    if (el) items.value[index] = el;\n  }\n\n  function handleKeyDown(e: KeyboardEvent) {\n    let nextIndex = activeIndex.value;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        e.preventDefault();\n        nextIndex = (activeIndex.value + 1) % itemCount.value;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        e.preventDefault();\n        nextIndex =\n          (activeIndex.value - 1 + itemCount.value) %\n          itemCount.value;\n        break;\n      case 'Home':\n        e.preventDefault();\n        nextIndex = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        nextIndex = itemCount.value - 1;\n        break;\n      default:\n        return;\n    }\n\n    activeIndex.value = nextIndex;\n    items.value[nextIndex]?.focus();\n  }\n\n  return { activeIndex, setItemRef, handleKeyDown };\n}<\/code><\/pre>\n\n\n\n
    <!-- components\/TabMenu.vue -->\n<script setup lang=\"ts\">\nimport { ref, computed } from 'vue';\nimport { useRovingTabindex } from '~\/composables\/useRovingTabindex';\n\nconst tabs = ['\u6982\u8981', '\u6599\u91d1', '\u4e8b\u4f8b', 'FAQ'];\nconst itemCount = computed(() => tabs.length);\nconst selected = ref(0);\n\nconst { activeIndex, setItemRef, handleKeyDown } =\n  useRovingTabindex(itemCount);\n\nconst emit = defineEmits<{ select: [index: number] }>();\n\nfunction handleSelect(index: number) {\n  selected.value = index;\n  emit('select', index);\n}\n<\/script>\n\n<template>\n  <div role=\"tablist\" aria-label=\"\u30b5\u30fc\u30d3\u30b9\u60c5\u5831\">\n    <button\n      v-for=\"(tab, i) in tabs\"\n      :key=\"tab\"\n      role=\"tab\"\n      :aria-selected=\"i === selected\"\n      :tabindex=\"i === activeIndex ? 0 : -1\"\n      :ref=\"(el) => setItemRef(el as HTMLElement, i)\"\n      @keydown=\"handleKeyDown\"\n      @click=\"handleSelect(i)\"\n    >\n      {{ tab }}\n    <\/button>\n  <\/div>\n<\/template><\/code><\/pre>\n\n\n\n
    React\u3068Vue\u3067\u5b9f\u88c5\u306e\u5dee\u306f\u3042\u308a\u307e\u3059\u304c\u3001\u8003\u3048\u65b9\u306f\u540c\u3058\u3067\u3059\u3002\u300c\u73fe\u5728\u30a2\u30af\u30c6\u30a3\u30d6\u306a\u9805\u76ee\u3060\u3051Tab\u3067\u5230\u9054\u3067\u304d\u308b\u300d\u3068\u3044\u3046\u539f\u5247\u3092\u30d5\u30c3\u30af\u307e\u305f\u306fcomposable\u306b\u9589\u3058\u8fbc\u3081\u3066\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u305d\u308c\u3092\u4f7f\u3046\u3060\u3051\u3002<\/p>\n\n\n\n
    Focus Trap \u2500 \u30e2\u30fc\u30c0\u30eb\u5185\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u9589\u3058\u8fbc\u3081\u308b<\/h2>\n\n\n\n
    \u6b21\u306b\u3001\u30e2\u30fc\u30c0\u30eb\u3084\u30c0\u30a4\u30a2\u30ed\u30b0\u3067\u5fc5\u8981\u306b\u306a\u308bFocus Trap\u3067\u3059\u3002\u30e2\u30fc\u30c0\u30eb\u304c\u958b\u3044\u3066\u3044\u308b\u9593\u3001\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u30e2\u30fc\u30c0\u30eb\u5185\u306b\u9589\u3058\u8fbc\u3081\u3001Tab\u30ad\u30fc\u3067\u5916\u306b\u51fa\u306a\u3044\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
    ARIA Authoring Practices Guide\uff08APG\uff09\u306e\u300cDialog (Modal)\u300d\u30d1\u30bf\u30fc\u30f3\u3067\u306f\u3001\u4ee5\u4e0b\u304c\u8981\u4ef6\u3067\u3059\u3002<\/p>\n\n\n\n
      \n
    • \u30e2\u30fc\u30c0\u30eb\u304c\u958b\u3044\u305f\u3089\u3001\u30e2\u30fc\u30c0\u30eb\u5185\u306e\u6700\u521d\u306e\u30d5\u30a9\u30fc\u30ab\u30b9\u53ef\u80fd\u306a\u8981\u7d20\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u79fb\u3059<\/li>\n
    • Tab\/Shift+Tab\u3067\u30e2\u30fc\u30c0\u30eb\u5185\u306e\u30d5\u30a9\u30fc\u30ab\u30b9\u53ef\u80fd\u306a\u8981\u7d20\u3092\u5de1\u56de\u3059\u308b\uff08\u5916\u306b\u51fa\u306a\u3044\uff09<\/li>\n
    • Esc\u30ad\u30fc\u3067\u30e2\u30fc\u30c0\u30eb\u3092\u9589\u3058\u308b<\/li>\n
    • \u30e2\u30fc\u30c0\u30eb\u3092\u9589\u3058\u305f\u3089\u3001\u30e2\u30fc\u30c0\u30eb\u3092\u958b\u3044\u305f\u30c8\u30ea\u30ac\u30fc\u8981\u7d20\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u623b\u3059<\/li>\n<\/ul>\n\n\n\n
      React\u5b9f\u88c5<\/h3>\n\n\n\n
      \/\/ hooks\/useFocusTrap.ts\nimport { useRef, useEffect } from 'react';\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(', ');\n\nexport function useFocusTrap(isActive: boolean) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!isActive || !containerRef.current) return;\n\n    triggerRef.current = document.activeElement as HTMLElement;\n\n    const container = containerRef.current;\n    const focusableElements =\n      container.querySelectorAll(FOCUSABLE_SELECTOR);\n    (focusableElements[0] as HTMLElement)?.focus();\n\n    function handleKeyDown(e: KeyboardEvent) {\n      if (e.key !== 'Tab') return;\n\n      const currentFocusable =\n        container.querySelectorAll(FOCUSABLE_SELECTOR);\n      const first = currentFocusable[0] as HTMLElement;\n      const last = currentFocusable[\n        currentFocusable.length - 1\n      ] as HTMLElement;\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last?.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first?.focus();\n        }\n      }\n    }\n\n    container.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      container.removeEventListener('keydown', handleKeyDown);\n      triggerRef.current?.focus();\n    };\n  }, [isActive]);\n\n  return { containerRef };\n}<\/code><\/pre>\n\n\n\n
      \u30e2\u30fc\u30c0\u30eb\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u306e\u4f7f\u3044\u65b9\u3067\u3059\u3002<\/p>\n\n\n\n
      \/\/ components\/Modal.tsx\nimport { useFocusTrap } from '..\/hooks\/useFocusTrap';\n\ntype ModalProps = {\n  isOpen: boolean;\n  onClose: () => void;\n  title: string;\n  children: React.ReactNode;\n};\n\nexport function Modal({\n  isOpen,\n  onClose,\n  title,\n  children,\n}: ModalProps) {\n  const { containerRef } = useFocusTrap(isOpen);\n\n  if (!isOpen) return null;\n\n  return (\n    <div className=\"modal-overlay\" onClick={onClose}>\n      <div\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={title}\n        className=\"modal-content\"\n        onClick={(e) => e.stopPropagation()}\n        onKeyDown={(e) => {\n          if (e.key === 'Escape') onClose();\n        }}\n      >\n        <h2>{title}<\/h2>\n        {children}\n        <button onClick={onClose}>\u9589\u3058\u308b<\/button>\n      <\/div>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
      role=\"dialog\"<\/code>\u3068aria-modal=\"true\"<\/code>\u3067\u3001\u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\u306b\u30e2\u30fc\u30c0\u30eb\u30c0\u30a4\u30a2\u30ed\u30b0\u3067\u3042\u308b\u3053\u3068\u3092\u4f1d\u3048\u307e\u3059\u3002aria-label<\/code>\u3067\u30c0\u30a4\u30a2\u30ed\u30b0\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u63d0\u4f9b\u3057\u3001Esc\u30ad\u30fc\u3067\u9589\u3058\u3089\u308c\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
      Vue\u5b9f\u88c5<\/h3>\n\n\n\n
      \/\/ composables\/useFocusTrap.ts\nimport {\n  ref,\n  watch,\n  nextTick,\n  onUnmounted,\n  type Ref,\n} from 'vue';\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(', ');\n\nexport function useFocusTrap(isActive: Ref<boolean>) {\n  const containerRef = ref<HTMLElement | null>(null);\n  let triggerElement: HTMLElement | null = null;\n  let cleanup: (() => void) | null = null;\n\n  watch(isActive, async (active) => {\n    if (active) {\n      triggerElement = document.activeElement as HTMLElement;\n      await nextTick();\n\n      const container = containerRef.value;\n      if (!container) return;\n\n      const focusable =\n        container.querySelectorAll(FOCUSABLE_SELECTOR);\n      const first = focusable[0] as HTMLElement;\n      const last =\n        focusable[focusable.length - 1] as HTMLElement;\n\n      first?.focus();\n\n      function handleKeyDown(e: KeyboardEvent) {\n        if (e.key !== 'Tab' || !container) return;\n\n        const currentFocusable =\n          container.querySelectorAll(FOCUSABLE_SELECTOR);\n        const f = currentFocusable[0] as HTMLElement;\n        const l = currentFocusable[\n          currentFocusable.length - 1\n        ] as HTMLElement;\n\n        if (e.shiftKey) {\n          if (document.activeElement === f) {\n            e.preventDefault();\n            l?.focus();\n          }\n        } else {\n          if (document.activeElement === l) {\n            e.preventDefault();\n            f?.focus();\n          }\n        }\n      }\n\n      container.addEventListener('keydown', handleKeyDown);\n      cleanup = () => {\n        container.removeEventListener(\n          'keydown',\n          handleKeyDown\n        );\n      };\n    } else {\n      cleanup?.();\n      cleanup = null;\n      triggerElement?.focus();\n    }\n  });\n\n  onUnmounted(() => cleanup?.());\n\n  return { containerRef };\n}<\/code><\/pre>\n\n\n\n
      <!-- components\/AppModal.vue -->\n<script setup lang=\"ts\">\nimport { toRef } from 'vue';\nimport { useFocusTrap } from '~\/composables\/useFocusTrap';\n\nconst props = defineProps<{\n  isOpen: boolean;\n  title: string;\n}>();\n\nconst emit = defineEmits<{ close: [] }>();\nconst isActive = toRef(props, 'isOpen');\nconst { containerRef } = useFocusTrap(isActive);\n<\/script>\n\n<template>\n  <Teleport to=\"body\">\n    <div\n      v-if=\"isOpen\"\n      class=\"modal-overlay\"\n      @click=\"emit('close')\"\n    >\n      <div\n        ref=\"containerRef\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"title\"\n        class=\"modal-content\"\n        @click.stop\n        @keydown.esc=\"emit('close')\"\n      >\n        <h2>{{ title }}<\/h2>\n        <slot \/>\n        <button @click=\"emit('close')\">\u9589\u3058\u308b<\/button>\n      <\/div>\n    <\/div>\n  <\/Teleport>\n<\/template><\/code><\/pre>\n\n\n\n
      Vue\u3067\u306fTeleport\u3092\u4f7f\u3063\u3066\u30e2\u30fc\u30c0\u30eb\u3092body\u76f4\u4e0b\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3066\u3044\u307e\u3059\u3002DOM\u69cb\u9020\u4e0a\u306e\u4f4d\u7f6e\u306b\u95a2\u308f\u3089\u305a\u6b63\u3057\u3044\u30d5\u30a9\u30fc\u30ab\u30b9\u7ba1\u7406\u304c\u884c\u3048\u307e\u3059\u304c\u3001Teleport\u8d8a\u3057\u306e\u30d5\u30a9\u30fc\u30ab\u30b9\u7ba1\u7406\u306b\u306f\u3072\u3068\u3064\u6ce8\u610f\u304c\u5fc5\u8981\u3067\u3059\u3002Teleport\u3067\u79fb\u52d5\u3057\u305f\u8981\u7d20\u306f\u3001\u5143\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30c4\u30ea\u30fc\u3068\u306f\u7570\u306a\u308bDOM\u4f4d\u7f6e\u306b\u3042\u308b\u305f\u3081\u3001\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3067\u30d5\u30a9\u30fc\u30ab\u30b9\u30a4\u30d9\u30f3\u30c8\u3092\u6355\u6349\u3067\u304d\u307e\u305b\u3093\u3002Focus Trap\u306e\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u306fTeleport\u5148\u306e\u30b3\u30f3\u30c6\u30ca\u8981\u7d20\u306b\u76f4\u63a5\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u4e0a\u306e\u30b3\u30fc\u30c9\u3067\u306fcontainerRef\u306b\u5bfe\u3057\u3066addEventListener\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u3053\u306e\u554f\u984c\u3092\u56de\u907f\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
      Roving Tabindex\u3068Focus Trap\u3092\u7d44\u307f\u5408\u308f\u305b\u308b<\/h2>\n\n\n\n
      \u5b9f\u969b\u306e\u30d7\u30ed\u30c0\u30af\u30c8\u3067\u306f\u3001\u30b5\u30a4\u30c9\u30e1\u30cb\u30e5\u30fc\u306e\u3088\u3046\u306b\u4e21\u65b9\u304c\u5fc5\u8981\u306b\u306a\u308b\u30b1\u30fc\u30b9\u304c\u3042\u308a\u307e\u3059\u3002\u30e2\u30d0\u30a4\u30eb\u3067\u306f\u30e1\u30cb\u30e5\u30fc\u304c\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u8868\u793a\u306b\u306a\u308a\u3001\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u3067\u306f\u5e38\u6642\u8868\u793a\u3002\u30e2\u30d0\u30a4\u30eb\u306e\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u6642\u306b\u306fFocus Trap\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>\n\n\n\n
      \/\/ components\/SideMenu.tsx\uff08React\u6982\u7565\uff09\nimport { useRovingTabindex } from '..\/hooks\/useRovingTabindex';\nimport { useFocusTrap } from '..\/hooks\/useFocusTrap';\n\nconst menuItems = [\n  { id: 'dashboard', label: '\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9', href: '\/dashboard' },\n  { id: 'projects', label: '\u30d7\u30ed\u30b8\u30a7\u30af\u30c8', href: '\/projects' },\n  { id: 'reports', label: '\u30ec\u30dd\u30fc\u30c8', href: '\/reports' },\n  { id: 'settings', label: '\u8a2d\u5b9a', href: '\/settings' },\n];\n\nexport function SideMenu({ isOverlay }: { isOverlay: boolean }) {\n  const { getItemProps } = useRovingTabindex(menuItems.length);\n  const { containerRef } = useFocusTrap(isOverlay);\n\n  return (\n    <nav\n      ref={isOverlay ? containerRef : undefined}\n      role=\"navigation\"\n      aria-label=\"\u30e1\u30a4\u30f3\u30e1\u30cb\u30e5\u30fc\"\n    >\n      <ul role=\"menu\">\n        {menuItems.map((item, i) => (\n          <li key={item.id} role=\"none\">\n            <a\n              href={item.href}\n              role=\"menuitem\"\n              {...getItemProps(i)}\n            >\n              {item.label}\n            <\/a>\n          <\/li>\n        ))}\n      <\/ul>\n    <\/nav>\n  );\n}<\/code><\/pre>\n\n\n\n
      isOverlay<\/code>\u304ctrue\u306e\u3068\u304d\uff08\u30e2\u30d0\u30a4\u30eb\u8868\u793a\u6642\uff09\u3060\u3051Focus Trap\u3092\u6709\u52b9\u306b\u3057\u307e\u3059\u3002Roving Tabindex\u306f\u3069\u3061\u3089\u306e\u8868\u793a\u3067\u3082\u5e38\u306b\u52d5\u4f5c\u3057\u3001\u30e1\u30cb\u30e5\u30fc\u9805\u76ee\u9593\u306e\u77e2\u5370\u30ad\u30fc\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
      \u30d6\u30e9\u30a6\u30b6\u9593\u306e\u6319\u52d5\u5dee\u306b\u6ce8\u610f<\/h2>\n\n\n\n
      \u30d5\u30a9\u30fc\u30ab\u30b9\u7ba1\u7406\u306e\u5b9f\u88c5\u3067\u3001\u30d6\u30e9\u30a6\u30b6\u9593\u306e\u5dee\u7570\u306b\u30cf\u30de\u308a\u3084\u3059\u3044\u30dd\u30a4\u30f3\u30c8\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
      Safari\u306eTab\u30ad\u30fc\u52d5\u4f5c<\/h3>\n\n\n\n
      macOS\u306eSafari\u306f\u3001\u30c7\u30d5\u30a9\u30eb\u30c8\u8a2d\u5b9a\u3067\u306fTab\u30ad\u30fc\u3067\u30ea\u30f3\u30af\u3084\u30dc\u30bf\u30f3\u306a\u3069\u306e\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u8981\u7d20\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u79fb\u308a\u307e\u305b\u3093\u3002\u300c\u8a2d\u5b9a \u2192 \u8a73\u7d30 \u2192 \u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3 \u2192 Tab\u30ad\u30fc\u3092\u62bc\u3057\u3066Web\u30da\u30fc\u30b8\u4e0a\u306e\u5404\u9805\u76ee\u3092\u30cf\u30a4\u30e9\u30a4\u30c8\u300d\u3092\u6709\u52b9\u306b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u958b\u767a\u4e2d\u306f\u5fc5\u305a\u3053\u306e\u8a2d\u5b9a\u3092\u30aa\u30f3\u306b\u3057\u3066\u691c\u8a3c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
      Firefox\u306efocus\u30a4\u30d9\u30f3\u30c8\u306e\u30bf\u30a4\u30df\u30f3\u30b0<\/h3>\n\n\n\n
      Firefox\u3067\u306f\u3001focus\u30a4\u30d9\u30f3\u30c8\u306e\u30bf\u30a4\u30df\u30f3\u30b0\u304c\u4ed6\u306e\u30d6\u30e9\u30a6\u30b6\u3068\u5fae\u5999\u306b\u7570\u306a\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u3068\u304f\u306bDOM\u5909\u66f4\u76f4\u5f8c\u306e\u30d5\u30a9\u30fc\u30ab\u30b9\u79fb\u52d5\u3067\u3001\u610f\u56f3\u3057\u305f\u8981\u7d20\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u304c\u5f53\u305f\u3089\u306a\u3044\u30b1\u30fc\u30b9\u304c\u5831\u544a\u3055\u308c\u3066\u3044\u307e\u3059\u3002requestAnimationFrame<\/code>\u30671\u30d5\u30ec\u30fc\u30e0\u5f85\u3063\u3066\u304b\u3089\u30d5\u30a9\u30fc\u30ab\u30b9\u3092\u79fb\u3059\u51e6\u7406\u3092\u5165\u308c\u308b\u3068\u3001\u5b89\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
      requestAnimationFrame(() => {\n  targetElement.focus();\n});<\/code><\/pre>\n\n\n\n
      aria-modal=”true”\u306e\u30d6\u30e9\u30a6\u30b6\u30b5\u30dd\u30fc\u30c8<\/h3>\n\n\n\n
      aria-modal=\"true\"<\/code>\u306f\u3001\u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\u306b\u300c\u3053\u306e\u30c0\u30a4\u30a2\u30ed\u30b0\u306e\u5916\u306f\u64cd\u4f5c\u4e0d\u53ef\u300d\u3068\u4f1d\u3048\u308b\u5c5e\u6027\u3067\u3059\u3002\u305f\u3060\u3057\u3001\u30b5\u30dd\u30fc\u30c8\u72b6\u6cc1\u306f\u30d6\u30e9\u30a6\u30b6\u3068\u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\u306e\u7d44\u307f\u5408\u308f\u305b\u306b\u3088\u308a\u7570\u306a\u308a\u307e\u3059\u3002a11ysupport.io\u306a\u3069\u3067\u6700\u65b0\u306e\u30b5\u30dd\u30fc\u30c8\u72b6\u6cc1\u3092\u78ba\u8a8d\u3057\u305f\u4e0a\u3067\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002Focus Trap\u306b\u3088\u308b\u30ad\u30fc\u30dc\u30fc\u30c9\u30d5\u30a9\u30fc\u30ab\u30b9\u306e\u9589\u3058\u8fbc\u3081\u306faria-modal<\/code>\u3068\u306f\u72ec\u7acb\u3057\u3066\u52d5\u4f5c\u3059\u308b\u305f\u3081\u3001\u4e21\u65b9\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u5e45\u5e83\u3044\u74b0\u5883\u3092\u30ab\u30d0\u30fc\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
      \u5b9f\u88c5\u54c1\u8cea\u306e\u691c\u8a3c\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8<\/h2>\n\n\n\n
      \u30d5\u30a9\u30fc\u30ab\u30b9\u7ba1\u7406\u3092\u5b9f\u88c5\u3057\u305f\u3089\u3001\u30ea\u30ea\u30fc\u30b9\u524d\u306b\u4ee5\u4e0b\u306e\u30c1\u30a7\u30c3\u30af\u3092\u884c\u3044\u307e\u3059\u3002\u81ea\u52d5\u30c6\u30b9\u30c8\u3060\u3051\u3067\u306f\u4e0d\u5341\u5206\u3067\u3001\u624b\u52d5\u30c6\u30b9\u30c8\u304c\u4e0d\u53ef\u6b20\u3067\u3059\u3002<\/p>\n\n\n\n
      \u30ad\u30fc\u30dc\u30fc\u30c9\u64cd\u4f5c<\/h3>\n\n\n\n
      \n\n\n\n
      \u64cd\u4f5c<\/th>\u671f\u5f85\u3055\u308c\u308b\u52d5\u4f5c<\/th><\/tr>\n<\/thead>\n
      Tab<\/td>\u6b21\u306eUI\u8981\u7d20\u30b0\u30eb\u30fc\u30d7\uff08\u30b3\u30f3\u30c6\u30ca\uff09\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u79fb\u52d5<\/td><\/tr>\n
      Shift + Tab<\/td>\u524d\u306eUI\u8981\u7d20\u30b0\u30eb\u30fc\u30d7\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u79fb\u52d5<\/td><\/tr>\n
      \u2191\u2193 \u307e\u305f\u306f \u2190\u2192<\/td>\u30b3\u30f3\u30c6\u30ca\u5185\u306e\u9805\u76ee\u9593\u3067\u30d5\u30a9\u30fc\u30ab\u30b9\u79fb\u52d5<\/td><\/tr>\n
      Home<\/td>\u30b3\u30f3\u30c6\u30ca\u5185\u306e\u6700\u521d\u306e\u9805\u76ee\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u79fb\u52d5<\/td><\/tr>\n
      End<\/td>\u30b3\u30f3\u30c6\u30ca\u5185\u306e\u6700\u5f8c\u306e\u9805\u76ee\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u79fb\u52d5<\/td><\/tr>\n
      Esc<\/td>\u30e2\u30fc\u30c0\u30eb\/\u30e1\u30cb\u30e5\u30fc\u3092\u9589\u3058\u3001\u30c8\u30ea\u30ac\u30fc\u8981\u7d20\u306b\u30d5\u30a9\u30fc\u30ab\u30b9\u623b\u308a<\/td><\/tr>\n
      Enter \/ Space<\/td>\u9078\u629e\/\u5b9f\u884c<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n\n\n\n
      \u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\u78ba\u8a8d<\/h3>\n\n\n\n