HTML — 対話的な要素

4.11. 対話的な要素

【この訳に特有な表記規約】

◎表記記号

4.11.1. ``details^e 要素

`分類$
`~flow内容$／`対話的~内容$／`可触~内容$ ◎ Flow content. ◎ Interactive content. ◎ Palpable content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
［ 1 個の `summary$e 要素, `~flow内容$ ］からなる並び ◎ One summary element followed by flow content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
``name$a — 互いに排他的な `details$e 要素たちが成す~groupの名前 ◎ name — Name of group of mutually-exclusive details elements
``open$a — 詳細は可視であるかどうか ◎ open — Whether the details are visible
`~accessibilityの考慮点$
`details$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLDetailsElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute DOMString ``name$m;
  [`CEReactions$] attribute boolean ``open$m;
};

`details$e 要素は、 利用者が追加的な情報や~controlを得せるような，開閉式~widgetを`表現-$する。 ◎ The details element represents a disclosure widget from which the user can obtain additional information or controls.

注記： 他の~HTML要素と同じく、 `details$e 要素を利用して別の型の~controlを表現するよう試みることは， 適合でない。 例えば，~UItab~widgetや~menu~widgetは、 開閉式~widgetではないので， そのような~patternを実装するために `details$e 要素を濫用することは不正である。 ◎ As with all HTML elements, it is not conforming to use the details element when attempting to represent another type of control. For example, tab widgets and menu widgets are not disclosure widgets, so abusing the details element to implement these patterns is incorrect.

注記： `details$e 要素は、 脚注~等（ footnote ）には適切でない。 脚注を~mark-upする方法の詳細は、 `脚注に関する節＠~HTMLLS/semantics-other.html#footnotes$を見られたし。 ◎ The details element is not appropriate for footnotes. Please see the section on footnotes for details on how to mark up footnotes.

要素の最初の子が `summary$e 要素であるならば、 それが詳細の［ 要約（ summary ） ／ ~legend ］を`表現-$する。 そのような子がなければ、 ~UAは，自前の~legend（例： “詳細” ）を供するベキである。 ◎ The first summary element child of the element, if any, represents the summary or legend of the details. If there is no child summary element, the user agent should provide its own legend (e.g. "Details").

要素の残りの内容は、 追加的な［ 情報や~controlたち ］を`表現-$する。 ◎ The rest of the element's contents represents the additional information or controls.

``name@a 内容~属性は、 互いに関係する `details$e 要素たちが成す~groupの名前を与える。 この~groupを成す ある~memberを開くと、 他の~memberは閉じられる。 この属性に指定する値は、 空~文字列にしてはナラナイ。 ◎ The name content attribute gives the name of the group of related details elements that the element is a member of. Opening one member of this group causes other members of the group to close. If the attribute is specified, its value must not be the empty string.

作者は、 この特能を利用する前に，［ 互いに関係する `details$e 要素たちを排他的な~accordion【蛇腹の様な~UI】の中へ~group化すること ］が［ 利用者にとって助けになるか有害になるか ］を考慮するベキである。 排他的な~accordionを利用すれば，それら一連の内容が占める空間の最大な量を抑制できるが、［ 求めるものを見出すために多くの~itemを開く必要がある／ 複数の~itemの内容を同時に調べたいと求める ］利用者をいらつかせかねない。 ◎ Before using this feature, authors should consider whether this grouping of related details elements into an exclusive accordion is helpful or harmful to to users. While using an exclusive accordion can reduce the maximum amount of space that a set of content can occupy, it can also frustrate users who have to open many items to find what they want or users who want to look at the contents of multiple items at the same time.

文書は、 同じ`有名~details~group$内に ``open$a 属性を有する複数個の `details$e 要素を包含してはナラナイ。 作者は、 ~scriptを利用して，そのようになるよう文書に `details$e 要素を追加してはナラナイ。 ◎ A document must not contain more than one details element in the same details name group that has the open attribute present. Authors must not use script to add details elements to a document in a way that would cause a details name group to have more than one details element with the open attribute present.

注記： 共通な ``name$a 属性により作成される要素たちが成す~groupは、 排他的である — すなわち、 同時に開かれ得る `details$e 要素は 1 個しかないことを意味する。 この排他性は，~UAにより施行されるが、 その結果の施行は， ~markup内の ``open$a 属性を即時に変更する。 作者に対するこの要件は、 そのような紛らわしい~markupを禁止する。 ◎ The group of elements that is created by a common name attribute is exclusive, meaning that at most one of the details elements can be open at once. While this exclusivity is enforced by user agents, the resulting enforcement immediately changes the open attributes in the markup. This requirement on authors forbids such misleading markup.

文書は、 次を満たす `details$e 要素を包含してはナラナイ ⇒ 同じ`有名~details~group$に属する別の `details$e 要素の子孫である ◎ A document must not contain a details element that is a descendant of another details element in the same details name group.

``name$a 属性を利用して［ 互いに関係する複数個の `details$e 要素 ］を~group化する文書は、 それらを一緒に保つよう，ある要素（ `section$e や `article$e など）内に包含するベキである。 ~groupを見出しと伴に導入することがイミを成すときは、 作者は，［ 当の `details$e 要素たちを包含している要素 ］の始端に`見出し$用の要素を与えて，その中に当の見出しを置くベキである。 ◎ Documents that use the name attribute to group multiple related details elements should keep those related elements together in a containing element (such as a section element or article element). When it makes sense for the group to be introduced with a heading, authors should put that heading in a heading element at the start of the containing element.

注記： 関係する要素たちを［ 視覚的／~program的 ］に一緒に~group化することは、 ~access可能な利用者~体験のために重要になり得る。 そうすれば、 利用者が，そのような要素どうしの関係性を理解し易くなり得る。 関係する要素たちが~group化されず，~web~pageを成す異質な複数の節~内にあると、 要素どうしの関係性は，［ 発見し難く／理解し難く ］なり得る。 ◎ Visually and programmatically grouping related elements together can be important for accessible user experiences. This can help users understand the relationship between such elements. When related elements are in disparate sections of a web page rather than being grouped, the elements' relationships to each other can be less discoverable or understandable.

``open@a 内容~属性は`真偽-属性$である。 在る場合、［ 要約, 追加的な情報どちらも利用者に示す ］ことを指示する。 無い場合、 要約のみが示される。 ◎ The open content attribute is a boolean attribute. If present, it indicates that both the summary and the additional information is to be shown to the user. If the attribute is absent, only the summary is to be shown.

追加的な情報は、 要素の作成-時には，この属性が［ 無いならば 隠される ／ 在るならば 示される ］ベキである。 その後に，属性が［ 除去された／追加された ］場合、 情報は［ 隠される／示される ］ベキである。 ◎ When the element is created, if the attribute is absent, the additional information should be hidden; if the attribute is present, that information should be shown. Subsequently, if the attribute is removed, then the information should be hidden; if the attribute is added, the information should be shown.

~UAは、［ 要素 %要素 に対し，追加的な情報を［ 示す／隠す ］よう要請する ］ことを利用者に許容するベキである。 そのような要請を尊守するときは、 ~UAは，次を走らすモノトスル：

  • 示す場合 ⇒ %要素 の`属性~値を設定する$( `open^l, 空~文字列 )
  • 隠す場合 ⇒ %要素 から ``open$a `属性を除去する$
◎ The user agent should allow the user to request that the additional information be shown or hidden. To honor a request for the details to be shown, the user agent must set the open attribute on the element to the empty string. To honor a request for the information to be hidden, the user agent must remove the open attribute from the element.

この，追加的な情報を［ 示す／隠す ］能は、 適切な `summary$e 要素が存在するならば，単純に その`作動化の挙動$になり得る。 しかしながら，そのような要素が存在しない場合でも、 ~UAは，何らかの他の~UI~affordanceを通して この能を供せる。 ◎ This ability to request that additional information be shown or hidden may simply be the activation behavior of the appropriate summary element, in the case such an element exists. However, if no such element exists, user agents can still provide this ability through some other user interface affordance.

各 `有名~details~group@ は、 ある `details$e 要素 %a を包含するならば， 他の `details$e 要素 %b のうち ~AND↓ を満たすものすべてを包含する： ◎ The details name group that contains a details element a also contains all the other details elements b that fulfill all of the following conditions:

  • %a, %b は同じ `~tree$内にある ◎ Both a and b are in the same tree.
  • %a, %b どちらも ``name$a 属性を有していて，それらの値は等しい かつ空~文字列でない ◎ They both have a name attribute, their name attributes are not the empty string, and the value of a's name attribute equals the value of b's name attribute.

各 `details$e 要素は、 `~details用の~toggle~task追跡子@ を有する — それは、［ ~NULL ／`~toggle~task追跡子$ ］であり， 初期~時は ~NULL とする。 ◎ Every details element has a details toggle task tracker, which is a toggle task tracker or null, initially null.

`details$e 要素 %要素 用に利用される`属性~変更-時の手続き$は、 所与の ( %局所~名, %旧-値, %値, %名前空間 ) に対し： ◎ The following attribute change steps, given element, localName, oldValue, value, and namespace, are used for all details elements:

  1. ~IF［ %名前空間 ~NEQ ~NULL ］ ⇒ ~RET ◎ If namespace is not null, then return.
  2. ~IF［ %局所~名 ~EQ "``name$a" ］ ⇒ `必要なら要素を閉じることにより~detailsの排他性を確保する$( %要素, `自身^i ) ◎ If localName is name, then ensure details exclusivity by closing the given element if needed given element.

  3. ~IF［ %局所~名 ~EQ "``open$a" ］： ◎ If localName is open, then:

    1. ~IF［［ %旧-値 ~EQ ~NULL ］~AND［ %値 ~NEQ ~NULL ］~OR［［ %旧-値 ~NEQ ~NULL ］~AND［ %値 ~EQ ~NULL ］］： ◎ If one of oldValue or value is null and the other is not null, run the following steps,＼

      この段を成す手続きは、 %要素 用の `~details通知~task手続き@ と称される。 ◎ which are known as the details notification task steps, for this details element:

      注記： ``open$a 属性が何回か続けて~toggleされたときは、 結果の~taskは，本質的に~eventが 1 回だけ発火されるよう合体される。 ◎ When the open attribute is toggled several times in succession, the resulting tasks essentially get coalesced so that only one event is fired.

      1. ~IF［ %旧-値 ~EQ ~NULL ］ ⇒ `~details用の~toggle~event~taskを~queueする$( %要素, `closed^l, `open^l ) ◎ If oldValue is null, queue a details toggle event task given the details element, "closed", and "open".
      2. ~ELSE ⇒ `~details用の~toggle~event~taskを~queueする$( %要素, `open^l, `closed^l ) ◎ Otherwise, queue a details toggle event task given the details element, "open", and "closed".
    2. ~IF［ %旧-値 ~EQ ~NULL ］~AND［ %値 ~NEQ ~NULL ］ ⇒ `必要なら要素を閉じることにより~detailsの排他性を確保する$( %要素, `他の要素^i ) ◎ If oldValue is null and value is not null, then ensure details exclusivity by closing other elements if needed given element.

`details$e 用の`~HTML要素~挿入-時の手続き$は、 所与の ( %挿入される~node ) に対し： ◎ The details HTML element insertion steps, given insertedNode, are:

  1. `必要なら要素を閉じることにより~detailsの排他性を確保する$( %挿入される~node, `自身^i ) ◎ Ensure details exclusivity by closing the given element if needed given insertedNode.

注記： （念のため、） これらの属性［ 属性~変更-時の手続き／属性~挿入-時の手続き ］は、 属性や要素が構文解析器を介して挿入されるときにも走る。 ◎ To be clear, these attribute change and insertion steps also run when an attribute or element is inserted via the parser.

`~details用の~toggle~event~taskを~queueする@ ときは、 所与の ( `details$e 要素 %要素, 文字列 %旧-状態, 文字列 %新-状態 ) に対し： ◎ To queue a details toggle event task given a details element element, a string oldState, and a string newState:

  1. %追跡子 ~LET %要素 の`~details用の~toggle~task追跡子$ ◎ ↓

  2. ~IF［ %追跡子 ~NEQ ~NULL ］： ◎ If element's details toggle task tracker is not null, then:

    1. %旧-状態 ~SET %追跡子 の`旧-状態$tTk ◎ Set oldState to element's details toggle task tracker's old state.
    2. %追跡子 の`~task$tTkを それが属する`~task~queue$から除去する ◎ Remove element's details toggle task tracker's task from its task queue.
    3. %要素 の`~details用の~toggle~task追跡子$ ~SET ~NULL ◎ Set element's details toggle task tracker to null.

  3. %~task ~LET `要素~taskを~queueする$( `~DOM操作~task~source$, %要素, 次の手続き ） ◎ Queue an element task given the DOM manipulation task source and element to run＼

    手続きは： ◎ the following steps:

    1. `~eventを発火する$( %要素, `toggle$et, `ToggleEvent$I ) — 次のように初期化して ⇒＃ `oldState$m 属性 ~SET %旧-状態, `newState$m 属性 ~SET %新-状態 ◎ Fire an event named toggle at element, using ToggleEvent, with the oldState attribute initialized to oldState and the newState attribute initialized to newState.
    2. %要素 の`~details用の~toggle~task追跡子$ ~SET ~NULL ◎ Set element's details toggle task tracker to null.
  4. %要素 の`~details用の~toggle~task追跡子$ ~SET 次を伴う構造体 ⇒＃ `~task$tTk ~SET %~task, `旧-状態$tTk ~SET %旧-状態 ◎ Set element's details toggle task tracker to a struct with task set to the just-queued task and old state set to oldState.

`必要なら要素を閉じることにより~detailsの排他性を確保する@ ときは、 所与の ( `details$e 要素 %要素, %対象 ~IN { `自身＠#ensure-details-exclusivity-by-closing-the-given-element-if-needed@i, `他の要素＠#ensure-details-exclusivity-by-closing-other-elements-if-needed@i } ) に対し：

【 この~algoは、 原文では 2 つの~algoにより定義されているが， この訳では %対象 ~flagを通して 1 つに集約する。 】

  1. ~IF［ %対象 ~EQ `自身^i ］ ⇒ ~Assert： %要素 は ``open$a 属性を有する
  2. ~ELIF［ %要素 は ``open$a 属性を有さない ］ ⇒ ~RET
  3. ~IF［ %要素 は ``name$a 属性を有さない ］~OR［ %要素 は ``name$a 属性を有していて，その値 ~EQ 空~文字列 ］ ⇒ ~RET
  4. %閉じる必要がある要素 ~LET ε

  5. %要素 が属する`有名~details~group$を成す ~EACH( %他の要素 ) に対し，`~tree順序$で：

    1. ~IF［ %他の要素 ~EQ %要素 ］ ⇒ ~CONTINUE
    2. ~IF［ %他の要素 は ``open$a 属性を有さない ］ ⇒ ~CONTINUE

    3. ~Assert： %要素 が属する`有名~details~group$を成す~memberのうち %要素, %他の要素 以外のものは ``open$a 属性を有さない。

      【 この表明は、 原文では %対象 ~EQ `他の要素^i の場合に限り与えられているが， %対象 を問わず満たされるはずである。 】

    4. %閉じる必要がある要素 ~LET %対象 に応じて ⇒＃ `他の要素^i ならば %他の要素 ／ `自身^i ならば %要素 ／
    5. ~BREAK
  6. ~IF［ %閉じる必要がある要素 ~EQ ε ］ ⇒ ~RET
  7. %文書 ~LET %要素 の`~node文書$
  8. %旧-~flag ~LET %文書 の`変異~eventを発火するか$doc
  9. %文書 の`変異~eventを発火するか$doc ~SET ~F
  10. %閉じる必要がある要素 から ``open$a `属性を除去する$
  11. %文書 の`変異~eventを発火するか$doc ~SET %旧-~flag
◎ To ensure details exclusivity by closing other elements if needed given a details element element: • Assert: element has an open attribute. • If element does not have a name attribute, or its name attribute is the empty string, then return. • Let document be element's node document. • Let oldFlag be the value of document's fire mutation events flag. • Set document's fire mutation events flag to false. • Let groupMembers be a list of elements, containing all elements in element's details name group except for element, in tree order. • For each element otherElement of groupMembers: •• If the open attribute is set on otherElement, then: ••• Assert: otherElement is the only element in groupMembers that has the open attribute set. ••• Remove the open attribute on otherElement. ••• Break. • Set document's fire mutation events flag to oldFlag. ◎ To ensure details exclusivity by closing the given element if needed given a details element element: • If element does not have an open attribute, then return. • If element does not have a name attribute, or its name attribute is the empty string, then return. • Let document be element's node document. • Let oldFlag be the value of document's fire mutation events flag. • Set document's fire mutation events flag to false. • Let groupMembers be a list of elements, containing all elements in element's details name group except for element, in tree order. • For each element otherElement of groupMembers: •• If the open attribute is set on otherElement, then: ••• Remove the open attribute on element. ••• Break. • Set document's fire mutation events flag to oldFlag.

``name@m ~IDL属性は、 ``name$a 内容~属性を`反映する$モノトスル。

``open@m ~IDL属性は、 ``open$a 内容~属性を`反映する$モノトスル。

◎ The name and open IDL attributes must reflect the respective content attributes of the same name.

`先祖~detailsを露呈する@ ~algoは、 所与の ( %現在の~node ) に対し，次の手続きを走らす： ◎ The ancestor details revealing algorithm is to run the following steps on currentNode:

  1. ~WHILE ［ %現在の~node は`平坦~tree$の中で親~nodeを有する ］: ◎ While currentNode has a parent node within the flat tree:

    1. ~IF［ ある `details$e 要素 %要素 が在って， %現在の~node は %要素 の `2 個目の~slot＠~HTMLrendering#_details-slots$の中に~slotされている ］： ◎ If currentNode is slotted into the second slot of a details element:

      1. %現在の~node ~SET %要素 ◎ Set currentNode to the details element which currentNode is slotted into.
      2. ~IF［ %要素 は ``open$a 属性を有していない ］ ⇒ %要素 の`属性~値を設定する$( `open^l, 空~文字列 ) ◎ If the open attribute is not set on currentNode, then set the open attribute on currentNode to the empty string.
    2. ~ELSE ⇒ %現在の~node ~SET `平坦~tree$の中の %現在の~node の親~node ◎ Otherwise, set currentNode to the parent node of currentNode within the flat tree.

`details$e 要素を利用して，進捗~報告-内の技術的な詳細を隠す例： ◎ The following example shows the details element being used to hide technical details in a progress report.

`details-1^xCode

`details$e 要素を利用して，~controlを既定で隠す例： ◎ The following shows how a details element can be used to hide some controls by default:

`details-2^xCode

これを ~list内で他の `details$e と併用すれば、［ それぞれが~~展開する能を伴う一群の~fieldを，一群の見出しに小さく縮約する ］ことを利用者に許容することもできる。 ◎ One could use this in conjunction with other details in a list to allow the user to collapse a set of fields down to a small set of headings, with the ability to open each one.

これらの例における `summary^e （要約）が要約-（ summarize ）するのは， ~controlが何を変更できるかだけであり、 実際の値まで~~示すのは，理想とは言えない。 ◎ In these examples, the summary really just summarizes what the controls can change, and not the actual values, which is less than ideal.

`details$e 要素の ``name$a 属性を利用して， `details$e 要素たちが成す排他的な~accordionを作成する例 — そこでは、 ある `details$e 要素を開く利用者-動作により，他の開かれた `details$e は閉じられる。 ◎ The following example shows the name attribute of the details element being used to create an exclusive accordion, a set of details elements where a user action to open one details element causes any open details to close.

`details-3^xCode

次の例は、［ ``name$a 属性を利用して作成された `details$e 要素たちが成す排他的な~accordion ］において，ある `details$e 要素に ``open$a 属性が設定されたとき、 何が起こるかを示す。 ◎ The following example shows what happens when the open attribute is set on a details element that is part of a set of elements using the name attribute to create an exclusive accordion.

次の初期~markup： ◎ Given the initial markup:

`details-4^xCode

および次の~script: ◎ and the script: 

document.getElementById("d2").setAttribute("open", "");

が与えられた下で，当の~scriptを実行した後における結果の~treeは、 次の~markupと等価になる： ◎ then the resulting tree after the script executes will be equivalent to the markup:

`details-5^xCode

`d2^l を伴う要素の ``open$a 属性が設定されたので、 `d1^l を伴う要素のそれは除去される。 ◎ because setting the open attribute on d2 removes it from d1.

同じことは、 利用者が `d2^l を伴う要素の内側にある `summary$e 要素を作動化したときにも起こる。 ◎ The same happens when the user activates the summary element inside of d2.

``open$a 属性は、 利用者が~controlとヤリトリするに伴って，自動的に［ 追加-／除去- ］されるので、 その状態に基づいて，~CSS内で要素に異なる~styleをあてがうことに利用できる。 ここでは、 要素が［ ~~展開された／~~畳まれた ］とき，要約の色を~animateする~stylesheetの例を~~示す： ◎ Because the open attribute is added and removed automatically as the user interacts with the control, it can be used in CSS to style the element differently based on its state. Here, a style sheet is used to animate the color of the summary when the element is opened or closed:

`details-6^xCode

4.11.2. `summary^e 要素

`分類$
~none。 ◎ None.
`この要素を利用できる文脈$
`details$e 要素の`最初の子$として。 ◎ As the first child of a details element.
`内容~model$
`句ng内容$。 加えて，`見出し内容$が~~混在していてもよい。 ◎ Phrasing content, optionally intermixed with heading content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
`~accessibilityの考慮点$
`summary$AA ◎ For authors. For implementers.
`~DOM~interface$
`HTMLElement$I を利用する。 ◎ Uses HTMLElement.

`summary$e 要素は、 その親が `details$e 要素であれば，親の他の内容に対する［ 要約 ／ ~caption ／~legend ］を`表現-$する。 ◎ The summary element represents a summary, caption, or legend for the rest of the contents of the summary element's parent details element, if any.

次を満たす要素は `親~details用の~summary@ であるとされる ⇒ ［ `summary$e 要素である ］~AND［ 親は `details$e 要素である ］~AND［ 先行する同胞に別の `summary$e 要素は無い ］ ◎ A summary element is a summary for its parent details if the following algorithm returns true: • If this summary element has no parent, then return false. • Let parent be this summary element's parent. • If parent is not a details element, then return false. • If parent's first summary element child is not this summary element, then return false. • Return true.

`summary$e 要素 %要素 の`作動化の挙動$は、 次の手続きを走らす： ◎ The activation behavior of summary elements is to run the following steps:

  1. ~IF［ %要素 は`親~details用の~summary$でない ］ ⇒ ~RET ◎ If this summary element is not the summary for its parent details, then return.
  2. %親 ~LET %要素 の親 ◎ Let parent be this summary element's parent.
  3. ~IF［ %親 は ``open$a 属性を有する ］ ⇒ %親 から ``open$a `属性を除去する$† ◎ If the open attribute is present on parent, then remove it.＼
  4. ~ELSE ⇒ %親 の`属性~値を設定する$( `open^l, 空~文字列 )† ◎ Otherwise, set parent's open attribute to the empty string.

注記†： これは、 `~details通知~task手続き$を走らすことになる。 ◎ This will then run the details notification task steps.

4.11.3. ~command

4.11.3.1. ~facet

`~command@ とは、［ ~menu~item ／ ~button ／ ~link ］の背後にある抽象-化である。 `~command$が定義されたなら、 ~UIの他の各部は同じ`~command$を指せるようになり，［ `不能化されるか$cFなどの各種~facetからなる単独の特能 ］に複数箇所から~accessすることを許容する。 ◎ A command is the abstraction behind menu items, buttons, and links. Once a command is defined, other parts of the interface can refer to the same command, allowing many access points to a single feature to share facets such as the Disabled State.

各`~command$ %~command は、 次に挙げる `~facet@ （ `facet^en ）を持つように定義される： ◎ Commands are defined to have the following facets:

`~label@cF ◎ Label
%~command の，利用者から見える名前。 ◎ The name of the command as seen by the user.
`~access~UIkey@cF ◎ Access Key
~UAにより選定される［ %~command を誘発する~UIkeyの組合n ］または， ε （無し）。 ◎ A key combination selected by the user agent that triggers the command. A command might not have an Access Key.
`隠されるか@cF ◎ Hidden State
真偽値 — ~T ならば、 %~command は隠される （基本的に，~menu内に示されるべきかどうかを表す）。 ◎ Whether the command is hidden or not (basically, whether it should be shown in menus).
`不能化されるか@cF ◎ Disabled State
真偽値 — ~T ならば、 %~command は関連しないので誘発できない。 ◎ Whether the command is relevant and can be triggered or not.
`動作@cF ◎ Action
%~command を誘発したとき実際に生じる効果。 これは、 次に挙げるものなどになり得る ⇒＃ ~scriptによる~event~handler ／ `~navigate$先の`~URL$ ／ ~form提出 ◎ The actual effect that triggering the command will have. This could be a scripted event handler, a URL to which to navigate, or a form submission.

~UAは、 ~AND↓ が満たされるならば， 要素が定義する`~command$を公開してもヨイ ： ◎ User agents may expose the commands that match the following criteria:

  • `~command$の`隠されるか$cF ~EQ ~F （要素は可視） ◎ The Hidden State facet is false (visible)
  • 次を満たす`文書$がある ⇒ ［ 要素は`文書~内$にある ］~AND［ 文書が`属する閲覧~文脈$ ~NEQ ~NULL ］ ◎ The element is in a document with a non-null browsing context.
  • 要素, および その どの先祖にも， `hidden$a 属性は指定されていない ◎ Neither the element nor any of its ancestors has a hidden attribute specified.

~UAには、 これを行うことが奨励される — とりわけ`~access~UIkey$cFを有する`~command$用に， それらの~UIkeyを利用者に告知する仕方として。 ◎ User agents are encouraged to do this especially for commands that have Access Keys, as a way to advertise those keys to the user.

例えば、 そのような`~command$を［ ~UAの~menu~bar内に~listする ］こともできる。 ◎ For example, such commands could be listed in the user agent's menu bar.

4.11.3.2. `a^e 要素を利用して~commandを定義する

`a$e 要素は、 `href$a 属性を有するならば，`~commandを定義する$。 この`~command$の各種`~facet$は、 次で与えられる： ◎ An a element with an href attribute defines a command.

`~label$cF
要素の`子孫~text内容$になる。 ◎ The Label of the command is the element's descendant text content.
`~access~UIkey$cF
要素に`アテガわれた~access~UIkey$があれば それになる。 ◎ The Access Key of the command is the element's assigned access key, if any.
`隠されるか$cF
要素が `hidden$a 属性を有するならば ~T ／ ~ELSE_ ~F になる。 ◎ The Hidden State of the command is true (hidden) if the element has a hidden attribute, and false otherwise.
`不能化されるか$cF
要素, または その いずれかの先祖が`不活$ならば ~T ／ ~ELSE_ ~F になる。 ◎ The Disabled State facet of the command is true if the element or one of its ancestors is inert, and false otherwise.
`動作$cF
要素に向けて`~click~eventを発火する$。 ◎ The Action of the command is to fire a click event at the element.
4.11.3.3. `button^e 要素を利用して~commandを定義する

`button$e 要素は、 常に`~commandを定義する$。 この`~command$の各種`~facet$は、 次で与えられる： ◎ A button element always defines a command.

`~label$cF
`~access~UIkey$cF
`隠されるか$cF
`動作$cF
これらは、 `a$e 要素に`対するとき＠#using-the-a-element-to-define-a-command$と同様に決定される（前~節を見よ）。 ◎ The Label, Access Key, Hidden State, and Action facets of the command are determined as for a elements (see the previous section).
`不能化されるか$cF
要素が ~OR↓ を満たすならば ~T ／ ~ELSE_ ~F になる ⇒＃ `不活$である／ いずれかの先祖は`不活$である／ `不能化されて$feいる ◎ The Disabled State of the command is true if the element or one of its ancestors is inert, or if the element's disabled state is set, and false otherwise.
4.11.3.4. ``input^e 要素を利用して~commandを定義する

`input$e 要素 %input は、［ ``type$a 属性の状態 ~IN { ``Submit$st, ``Reset$st, ``Image$st, ``Button$st, ``Radio$st, ``Checkbox$st } ］ならば，`~commandを定義する$。 この`~command$の各種`~facet$は、 次で与えられる： ◎ An input element whose type attribute is in one of the Submit Button, Reset Button, Image Button, Button, Radio Button, or Checkbox states defines a command.

`~label$cF

次に従って決定される： ◎ The Label of the command is determined as follows:

  1. %value ~LET ［ %input は ``value$a 属性を有するならば その値 ／ ~ELSE_ ε ］ ◎ ↓
  2. ~IF［ %input の ``type$a 属性の状態 ~IN { ``Submit$st, ``Reset$st, ``Image$st, ``Button$st } ］ ⇒ ~RET ［ %value ~NEQ ε ならば %value ／ ~ELSE_ ~UAが~buttonに既定の~labelをあてがうときに利用する値 — 値は~UA, および~localeに依存する ］ ◎ If the type attribute is in one of the Submit Button, Reset Button, Image Button, or Button states, then the Label is the string given by the value attribute, if any, and a UA-dependent, locale-dependent value that the UA uses to label the button itself if the attribute is absent.
  3. ~IF［ %input を`~label先~control$とする `label$e 要素は在る ］ ⇒ ~RET 該当するもののうち，`~tree順序$で最初のものの`子孫~text内容$ （~JSで言えば， %input`.labels[0].textContent^c ） ◎ Otherwise, if the element is a labeled control, then the Label is the descendant text content of the first label element in tree order whose labeled control is the element in question. (In JavaScript terms, this is given by element.labels[0].textContent.)
  4. ~RET ［ %value ~NEQ ε ならば %value ／ ~ELSE_ 空~文字列 ］ ◎ Otherwise, if the value attribute is present, then the Label is the value of that attribute. ◎ Otherwise, the Label is the empty string.
注記： ``Image$st 状態にある `input$e 要素~上では， ``value$a 属性は適合tでないが、 要素に ``alt$a 属性が欠落な場合には，依然として`~label$cFの決定に寄与する。 ◎ Even though the value attribute on input elements in the Image Button state is non-conformant, the attribute can still contribute to the Label determination, if it is present and the Image Button's alt attribute is missing.
`~access~UIkey$cF
要素に`アテガわれた~access~UIkey$があれば それになる。 ◎ The Access Key of the command is the element's assigned access key, if any.
`隠されるか$cF
要素は `hidden$a 属性を有するならば ~T ／ ~ELSE_ ~F になる。 ◎ The Hidden State of the command is true (hidden) if the element has a hidden attribute, and false otherwise.
`不能化されるか$cF
要素が ~OR↓ を満たすならば ~T ／ ~ELSE_ ~F になる ⇒＃ `不活$である／ いずれかの先祖は`不活$である／ `不能化されて$feいる ◎ The Disabled State of the command is true if the element or one of its ancestors is inert, or if the element's disabled state is set, and false otherwise.
`動作$cF
要素に向けて`~click~eventを発火する$。 ◎ The Action of the command is to fire a click event at the element.
4.11.3.5. ``option^e 要素を利用して~commandを定義する

`option$e 要素は、 ~AND↓ を満たすならば，`~commandを定義する$：

  • 先祖に `select$e 要素がある
  • ［ ``value$a 属性を有さない ］~OR［ ``value$a 属性を有していて その値 ~NEQ 空~文字列 ］

この`~command$の各種`~facet$は、 次で与えられる：

◎ An option element with an ancestor select element and either no value attribute or a value attribute that is not the empty string defines a command.
`~label$cF
要素は ``label$a 属性を有するならば その値になる。 ~ELSE_ 次の結果になる ⇒ `~ASCII空白を剥いで縮約する$( 要素の`子孫~text内容$ ) ◎ The Label of the command is the value of the option element's label attribute, if there is one, or else the option element's descendant text content, with ASCII whitespace stripped and collapsed.
`~access~UIkey$cF
要素に`アテガわれた~access~UIkey$があれば それになる。 ◎ The Access Key of the command is the element's assigned access key, if any.
`隠されるか$cF
要素は `hidden$a 属性を有するならば ~T ／ ~ELSE_ ~F になる。 ◎ The Hidden State of the command is true (hidden) if the element has a hidden attribute, and false otherwise.
`不能化されるか$cF

要素が ~OR↓ を満たすならば ~T ／ ~ELSE_ ~F になる ⇒＃ `不能化されて$optいる／ 最も近い先祖 `select$e 要素は`不能化されて$feいる／ `不活$である／ いずれかの先祖は`不活$である ◎ The Disabled State of the command is true if the element is disabled, or if its nearest ancestor select element is disabled, or if it or one of its ancestors is inert, and false otherwise.

`動作$cF
要素に最も近い先祖 `select$e 要素は、 `multiple$a 属性を有するならば，要素を`~toggleする$。 他の場合、 要素を`選び取る$。 ◎ If the option's nearest ancestor select element has a multiple attribute, the Action of the command is to toggle the option element. Otherwise, the Action is to pick the option element.
4.11.3.6. `legend^e 要素の `accesskey^a 属性を利用して~commandを定義する

`legend$e 要素は、 ~AND↓ を満たすならば，`~commandを定義する$： ◎ A legend element defines a command if all of the following are true:

  • `アテガわれた~access~UIkey$はある ◎ It has an assigned access key.
  • その親 %F は `fieldset$e 要素である ◎ It is a child of a fieldset element.

  • ~AND↓ を満たす要素は在る：

    • %F の子孫である
    • `~commandを定義する$
    • `label$e 要素でない
    • `legend$e 要素でない
    ◎ Its parent has a descendant that defines a command that is neither a label element nor a legend element.＼

    該当する要素を指して、 `legend$e 要素の `~access~UIkey委任-先@ という。 ◎ This element, if it exists, is the legend element's accesskey delegatee.

    【 該当する要素が複数あるときは、 `~tree順序$で最初のもの？ （以下の記述は、 一つしかないことを前提に記されている。 `この節が更新される＠https://github.com/whatwg/html/commit/aa374be03beebf25ed33022846c2d03d3ea03484$前も， “~tree順序で最初” と記されていた。） 】

この`~command$の各種`~facet$は、 次で与えられる： ◎ ↓

`~label$cF
要素の`子孫~text内容$になる。 ◎ The Label of the command is the element's descendant text content.
`~access~UIkey$cF
要素に`アテガわれた~access~UIkey$になる。 ◎ The Access Key of the command is the element's assigned access key.
`隠されるか$cF
`不能化されるか$cF
`動作$cF
それぞれ、 `legend$e 要素の`~access~UIkey委任-先$の対応する~facetと同じになる。 ◎ The Hidden State, Disabled State, and Action facets of the command are the same as the respective facets of the legend element's accesskey delegatee.

この例では、 `legend$e 要素に `accesskey$a が指定されている — 要素が作動化されたときは、 その内側にある `input$e 要素に委任することになる。 ◎ In this example, the legend element specifies an accesskey, which, when activated, will delegate to the input element inside the legend element.

`legend-1^xCode
4.11.3.7. 他の要素~上で `accesskey^a 属性を利用して~commandを定義する

要素は、 `アテガわれた~access~UIkey$があるならば，`~commandを定義する$ — ただし ⇒ そのような要素に対し，これまでのいずれかの節にて［ 要素は`~commandを定義する$ものと定義される ］ならば、 その節の規則が要素に適用される。 この節が適用されるのは、 他の場合に限られる。 ◎ An element that has an assigned access key defines a command. ◎ If one of the earlier sections that define elements that define commands define that this element defines a command, then that section applies to this element, and this section does not. Otherwise, this section applies to that element.

この`~command$の各種`~facet$は、 次で与えられる：

`~label$cF
要素を`~label先~control$とする `label$e 要素はあるならば、 該当するもののうち，`~tree順序$で最初のものの`子孫~text内容$になる （~JSで言えば，要素`.labels[0].textContent^c ）。 ◎ The Label of the command depends on the element. If the element is a labeled control, the descendant text content of the first label element in tree order whose labeled control is the element in question is the Label (in JavaScript terms, this is given by element.labels[0].textContent).＼
他の場合、 要素の`子孫~text内容$になる。 ◎ Otherwise, the Label is the element's descendant text content.
`~access~UIkey$cF
要素に`アテガわれた~access~UIkey$になる。 ◎ The Access Key of the command is the element's assigned access key.
`隠されるか$cF
要素は `hidden$a 属性を有するならば ~T／ ~ELSE_ ~F になる。 ◎ The Hidden State of the command is true (hidden) if the element has a hidden attribute, and false otherwise.
`不能化されるか$cF
要素または，そのいずれかの先祖が`不活$であるならば ~T ／ ~ELSE_ ~F になる。 ◎ The Disabled State of the command is true if the element or one of its ancestors is inert, and false otherwise.
`動作$cF

次の手続きを走らす： ◎ The Action of the command is to run the following steps:

  1. `~objを~focusする$( 要素 ) ◎ Run the focusing steps for the element.
  2. 要素に向けて`~click~eventを発火する$ ◎ Fire a click event at the element.

4.11.4. ``dialog^e 要素

`分類$
`~flow内容$ ◎ Flow content.
`この要素を利用できる文脈$
`~flow内容$が期待される所。 ◎ Where flow content is expected.
`内容~model$
`~flow内容$ ◎ Flow content.
`text/html における~tag省略$
両~tagとも省略不可。 ◎ Neither tag is omissible.
`内容~属性$
`大域~属性$ ◎ Global attributes
``open$a — ~dialog~boxを示しているかどうか ◎ open — Whether the dialog box is showing
`~accessibilityの考慮点$
`dialog$AA ◎ For authors. For implementers.
`~DOM~interface$
[Exposed=Window]
interface `HTMLDialogElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute boolean ``open$m;
  attribute DOMString ``returnValue$m;
  [`CEReactions$] undefined ``show$m();
  [`CEReactions$] undefined ``showModal$m();
  [`CEReactions$] undefined ``close$m(optional DOMString %returnValue);
};

`dialog$e 要素は、［ 利用者が［ ある~taskを遂行する／ 情報を集める ］ためにヤリトリする小さな~UIwindow（ “~dialog~box” ） ］の形で， ~appを成す一過性な部分を表現する。 利用者が それを済ませたなら、 当の~dialogは，~appにより自動的に閉じられるか利用者により手動で閉じられる。 ◎ The dialog element represents a transitory part of an application, in the form of a small window ("dialog box"), which the user interacts with to perform a task or gather information. Once the user is done, the dialog can be automatically closed by the application, or manually closed by the user.

とりわけ，~modalな~dialog用には （それは、 どの~appにも馴染みな~patternである）、 作者は［ 自身の~web~appにおける~dialogは、 非~web~appの利用者にも馴染みな仕方で挙動する ］ことを確保するよう，作業するベキである。 ◎ Especially for modal dialogs, which are a familiar pattern across all types of applications, authors should work to ensure that dialogs in their web applications behave in a way that is familiar to users of non-web applications.

注記： `dialog$e 要素を利用して，別の型の~controlを表現しようと試みることは、 すべての~HTML要素と同じく，適合でない。 例えば，［ 文脈~menu／ ~tooltip／ ~popup~listbox ］は、 ~dialog~boxではないので， これらの~patternを `dialog$e 要素を濫用して実装することは不正になる。 ◎ As with all HTML elements, it is not conforming to use the dialog element when attempting to represent another type of control. For example, context menus, tooltips, and popup listboxes are not dialog boxes, so abusing the dialog element to implement these patterns is incorrect.

~dialogにて利用者が直面する挙動を成す重要な部分は、 初期~focusをどこに配置するかである。 `~dialogを~focusする$手続きは，［ ~dialogが示されるとき，初期~focus用に良い候補を選び取ろうと試みる ］が、 作者が［ 特定の~dialog用に， 利用者の期待に合致する正しい~focus先は どれなのか ］を注意深く考えているときには，その用を成さないかもしれない。 そのようなわけで、 作者は，当の~dialogの子孫~要素のうち［ 利用者が当の~dialogを開いた直後にヤリトリすると期待されるもの ］に `autofocus$a 属性を利用するベキである — そのような要素が無い場合、 `dialog$e 要素~自身に `autofocus$a 属性を利用するベキである。 ◎ An important part of user-facing dialog behavior is the placement of initial focus. The dialog focusing steps attempt to pick a good candidate for initial focus when a dialog is shown, but might not be a substitute for authors carefully thinking through the correct choice to match user expectations for a specific dialog. As such, authors should use the autofocus attribute on the descendant element of the dialog that the user is expected to immediately interact with after the dialog opens. If there is no such element, then authors should use the autofocus attribute on the dialog element itself.

次の例では、［ ある在庫管理~web~appにおいて，ある製品の詳細を編集する ］ためとして，~dialogが利用される： ◎ In the following example, a dialog is used for editing the details of a product in an inventory management web application.

`dialog-1^xCode

`autofocus$a 属性が無かった場合、 製品番号~欄が［ ~dialogを~focusする手続きにより，~focusされる ］ことになろう。 それは，適理な挙動であるが、 作者は，［ 製品番号が読専な欄であり，利用者-入力を期待しないので、 ~focus先として もっと関連な欄は，製品名~欄であった ］ものと決定した。 なので、 作者は，既定を上書きするよう `autofocus^a を利用している。 ◎ If the autofocus attribute was not present, the Product Number field would have been focused by the dialog focusing steps. Although that is reasonable behavior, the author determined that the more relevant field to focus was the Product Name field, as the Product Number field is readonly and expects no user input. So, the author used autofocus to override the default.

作者が，既定では製品番号~欄を~focusしたいと求める場合でも、 `input$e 要素に `autofocus^a を利用して， そのことを明示的に指定するのが最善になる。 そうすれば、 その意図は，その~codeの読者にとって明白になり、 未来において更新に直面したときにも，~codeは堅牢であり続けることが確保される （例えば、 別の開発者が，~node~tree内で製品番号~欄の前に “閉じる” ~buttonを追加した場合でも）。 ◎ Even if the author wants to focus the Product Number field by default, they are best off explicitly specifying that by using autofocus on that input element. This makes the intent obvious to future readers of the code, and ensures the code stays robust in the face of future updates. (For example, if another developer added a close button, and positioned it in the node tree before the Product Number field).

利用者が直面する挙動を成す別の重要な側面は、 ~dialogは~scroll可能になる（~overflowする）か否かである。 一部の事例では， ~overflowは避けれないが （例：利用者が~textの~zoom率を高く設定していたとき）、 一般には， 利用者は~dialogが~scroll可能になるとは期待しない。 ~dialog要素に巨大な~text~nodeを直に追加することは、 特に不良である — そうすると，~dialog要素~自身を~overflowさせる見込みが高まるので、 作者は，それを避けることが最善になる。 ◎ Another important aspect of user behavior is whether dialogs are scrollable or not. In some cases, overflow (and thus scrollability) cannot be avoided, e.g., when it is caused by the user's high text zoom settings. But in general, scrollable dialogs are not expected by users. Adding large text nodes directly to dialog elements is particularly bad as this is likely to cause the dialog element itself to overflow. Authors are best off avoiding them.

次の~service約款~dialogは、 上の示唆を尊重する： ◎ The following terms of service dialog respects the above suggestions.

`dialog-2^xCode

既定では，［ `~dialogを~focusする$ことにより， ~scroll可能な `div$e 要素が選び取られる ］ことになるが、 `div$e には — 先の例と類似に，より明示的かつ未来の変更に対し堅牢になるよう — `autofocus$a が付与されている。 ◎ Note how the dialog focusing steps would have picked the scrollable div element by default, but similarly to the previous example, we have placed autofocus on the div so as to be more explicit and robust against future changes.

対照的に、 ~service約款を表出している `p$e 要素が， そのような `div$e 要素で包装されていなかった場合、 当の `dialog$e 自身が~scroll可能になり，上の助言に違反する。 さらには， `autofocus$a 属性が どこにも無い場合、 そのような~markup~patternは，上の助言に違反する — その結果、［ `~dialogを~focusする$手続きにおける既定の挙動により， ~focusは “~~同意する” `button$e へ移る ］ことになり，利用者~体験は不良になる。 ◎ In contrast, if the p elements expressing the terms of service did not have such a wrapper div element, then the dialog itself would become scrollable, violating the above advice. Furthermore, in the absence of any autofocus attribute, such a markup pattern would have violated the above advice and tripped up the dialog focusing steps's default behavior, and caused focus to jump to the Agree button, which is a bad user experience.

`dialog$e 要素の ``open@a 属性は、 `真偽-属性$である — 指定された場合、［ 当の要素は作動中であり、 利用者は，それとヤリトリできる ］ことを指示する。 ◎ The open attribute is a boolean attribute. When specified, it indicates that the dialog element is active and that the user can interact with it.

``open$a 属性を有さない `dialog$e 要素は、 利用者に示されるベキでない。 この要件は、 ~style層を通して間接的に実装されてもヨイ。 例えば，`示唆される既定の具現化を~support$する~UAは、 この要件を `§ 具現化＠~HTMLrendering#rendering$に述べられる~CSS規則を利用して実装する。 ◎ A dialog element without an open attribute specified should not be shown to the user. This requirement may be implemented indirectly through the style layer. For example, user agents that support the suggested default rendering implement this requirement using the CSS rules described in the Rendering section.

注記： ~dialogから ``open$a 属性を除去した場合，通例的にそれを隠すことになるが、 そうすると，いくつか奇異な結果も伴われる： ◎ Removing the open attribute will usually hide the dialog. However, doing so has a number of strange additional consequences:

  • `close$et ~eventは発火されない。 ◎ The close event will not be fired.
  • ［ ``close()$m ~method／`閉-要請$ ］は，それ以降~dialogを閉じれなくなる。 ◎ The close() method, and any close requests, will no longer be able to close the dialog.
  • ~dialogが ``showModal()$m ~methodを利用して示されていた場合、 `文書$を`阻んでいる~modal~dialog$になる。 ◎ If the dialog was shown using its showModal() method, the Document will still be blocked.

これらの理由から、 一般に， ``open$a 属性は 決して手動で除去しないほうが良い。 代わりに、 ~dialogを［ ``close()$m ~methodを利用して閉じるか， `hidden$a 属性を利用して隠す ］こと。 ◎ For these reasons, it is generally better to never remove the open attribute manually. Instead, use the close() method to close the dialog, or the hidden attribute to hide it.

`dialog$e 要素には、 `tabindex$a 属性を指定してはナラナイ。 ◎ The tabindex attribute must not be specified on dialog elements.

%dialog.``show()$m
`dialog$e 要素を表示する。 ◎ Displays the dialog element.
%dialog.``showModal()$m
`dialog$e 要素を表示して，それを最~上端な~modal~dialogにする。 ◎ Displays the dialog element and makes it the top-most modal dialog.
この~methodは、 `autofocus$a 属性を尊守する。 ◎ This method honors the autofocus attribute.
%dialog.``close([ result ])$m
`dialog$e 要素を閉じる。 ◎ Closes the dialog element.
%result 引数は、 `dialog$e の`結果値$dGを与える。 ◎ The argument, if provided, provides a return value.
%dialog.``returnValue$m [ = %result ]
`dialog$e の`結果値$dGを返す。 ◎ Returns the dialog's return value.
設定して，`結果値$dGを更新できる。 ◎ Can be set, to update the return value.

``show()@m ~method手続きは： ◎ The show() method steps are:

  1. ~IF［ コレは ``open$a 属性を有する ］：

    1. ~IF［ コレの`~modalか$dG ~EQ ~F ］ ⇒ ~RET
    2. ~THROW `InvalidStateError$E
    ◎ If this has an open attribute and the is modal flag of this is false, then return. ◎ If this has an open attribute, then throw an "InvalidStateError" DOMException.
  2. コレに［ 値に空~文字列を伴う ``open$a 属性 ］を追加する 【コレの`属性~値を設定する$( `open^l, 空~文字列 ) ？】 ◎ Add an open attribute to this, whose value is the empty string.
  3. コレの`前回に~focusされた要素$ ~SET `~focusされて$いる要素 ◎ Set this's previously focused element to the focused element.
  4. %ある所 ~LET `最上層な~popover先祖を見出す$( コレ, ~NULL, ~F ) ◎ Let hideUntil be the result of running topmost popover ancestor given this, null, and false.
  5. ~IF［ %ある所 ~EQ ~NULL ］ ⇒ %ある所 ~SET コレの`~node文書$ ◎ If hideUntil is null, then set hideUntil to this's node document.
  6. `ある所までの~popoverをすべて隠す$( %ある所, ~F, ~T ) ◎ Run hide all popovers until given hideUntil, false, and true.
  7. `~dialogを~focusする$( コレ ) ◎ Run the dialog focusing steps given this.

``showModal()@m ~method手続きは： ◎ The showModal() method steps are:

  1. ~IF［ コレは ``open$a 属性を有する ］：

    1. ~IF［ コレの`~modalか$dG ~EQ ~T ］ ⇒ ~RET
    2. ~THROW `InvalidStateError$E
    ◎ If this has an open attribute and the is modal flag of this is true, then return. ◎ If this has an open attribute, then throw an "InvalidStateError" DOMException.
  2. ~IF［ コレは`接続されて$いない ］ ⇒ ~THROW `InvalidStateError$E ◎ If this is not connected, then throw an "InvalidStateError" DOMException.
  3. ~IF［ コレの`~popover可視性~状態$ ~EQ `示している$i ］ ⇒ ~THROW `InvalidStateError$E ◎ If this is in the popover showing state, then throw an "InvalidStateError" DOMException.
  4. コレに［ 値に空~文字列を伴う ``open$a 属性 ］を追加する 【コレの`属性~値を設定する$( `open^l, 空~文字列 ) ？】 ◎ Add an open attribute to this, whose value is the empty string.
  5. コレの`~modalか$dG ~SET ~T ◎ Set the is modal flag of this to true.
  6. %文書 ~LET コレの`~node文書$ ◎ ↓

  7. コレを %文書 を`阻んでいる~modal~dialog$にする ◎ Let this's node document be blocked by the modal dialog this.

    注記： これは、 %文書 が`指名する被focus区画$docを`不活$にする （現在の被focus区画がコレの`~shadowも含めた子孫$でない限り）。 そのような事例では、 %文書 が`指名する被focus区画$docは， すぐに`表示域$に`設定し直される＠~WAPI#focus-fixup-rule$ことになる — が、 数~段~先にて，~focus先として もっと良い候補を見出そうと試みることになる。 ◎ This will cause the focused area of the document to become inert (unless that currently focused area is a shadow-including descendant of subject). In such cases, the focused area of the document will soon be reset to the viewport. In a couple steps we will attempt to find a better candidate to focus.

  8. ~IF［ コレ ~NIN %文書 の`上端~層$ ］ ⇒ `上端~層に要素を追加する$( コレ ) ◎ If this's node document's top layer does not already contain this, then add an element to the top layer given this.

  9. コレの`閉-注視器$dG ~SET `閉-注視器を確立する$( コレに`関連な大域~obj$ ) — 次も与える下で： ◎ Set this's close watcher to the result of establishing a close watcher given this's relevant global object, with:

    • `取消-動作^i は ⇒ `~eventを発火する$( コレ, `cancel$et ) — 次のように初期化して `cancelable$m 属性 ~SET ~T ◎ cancelAction being to return the result of firing an event named cancel at this, with the cancelable attribute initialized to true.
    • `閉-動作^i は ⇒ `~dialogを閉じる$( コレ, ~NULL ) ◎ closeAction being to close the dialog given this and null.
  10. コレの`前回に~focusされた要素$ ~SET `~focusされて$いる要素 ◎ Set this's previously focused element to the focused element.
  11. %ある所 ~LET `最上層な~popover先祖を見出す$( コレ, ~NULL, ~F ) ◎ Let hideUntil be the result of running topmost popover ancestor given this, null, and false.
  12. ~IF［ %ある所 ~EQ ~NULL ］ ⇒ %ある所 ~SET コレの`~node文書$ ◎ If hideUntil is null, then set hideUntil to this's node document.
  13. `ある所までの~popoverをすべて隠す$( %ある所, ~F, ~T ) ◎ Run hide all popovers until given hideUntil, false, and true.
  14. `~dialogを~focusする$( コレ ) ◎ Run the dialog focusing steps given this.

`~dialogを~focusする@ ときは、 所与の ( `dialog$e 要素 %dialog ) に対し，次を走らす： ◎ The dialog focusing steps, given a dialog element subject, are as follows:

  1. %~control ~LET ~NULL ◎ Let control be null.
  2. ~IF［ %dialog は `autofocus$a 属性を有さない ］ ⇒ %~control ~SET `~focus委任-先$( %dialog ) ◎ If subject has the autofocus attribute, then set control to subject. ◎ If control is null, then set control to the focus delegate of subject.
  3. ~IF［ %~control ~EQ ~NULL ］ ⇒ %~control ~SET %dialog ◎ If control is null, then set control to subject.

  4. `~objを~focusする$( %~control ) ◎ Run the focusing steps for control.

    注記： %~control は`~focus可能$でない場合、 これは何もしない。 そうなるのは、［ %dialog に~focus委任-先は無かった ］かつ［ ~UAは［ `dialog$e 要素は、 一般に，~focus可能でない ］ものと裁定していた ］ときに限られる。 その事例では、 当の文書が`指名する被focus区画$docに`先の改変＠#note-dialog-plus-focus-fixup$を適用することになる。 ◎ If control is not focusable, this will do nothing. This would only happen if subject had no focus delegate, and the user agent decided that dialog elements were not generally focusable. In that case, any earlier modifications to the focused area of the document will apply.

  5. %~top文書 ~LET %~control の`~node~navigable$の`~top-level辿可能$navにて`作動中な文書$nav ◎ Let topDocument be control's node navigable's top-level traversable's active document.
  6. ~IF［ ( %~control の`~node文書$の`生成元$doc, %~top文書 の`生成元$doc ) は`同一-生成元$でない ］ ⇒ ~RET ◎ If control's node document's origin is not the same as the origin of topDocument, then return.
  7. %~top文書 の`自動focus候補~群$を`空にする$ ◎ Empty topDocument's autofocus candidates.
  8. %~top文書 の`自動focusは処理-済みか$ ~SET ~T ◎ Set topDocument's autofocus processed flag to true.

`dialog$e 要素~用の`~HTML要素~除去-時の手続き$は、 所与の ( %除去される~node, %旧-親 ) に対し： ◎ The dialog HTML element removing steps, given removedNode and oldParent, are:

  1. ~IF［ %除去される~node の`閉-注視器$dG ~NEQ ~NULL ］： ◎ If removedNode's close watcher is not null, then:

    1. `閉-注視器を破壊する$( %除去される~node の`閉-注視器$dG ) ◎ Destroy removedNode's close watcher.
    2. %除去される~node の`閉-注視器$dG ~SET ~NULL ◎ Set removedNode's close watcher to null.
  2. ~IF［ %除去される~node ~IN %除去される~node の`~node文書$の`上端~層$ ］ ⇒ `上端~層から要素を即時に除去する$( %除去される~node ) ◎ If removedNode's node document's top layer contains removedNode, then remove an element from the top layer immediately given removedNode.
``close(returnValue)@m ~method手続きは ⇒ `~dialogを閉じる$( コレ, %returnValue ) ◎ The close(returnValue) method steps are: • If returnValue is not given, then set it to null. • Close the dialog this with returnValue.

`~dialogを閉じる@ ときは、 所与の ( `dialog$e 要素 %dialog, ［ ~NULL ／文字列 ］ %結果 ) に対し，次の手続きを走らす： ◎ When a dialog element subject is to be closed, with null or a string result, run these steps:

  1. ~IF［ %dialog は ``open$a 属性を有さない ］ ⇒ ~RET ◎ If subject does not have an open attribute, then return.
  2. %dialog から ``open$a `属性を除去する$ ◎ Remove subject's open attribute.
  3. ~IF［ %dialog の`~modalか$dG ~EQ ~T ］ ⇒ `上端~層から要素を除去するよう要請する$( %dialog ) ◎ If the is modal flag of subject is true, then request an element to be removed from the top layer given subject.
  4. %~modalであったか ~LET %dialog の`~modalか$dG ◎ Let wasModal be the value of subject's is modal flag.
  5. %dialog の`~modalか$dG ~SET ~F ◎ Set the is modal flag of subject to false.
  6. ~IF［ %結果 ~NEQ ~NULL ］ ⇒ %dialog の `結果値$dG ~SET %結果 ◎ If result is not null, then set the returnValue attribute to result.

  7. ~IF［ %dialog の`前回に~focusされた要素$ ~NEQ ~NULL ］： ◎ If subject's previously focused element is not null, then:

    1. %要素 ~LET %dialog の`前回に~focusされた要素$ ◎ Let element be subject's previously focused element.
    2. %dialog の`前回に~focusされた要素$ ~SET ~NULL ◎ Set subject's previously focused element to null.

    3. ~IF［ %dialog の`~node文書$が`指名する被focus区画$docの`~DOM~anchor$は， %要素 の`~shadowも含めた広義-子孫$である ］~OR［ %~modalであったか ~EQ ~T ］ ⇒ `~objを~focusする$( %要素 ) ◎ If subject's node document's focused area of the document's DOM anchor is a shadow-including inclusive descendant of element, or wasModal is true, then run the focusing steps for element;＼

      この段を行うときは、 表示域は~scrollされるベキでない。 ◎ the viewport should not be scrolled by doing this step.

  8. `要素~taskを~queueする$( `利用者~対話~task~source$, %dialog, 次の手続き )

    手続きは ⇒ `~eventを発火する$( %dialog, `close$et )
    ◎ Queue an element task on the user interaction task source given the subject element to fire an event named close at subject.

  9. ~IF［ %dialog の`閉-注視器$dG ~NEQ ~NULL ］： ◎ If subject's close watcher is not null, then:

    1. `閉-注視器を破壊する$( %dialog の`閉-注視器$dG ) ◎ Destroy subject's close watcher.
    2. %dialog の`閉-注視器$dG ~SET ~NULL ◎ Set subject's close watcher to null.
``returnValue@m 取得子~手続きは ⇒ ~RET コレの`結果値$dG ◎ The returnValue IDL attribute, on getting, must return the last value to which it was set.＼
``returnValue$m 設定子~手続きは ⇒ コレの`結果値$dG ~SET 所与の値 ◎ On setting, it must be set to the new value. When the element is created, it must be set to the empty string.

注記： `dialog$e 要素~用の動詞には、［ 示す（ `show^en ）, 閉じる（ `close^en ） ］が利用される — より共通して反意語と考えられている［ 示す（ `show^en ）, 隠す（ `hide^en ） ］や［ 開く（ `open^en ）, 閉じる（ `close^en ） ］などの動詞~pairではなく。 このことは、 次に挙げる拘束に因る： ◎ We use show/close as the verbs for dialog elements, as opposed to verb pairs that are more commonly thought of as antonyms such as show/hide or open/close, due to the following constraints:

  • ~dialogを［ 隠すこと, 閉じること ］は異なる。 ~dialogを閉じることは、［ それに`結果値$dGを与える, ~eventを発火する, 他の~dialog用に~pageを阻まなくする, 等々 ］からなる。 一方で，~dialogを隠すことは、 純粋に視覚的な特質についてであり，すでに［ `hidden$a 属性で, あるいは ``open$a 属性を除去することで ］行える何かである。 （ ［ ``open$a 属性を除去すること ］および［ その仕方で~dialogを隠すことは一般に欲されないこと ］についての `上の注記＠#note-dialog-remove-open-attribute$も見よ。） ◎ Hiding a dialog is different from closing one. Closing a dialog gives it a return value, fires an event, unblocks the page for other dialogs, and so on. Whereas hiding a dialog is a purely visual property, and is something you can already do with the hidden attribute or by removing the open attribute. (See also the note above about removing the open attribute, and how hiding the dialog in that way is generally not desired.)
  • ~dialogを［ 示すこと, 開くこと ］は異なる。 ~dialogを開くことは、 ~dialogを［ 作成すること, 示すこと ］からなる （ `window.open()$c が新たな~windowを作成して, それを示すのと類似に）。 一方で， ~dialogを示すことは、 ~DOM内にすでにある `dialog$e 要素をとって， 利用者から対話的かつ可視にする処理nである。 ◎ Showing a dialog is different from opening one. Opening a dialog consists of creating and showing that dialog (similar to how window.open() both creates and shows a new window). Whereas showing the dialog is the process of taking a dialog element that is already in the DOM, and making it interactive and visible to the user.
  • にもかかわらず， `dialog.open()^c ~methodが在ったとすると、 ``open$m ~propと競合することになる。 ◎ If we were to have a dialog.open() method despite the above, it would conflict with the dialog.open property.

さらには，［ `dialog$e 要素の元の設計 ］と同時代の［ 他の多くの~UI~framework ］の`調査＠https://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-December/041799.html$から、 動詞~pair［ 示す, 閉じる ］は適度に共通して利用されていたことも明瞭になった。 ◎ Furthermore, a survey of many other UI frameworks contemporary to the original design of the dialog element made it clear that the show/close verb pair was reasonably common.

要約すれば、［ ある種の動詞の含意, それらが技術~文脈において どう利用されるか ］によっては， ~pairにされた動作は — ~dialogを［ 示す, 閉じる ］など — 反意語として表出-可能でない場合もある。 ◎ In summary, it turns out that the implications of certain verbs, and how they are used in technology contexts, mean that paired actions such as showing and closing a dialog are not always expressible as antonyms.

各 `dialog$e 要素には、 次に挙げるものが結付けられる： ◎ ↓

  • `結果値@dG ⇒ 文字列 — 要素の作成-時には空~文字列に設定するモノトスル。

    【 これは、 この訳にて導入した用語。 原文では、 （~markupなしに） “`return value^en” と記されていて， （~algoの） “返り値” と紛らわしいので。 それに伴い，空~文字列の要件も ``returnValue$m ~IDL属性の記述から ここに移動している。 】

  • `閉-注視器@dG ⇒ ある`閉-注視器$／ ~NULL — 初期~時は ~NULL とする。 ◎ Each dialog element has a close watcher, which is a close watcher or null, initially null.

  • `~modalか@dG ⇒ 真偽値 — 要素の作成-時には ~F に設定するモノトスル。

    【 これによる効果は、 § 具現化~内の `§ ~flow内容＠~HTMLrendering#flow-content-3$ を見よ。 】

    ◎ Each dialog element has an is modal flag. When a dialog element is created, this flag must be set to false.

各 `~HTML要素$ %要素 には、 `前回に~focusされた要素@ が結付けられる。 それは、［ ~NULL ／ 要素 ］であり，初期~時は ~NULL とする — これは： ◎ Each HTML element has a previously focused element which is null or an element, and it is initially null.＼

  • %要素 に対し［ ``showModal()$m ／ ``show()$m ］が~callされたときには、 その手続きの中で`~dialogを~focusする$前に， 現在`~focusされて$いる要素に設定される。 ◎ When showModal() and show() are called, this element is set to the currently focused element before running the dialog focusing steps.＼
  • %要素 が `popover$a 属性を有する場合、 `~popoverを示す$間に現在`~focusされて$いる要素に設定される。 ◎ Elements with the popover attribute set this element to the currently focused element during the show popover algorithm.

``open@m ~IDL属性は、 ``open$a 内容~属性を`反映する$モノトスル。 ◎ The open IDL attribute must reflect the open content attribute.

次の~dialog~boxには、 細則事項（ `small$e ）がある。 もっと重要な部分に利用者が注目するよう， `strong$e 要素が利用されている： ◎ This dialog box has some small print. The strong element is used to draw the user's attention to the more important part.

`dialog-3^xCode