上下文操作

本词条尚无可操作示例；插画为编辑示意。应用到产品时仍须验证悬停操作是否有对应的键盘与触摸入口、悬停内容是否满足可关闭/可悬停/持续可见三项要求，以及高频或必要操作是否有独立于上下文菜单的入口。

{
  "states": [
    "idle",
    "hovered",
    "focused",
    "long-pressed",
    "open",
    "closed"
  ],
  "a11y": [
    "触发控件有可访问的名称并暴露 aria-haspopup 与 aria-expanded",
    "菜单或工具条可用 Tab、方向键与 Enter 完整操作，不依赖鼠标悬停",
    "悬停或聚焦出现的内容可关闭、可悬停其上且保持可见"
  ],
  "motion": "出现与消失可省略动画；减弱动态偏好下直接显示或隐藏"
}

{
  "id": "contextual-actions",
  "type": "interaction",
  "name": {
    "zh": "上下文操作",
    "en": "Contextual Actions"
  },
  "aliases": [
    "上下文菜单",
    "行级操作",
    "浮动工具条"
  ],
  "granularity": "component",
  "intents": [
    "manipulate-object",
    "reveal-actions"
  ],
  "tags": [
    "菜单",
    "悬停",
    "长按",
    "工具条",
    "可发现性"
  ],
  "definition": "在特定对象上或其旁边提供只作用于该对象的操作，在用户选中、悬停、聚焦或长按该对象时出现，常见呈现为上下文菜单、行级操作按钮或浮动工具条。",
  "boundary": "上下文菜单、行级操作按钮与浮动工具条是同一概念的呈现变体，不是互相独立的词条：判断标准是操作是否只针对被选中或被指向的单个对象、是否随选中/悬停/聚焦/长按出现。它不同于行内编辑——行内编辑在原位切换为编辑控件、改变内容本身，而上下文操作只是给出可执行的动作入口，动作本身可能跳转、弹出确认或触发行内编辑；它也不同于批量操作——批量操作作用于多选的一组对象，尚未单独成词条，此处仅作说明性区分。",
  "signature": [
    "操作入口出现在目标对象之上或紧邻其旁，而不是全局工具栏",
    "触发方式包括选中、悬停、聚焦或长按，至少有一种不依赖鼠标悬停",
    "同样的操作可以通过键盘或触摸达到，不只靠鼠标悬停显现"
  ],
  "when": [
    "对象数量多，逐个提供常驻操作按钮会让界面拥挤",
    "操作只与当前选中或指向的单个对象相关，不需要全局呈现",
    "已有其他可发现的触发方式（如可见的操作按钮）能覆盖悬停之外的用户"
  ],
  "when_not": [
    "操作是高频或必要功能，只藏在悬停或长按之后会让触摸和键盘用户找不到入口",
    "对象需要同时对一组多选项执行相同操作，那属于批量操作而不是单对象的上下文操作",
    "内容需要就地修改，此时应交给行内编辑而不是先弹出菜单再另开编辑面板"
  ],
  "tradeoff": "让常驻界面更简洁、操作与对象贴近，但可发现性下降：仅靠悬停呈现的操作对触摸和键盘用户不可见，必须另外提供可达的触发方式。",
  "comparison": {
    "focus": "围绕单个被选中或被指向的对象提供可执行操作",
    "mechanism": "选中、悬停、聚焦或长按时在对象附近显示操作入口",
    "cost": "悬停触发对触摸与键盘用户不可见，需要额外的可发现性设计"
  },
  "sources": [
    {
      "id": "nng-contextual-menus-guidelines",
      "title": "NN/g · Designing Effective Contextual Menus: 10 Guidelines",
      "url": "https://www.nngroup.com/articles/contextual-menus-guidelines/",
      "claim": "上下文菜单应只用于真正次要的操作，不能把高频、必要的操作只藏在额外的点击之后；菜单必须能用键盘打开和浏览，并能被屏幕阅读器完整读出和操作，不能只靠点击或轻触访问。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/contextual-menus-guidelines/",
        "status": "available",
        "checkedAt": "2026-09-16T04:27:49.069Z",
        "jobId": "spn2-ac84d3f557cd7d5b42cf7796e7a5d92fcd69c3a9",
        "url": "https://web.archive.org/web/20260916042758/https://www.nngroup.com/articles/contextual-menus-guidelines/",
        "timestamp": "20260916042758"
      }
    },
    {
      "id": "apg-menu-button",
      "title": "WAI-ARIA APG · Menu Button Pattern",
      "url": "https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/",
      "claim": "菜单按钮是一个激活后展开菜单的按钮，需要 aria-haspopup 与 aria-expanded 等属性，并支持 Enter、Space 及方向键在聚焦按钮时打开菜单，是键盘可达的上下文操作触发方式之一。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/",
        "status": "available",
        "checkedAt": "2026-09-16T04:19:36.676Z",
        "jobId": "spn2-cdab2adcd7243d24575772450e906c15ac4aab07",
        "url": "https://web.archive.org/web/20260916042000/https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/",
        "timestamp": "20260916042000"
      }
    },
    {
      "id": "wcag-content-on-hover-or-focus",
      "title": "W3C · Understanding SC 1.4.13: Content on Hover or Focus (WCAG 2.2, Level AA)",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html",
      "claim": "因悬停或聚焦而出现的额外内容（如子菜单、非模态弹出层）必须可关闭、可将指针移入其上而不消失、并在触发条件保持或内容仍然有效前持续可见，浏览器原生的 title 提示不受此要求约束。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html",
        "status": "available",
        "checkedAt": "2026-09-16T04:19:38.787Z",
        "jobId": "spn2-24616a3000407505f0db944cbc6a0d5c3474bcb4",
        "url": "https://web.archive.org/web/20260916042058/https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html",
        "timestamp": "20260916042058"
      }
    }
  ],
  "relations": [
    {
      "target": "inline-edit",
      "kind": "composes_with",
      "condition": "上下文操作中的某一项是编辑该字段",
      "reason": "上下文操作负责给出动作入口，行内编辑负责就地改变内容；两者可以先后组合，但入口不等于编辑本身。",
      "basis": "editorial"
    },
    {
      "target": "direct-manipulation",
      "kind": "composes_with",
      "condition": "对象既支持拖放等直接操纵，也需要不便用手势表达的操作",
      "reason": "直接操纵覆盖连续、空间性的动作，上下文操作补上离散、命名清楚的动作，例如删除或归档。",
      "basis": "editorial"
    },
    {
      "target": "modal-dialog",
      "kind": "alternative",
      "condition": "操作需要更多说明、确认或多个字段才能完成",
      "reason": "上下文操作适合一步到位的轻量动作；一旦动作复杂到需要额外界面，更适合弹出模态对话框而不是塞进菜单项里。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "操作只在悬停时出现",
      "instruction": "同时提供键盘可达（如聚焦后可见或菜单按钮）与触摸可达（如长按或常驻的更多操作按钮）的等效入口。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "悬停或聚焦触发的内容出现后",
      "instruction": "让它可以被关闭、可以把指针移入其上而不消失，并在触发条件保持时持续可见，满足 WCAG 2.2 SC 1.4.13。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "决定某个操作是否只放进上下文操作里",
      "instruction": "不要把删除、发布等高频或必要操作的唯一入口藏在悬停菜单或长按之后；为其保留一个常驻或更易发现的路径。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "idle",
      "hovered",
      "focused",
      "long-pressed",
      "open",
      "closed"
    ],
    "a11y": [
      "触发控件有可访问的名称并暴露 aria-haspopup 与 aria-expanded",
      "菜单或工具条可用 Tab、方向键与 Enter 完整操作，不依赖鼠标悬停",
      "悬停或聚焦出现的内容可关闭、可悬停其上且保持可见"
    ],
    "motion": "出现与消失可省略动画；减弱动态偏好下直接显示或隐藏"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意。应用到产品时仍须验证悬停操作是否有对应的键盘与触摸入口、悬停内容是否满足可关闭/可悬停/持续可见三项要求，以及高频或必要操作是否有独立于上下文菜单的入口。",
  "image": {
    "src": "/images/contextual-actions.webp",
    "alt": "虚构的 FIELDNOTES 列表：其中一行被高亮，右侧边缘露出一组行级操作按钮，上方悬浮着一条对齐所选区块的浮动工具条。"
  },
  "searchTerms": [
    "menu",
    "hover",
    "long-press",
    "toolbar",
    "discoverability"
  ]
}