HTML-interactive-elements-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>HTML Standard — Interactive elements（日本語訳）</title>
<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-whatwg.css" type="text/css">
<script src="common0.js"></script>
<script src="common1.js" async></script>

<script>

Util.ready = function(){
	const source_data = {
		toc_main: 'interactive-elements',
		generate: expand
	};
	Util.switchWordsInit(source_data);
}

function expand(){
	const class_map = this.class_map;
	const tag_map = this.tag_map;
	const link_map = this.link_map;

	let context = '';

	return this.html.replace(
		/%[\w\-~一-鿆あ-ん]+|``?(.+?)([$@\^])(\w*)/g,
		create_html
	);

	function create_html(match, key, indicator, klass){

if(!key) {//%
	return `<var>${match.slice(1)}</var>`;
}

let href = '';
let href1 = '';
{
	const n = key.indexOf('＠');
	if(n > 0) {
		href1 = key.slice(n + 1);
		key = key.slice(0, n);
	}
}
let text = key;

switch(klass){
case 'r':
	text = `[${key}]`;
	href = `HTML-references.html#refs${key}`;
	break;
case 'l':
	text = `"<code class="literal">${text}</code>"`;
	break;
case 'm':
	const n = text.indexOf('(');
	if(n > 0){
		key = text.slice(0, n);
		text = key + text.slice(n).replace(/\w+/g, '<var>$&</var>');
	}
	break;
case 'pe': 
	text = `::${key}`;
	break;
case 'xCode':
	return `<a id="_ex-html-${key}">＊</a>`
	break;
case 'en':
	return `<span lang="en">${key}</span>`;
	break;
case 'AA':
	return `<a href="~HTMLARIA#el-${key}">作者~向け</a>／<a href="~HTMLAAM#el-${key}">実装者~向け</a>`;
	break;
}

let tag = tag_map[klass];
if(tag) {
	let classname = class_map[klass];
	classname = classname ? ` class="${classname}"` : '';
	text = `<${tag}${classname}>${text}</${tag}>`;
}

if(match[1] === '`') {
	if(indicator === '^'){
		context = key;
	} else {
		klass = `${klass}!${context}`;
	}
}

if(indicator !== '^'){
	href = href1 || link_map[ klass ? `${klass}.${key}` : key ] || href;
	if(!href){
		console.log(match); // check error
		return match;
	}

	switch(indicator){
	case '$':
		text = `<a href="${href}">${text}</a>`;
		break;
	case '@':
		text = `<dfn id="${href.slice(1)}">${text}</dfn>`;
		break;
	}
}

return text;


	}
}

</script>


<script type="text/plain" id="_source_data">


●●options

spec_date:2025-03-14
trans_update:2025-03-15
source_checked:250115
page_state_key:HTML
spec_status:LS
original_url:https://html.spec.whatwg.org/multipage/interactive-elements.html
	abbr_url:HEinteractive
site_nav:uievents,html
nav_prev:HTMLforms
nav_next:HEscripting
trans_1st_pub:2016-10-08


●●class_map
e:element
a:attr
p:property
pe:pseudo
E:error
et:event-type
st:attr-state
v:value
M:method

●●tag_map
I:code
m:code
E:code
c:code
e:code
a:code
M:code
et:code
st:i
p:code
pe:code
v:code
t:var
i:i


●●words_table1

●●words_table

	●構文
省略:omission:~
省略不可:omissibleでない:~
剥いで:stripして:~

	●UI
locale::::ロケール
inspector::::インスペクタ
affordance:
tooltip::::ツールチップ
popup::::ポップアップ
listbox::::リストボックス
zoom::::ズーム
	~zoom率を高く設定-:high text zoom settings
accordion::::アコーディオン
被focus:focused::被 focus:被フォーカス
popover:
closed-by:
pointerdown:
touch::::タッチ
最上層:topmost:~
	最上層:top-most
縮約-:collapse:~
開閉式:disclosure:~

facet:::側面
不活:inert::~
隠され:hideされ::~
隠す:hideする::~
示され:showされ::~
示す:showする::~
示して:showして::~
閉じる:closeする::~
閉じれ:closeでき::~
閉じら:closeさ::~
開く:openする::~
開かれ:openされ::~
開いた:openした::~
開な:open::開いた
編集-:edit:~
自動focus:autofocus::自動 focus:自動フォーカス
	`autofocus^a:autofocus
欄:field:~
一過性:transitory:~
閉-:close:閉じ
	閉-用の:closing
退ける:dismissする:~
注視器:watcher::~
助け:helpful:~
有害:harmful:~
占める:occupyする:~
限界域:bounds:~
確認-:confirm:~

	畳まれ:close
	委任-先:delegatee
	~~選:pick
	どこに配置するか:placement
	~scroll可能になる:scrollability
	済ませた:done
	移る:jump
	いらつかせ:frustrate
	〜で生じた:hit

	●呈示／CSS
中央寄せ:centered:~
露呈-:reveal:露わに

	~group化:grouping
	~group化:grouped

	●構造
top::::トップ

	部分:part
	一部:part of
	各部:parts
	〜で包装され:wrapper

	●内容
details:
summary:
脚注:footnote::~
legend:
分類:category:~
句ng:phrasing::句::フレージング
可触:palpable::~
見出し:heading::~
none::なし
	~~混在-:intermix


	●処理一般
結果値:returnValue:~
	結果値:return value
候補:candidate:~
修復:fixup::~
指名-:designate::~
合体-:coalesce:~
旧-:old:~
新-:new:~
追跡子:tracker::~::トラッカー
続行-:proceed:~

	数~段~先で:In a couple steps
	先の:earlier
	-:throw
	その後に:subsequently
	その後に，:Subsequently
	すぐに:soon
	ふるまい:activities

	%dialog:subject
	%dialog:element
	%要素:element
	%要素:the details element
	%要素:-
	-:element
	%名前空間:namespace
	%局所~名:localName
	%値:value
	%挿入される~node:insertedNode
	-:groupMembers
	%他の要素:otherElement
	%文書:'s node document
	%文書:document
	%現在の~node:currentNode
	%親:parent
	%~command:the command
	%value:-
	%F:-
	%dialog:dialog
	%~control:control
	%~top文書:topDocument
	%結果:result
	%~modalであったか:wasModal
	%除去される~node:removedNode
	%旧-親:oldParent
	%旧-状態:oldState
	%新-状態:newState
	%閉じる必要がある要素:-
	%閉-を防止し得るか:canPreventClose
	%対象:-
	%ある所:hideUntil
	%取消されなかったか:-
	%状態:-
	%~event:event
	%先祖:ancestor
	%同じ~targetか:sameTarget
	%最上層な~dialog:topmostDialog
	%~target:target
	%呼出元:invoker
	-:value
	%~command:command

	●仕様
背後:behind:~
理想:ideal:~
奇異:strange:~
告知-:advertise:~
寄与-:contribute:~
見出そ:findしよ:~
特質:property:~
動詞:verb:~
反意語:antonym:~
同時代の:contemporaryな:~
競合-:conflict:~
調査:survey:~
濫用-:abuse:~
助言:advice:~
馴染み:familiar:~
直面-:face:~
尊重-:respect:~
明白:obvious:~
堅牢:robust:~
施行:enforcement:~
排他的:exclusive:~
	互いに排他的:mutually-exclusive
排他性:exclusivity:~
保つ:keepする:~
異質:disparate:~
概略的:brief:~

	-:possible
	結果も伴われる:additional consequences
	ごく:very
	-:scope
	-:share
	より大きい:larger
	直後:immediately 〜 after
	注目-:draw 〜 attention
	併用する:use this in conjunction with
	はっきりしない:not entirely clear
	通常の規則に代わって:rather than whatever it would otherwise compute to
	考える:consider
	理想とは言えない:less than ideal
	にもかかわらず:despite the above
	考えられて:thought of
	要約すれば:in summary
	そうなるのは〜限られ:This would only happen
	考えて:think
	どれなのか:through 〜 choice to
	見込みが高い:likely
	用を成さない:not be a substitute for
	紛らわしい:misleading
	（念のため、）:To be clear,
	し難く:less 〜 -able
	し易く:help
	~~便利用:helper utility
	~~統合:consolidate
	~callを経るようにする:having 〜 call

	●例
	在庫管理:inventory management
	製品:product
	製品番号:Product Number
	製品名:Product Name
	西暦:Anno Domini
	発注-:placing an order
	魂:immortal soul
	譲渡不能:non-transferable
	行使-:exercise
	明け渡す:surrender
	権限の委託先:duly authorized minions
	~service約款:terms of service
	~~同意:agree

	●未分類
呼出元:invoker:呼び出し元

	~script:による:scripted
	対応する:respective
	~label先:labeled
	followed
	複数箇所:many 〜 points
	引く:draw
	阻まなく:unblock

	先行／:earlier
	だけ:really just
	-:follow
	より長く／longer
	残りの:the rest of
	何回か続けて:several times in succession
	直後:immediately 〜 after
	集める:gather
	小さな:small
	どこにも無い:in the absence of any
	あり続ける:stay
	巨大:large
	-:position
	-:tripped
	置く:put
	同時に:at the same time
	同時に:at once
	調べる:look at
	量:amount
	一連の:set of

●●original_id_map

●●mdn_urls
the-details-element:HTML/Element/details
the-dialog-element:HTML/Element/dialog
the-summary-element:HTML/Element/summary

htmldialogelement:API/HTMLDialogElement
htmldetailselement:API/HTMLDetailsElement

●●link_map

	●IDL／event

CEReactions:~HEcustom#cereactions
HTMLConstructor:~HTMLdom#htmlconstructor

E.InvalidStateError:~WEBIDL#invalidstateerror

	I.DOMException:~WEBIDL#idl-DOMException
I.HTMLDialogElement:#htmldialogelement
I.HTMLDetailsElement:#htmldetailselement
I.Document:~HTMLdom#document
文書:~HTMLdom#the-document-object
I.Element:~DOM4#interface-element
I.HTMLElement:~HTMLdom#htmlelement
I.ToggleEvent:~HTMLinteraction#toggleevent
I.PointerEvent:~POINTEREVENTS#pointerevent-interface

m!details.name:#dom-details-name
m!details.open:#dom-details-open

m!dialog.close:#dom-dialog-close
m!dialog.open:#dom-dialog-open
m!dialog.show:#dom-dialog-show
m!dialog.showModal:#dom-dialog-showmodal
m!dialog.returnValue:#dom-dialog-returnvalue
m!dialog.closedBy:#dom-dialog-closedby
m!dialog.requestClose:#dom-dialog-requestclose

m.type:~DOM4#dom-event-type
m.preventDefault:~DOM4#dom-event-preventdefault
m.isTrusted:~DOM4#dom-event-istrusted
m.cancelable:~DOM4#dom-event-cancelable
m.oldState:~HTMLinteraction#dom-toggleevent-oldstate
m.newState:~HTMLinteraction#dom-toggleevent-newstate

c.window.open():~WINDOW#dom-window-open
	＠~CSSOMVIEW#dom-mouseevent-clientx
	＠~CSSOMVIEW#dom-mouseevent-clienty

et.cancel:~HTMLindex#event-cancel
et.click:~UIEVENTS#event-type-click
et.close:~HTMLindex#event-close
et.toggle:~HTMLindex#event-toggle
et.beforetoggle:~HTMLindex#event-beforetoggle
et.pointerdown:~POINTEREVENTS#the-pointerdown-event
et.pointerup:~POINTEREVENTS#the-pointerup-event


	●要素／属性／値
e.a:~HEtextlevel#the-a-element
e.button:~HEforms#the-button-element
e.details:#the-details-element
e.dialog:#the-dialog-element
e.div:~HEgrouping#the-div-element
e.fieldset:~HEforms#the-fieldset-element
e.input:~HEinput#the-input-element
e.label:~HEforms#the-label-element
e.legend:~HEforms#the-legend-element
e.option:~HEforms#the-option-element
e.p:~HEgrouping#the-p-element
e.article:~HEsections#the-article-element
e.section:~HEsections#the-section-element
e.select:~HEforms#the-select-element
e.summary:#the-summary-element
e.small:~HEtextlevel#the-small-element
e.strong:~HEtextlevel#the-strong-element

a.autofocus:~HTMLinteraction#attr-fe-autofocus
a.command:~HEforms#attr-button-command
a.commandfor:~HEforms#attr-button-commandfor
a.hidden:~HTMLinteraction#attr-hidden
a.href:~HTMLlinks#attr-hyperlink-href
a.multiple:~HEforms#attr-select-multiple
a.tabindex:~HTMLinteraction#attr-tabindex
a.accesskey:~HTMLinteraction#the-accesskey-attribute
a.popover:~HTMLpopover#attr-popover


a!details.name:#attr-details-name
a!details.open:#attr-details-open
a!dialog.open:#attr-dialog-open
a!dialog.closedby:#attr-dialog-closedby

a!input.type:~HEinput#attr-input-type
a!input.alt:~HEinput#attr-input-alt
a!input.value:~HEinput#attr-input-value
a!option.label:~HEforms#attr-option-label
a!option.value:~HEforms#attr-option-value

st.Button:~HEinput#button-state-(type=button)
st.Checkbox:~HEinput#checkbox-state-(type=checkbox)
st.Image:~HEinput#image-button-state-(type=image)
st.Radio:~HEinput#radio-button-state-(type=radio)
st.Reset:~HEinput#reset-button-state-(type=reset)
st.Submit:~HEinput#submit-button-state-(type=submit)

v.any:#attr-dialog-closedby-any
v.closerequest:#attr-dialog-closedby-closerequest
v.none:#attr-dialog-closedby-none

st.何でも:#attr-dialog-closedby-any-state
st.閉-要請:#attr-dialog-closedby-closerequest-state
st.なし:#attr-dialog-closedby-none-state
st.自動:#attr-dialog-closedby-auto-state

st.閉じる:~HEforms#attr-button-command-close-state
st.~modalを示す:~HEforms#attr-button-command-show-modal-state

pe.backdrop:~CSSPOS4#selectordef-backdrop

	●用語

~command:#concept-command
~commandを定義する:#concept-command
~facet:#concept-facet
cF.~label:#command-facet-label
cF.~access~UIkey:#command-facet-accesskey
cF.隠されるか:#command-facet-hiddenstate
cF.不能化されるか:#command-facet-disabledstate
cF.動作:#command-facet-action
	as for a elements:#using-the-a-element-to-define-a-command

doc.~dialog~pointerdown~target:#dialog-pointerdown-target
dG.結果値:#_return-value
dG.~toggle~task追跡子:#dialog-toggle-task-tracker
dG.~modalか:#is-modal
dG.閉-注視器:#dialog-close-watcher
dG.閉-要請の返り値:#request-close-return-value
dG.閉-要請~method用の閉-注視器を可能化するか:#enable-close-watcher-for-requestclose()

~modal~dialogを示す:#show-a-modal-dialog
~dialogを閉じる:#close-the-dialog
~dialogを~focusする:#dialog-focusing-steps
~dialog用の~toggle~event~taskを~queueする:#queue-a-dialog-toggle-event-task
~dialogの~closed-by状態を算出する:#computed-closed-by-state
~dialog用の閉-注視器を設定する:#set-the-dialog-close-watcher
開な~dialogたちを軽く退ける:#light-dismiss-open-dialogs
軽く退けるふるまいを走らす:#run-light-dismiss-activities
最も近い~clickされた~dialogを見出す:#nearest-clicked-dialog

有名~details~group:#details-name-group
~details通知~task手続き:#details-notification-task-steps
親~details用の~summary:#summary-for-its-parent-details
先祖~detailsを露呈する:#ancestor-details-revealing-algorithm
~details用の~toggle~task追跡子:#details-toggle-task-tracker
~details用の~toggle~event~taskを~queueする:#queue-a-details-toggle-event-task
必要なら要素を閉じることにより~detailsの排他性を確保する:#_ensure-details-exclusivity-by-closing-an-element-if-needed
	＠#ensure-details-exclusivity-by-closing-the-given-element-if-needed
	＠#ensure-details-exclusivity-by-closing-other-elements-if-needed

~access~UIkey委任-先:#the-legend-element's-accesskey-delegatee

前回に~focusされた要素:#previously-focused-element

分離子:#concept-separator


	§:~HTMLrendering#rendering
	§:~HTMLLS/scripting.html#footnotes


	●用語（HTML
見出し:~HEsections#concept-heading

fe.値:~HTMLforms#concept-fe-value
fe.不能化されて:~HTMLforms#concept-fe-disabled
opt.不能化されて:~HEforms#concept-option-disabled
	＠~HEforms#concept-select-pick
~toggleする:~HEforms#concept-select-toggle
~label先~control:~HEforms#labeled-control
呼出元~commandは妥当か？手続き:~HEforms#is-valid-invoker-command-steps
呼出元~command手続き:~HEforms#invoker-command-steps

~objを~focusする:~HTMLinteraction#focusing-steps
~DOM~anchor:~HTMLinteraction#dom-anchor
不活:~HTMLinteraction#inert
アテガわれた~access~UIkey:~HTMLinteraction#assigned-access-key
阻んでいる~modal~dialog:~HTMLinteraction#blocked-by-a-modal-dialog
~focusされて:~HTMLinteraction#focused
自動focus候補~群:~HTMLinteraction#autofocus-candidates
自動focusは処理-済みか:~HTMLinteraction#autofocus-processed-flag
doc.指名する被focus区画:~HTMLinteraction#focused-area-of-the-document
~focus可能:~HTMLinteraction#focusable
~focus委任-先:~HTMLinteraction#focus-delegate
~focusを許容する手続き:~HTMLinteraction#allow-focus-steps
~toggle~task追跡子:~HTMLinteraction#toggle-task-tracker
tTk.旧-状態:~HTMLinteraction#toggle-task-old-state
tTk.~task:~HTMLinteraction#toggle-task-task
閉-要請:~HTMLinteraction#close-request
閉-注視器:~HTMLinteraction#close-watcher
閉-注視器を確立する:~HTMLinteraction#establish-a-close-watcher
閉-注視器を破壊する:~HTMLinteraction#close-watcher-destroy
閉-注視器に閉じるよう要請する:~HTMLinteraction#close-watcher-request-close

~popover可視性~状態:~HTMLpopover#popover-visibility-state
i.示している:~HTMLpopover#popover-showing-state
~popoverを示す:~HTMLpopover#show-popover
最上層な~popover先祖を見出す:~HTMLpopover#topmost-popover-ancestor
ある所までの~popoverをすべて隠す:~HTMLpopover#hide-all-popovers-until
文書が示している~popover~listを取得する:~HTMLpopover#_document-popover-list
開な~popoverたちを軽く退ける:~HTMLpopover#light-dismiss-open-popovers


示唆される既定の具現化を~support:~HTMLINFRA#renderingUA
~HTML要素:~HTMLINFRA#html-elements
~HTML要素~除去-時の手続き:~HTMLINFRA#html-element-removing-steps
~HTML要素~挿入-時の手続き:~HTMLINFRA#html-element-insertion-steps

反映する:~HTMLcdom#reflect

真偽-属性:~HTMLcms#boolean-attribute
列挙d属性:~HTMLcms#enumerated-attribute
妥当でない値~用の既定の状態:~HTMLcms#invalid-value-default
欠落~値~用の既定の状態:~HTMLcms#missing-value-default

分類:~HTMLdom#concept-element-categories
内容~属性:~HTMLdom#concept-element-attributes
内容~model:~HTMLdom#concept-element-content-model
この要素を利用できる文脈:~HTMLdom#concept-element-contexts
~accessibilityの考慮点:~HTMLdom#concept-element-accessibility-considerations
~DOM~interface:~HTMLdom#concept-element-dom
~flow内容:~HTMLdom#flow-content-2
大域~属性:~HTMLdom#global-attributes
ヤリトリありな内容:~HTMLdom#interactive-content-2
なし:~HTMLdom#concept-content-nothing
可触~内容:~HTMLdom#palpable-content-2
句ng内容:~HTMLdom#phrasing-content-2
text/html における~tag省略:~HTMLdom#concept-element-tag-omission
見出し内容:~HTMLdom#heading-content-2
表現-:~HTMLdom#represents
doc.開な~dialog~list:~HTMLdom#open-dialogs-list

関連な大域~obj:~WAPI#concept-relevant-global
	~task:~WAPI#concept-task
~DOM操作~task~source:~WAPI#dom-manipulation-task-source
利用者ヤリトリ~task~source:~WAPI#user-interaction-task-source
~click~eventを発火する:~WAPI#fire-a-click-event
~task~queue:~WAPI#task-queue
要素~taskを~queueする:~WAPI#queue-an-element-task

同一-生成元:~ORIGIN#same-origin

~node~navigable:~HTMLds#node-navigable
nav.~top-level辿可能:~HTMLds#nav-top
nav.作動中な文書:~HTMLds#nav-document
属する閲覧~文脈:~HTMLds#concept-document-bc
全部的に作動中:~HTMLds#fully-active

~navigate:~HTMLnav#navigate


	●用語（外部
空:~INFRA#list-is-empty
空にする:~INFRA#list-empty
付加する:~INFRA#list-append
除去する:~INFRA#list-remove
~ASCII空白:~INFRA#ascii-whitespace
~ASCII空白を剥いで縮約する:~INFRA#strip-and-collapse-ascii-whitespace

文書~内:~DOM4#in-a-document
~node文書:~DOM4#concept-node-document
~tree:~DOM4#concept-tree
~tree順序:~DOM4#concept-tree-order
最初の子:~DOM4#concept-tree-first-child
広義-先祖:~DOM4#concept-tree-inclusive-ancestor
~eventを発火する:~DOM4#concept-event-fire
作動化の挙動:~DOM4#eventtarget-activation-behavior
接続されて:~DOM4#connected
属性~値を設定する:~DOM4#concept-element-attributes-set-value
属性を除去する:~DOM4#concept-element-attributes-remove
子孫~text内容:~DOM4#concept-descendant-text-content
~shadowも含めた子孫:~DOM4#concept-shadow-including-descendant
~shadowも含めた広義-子孫:~DOM4#concept-shadow-including-inclusive-descendant
doc.生成元:~DOM4#concept-document-origin
属性~変更-時の手続き:~DOM4#concept-element-attributes-change-ext
~target:~DOM4#event-target
	誤）~target:~DOM4#concept-event-target

~URL:~URL1#concept-url

上端~層:~CSSPOS4#document-top-layer
上端~層に要素を追加する:~CSSPOS4#add-an-element-to-the-top-layer
上端~層から要素を除去するよう要請する:~CSSPOS4#request-an-element-to-be-removed-from-the-top-layer
上端~層から要素を即時に除去する:~CSSPOS4#remove-an-element-from-the-top-layer-immediately

	●CSS
表示域:~CSS2J#viewport
平坦~tree:~CSSSCOPING#flat-tree

●●html_code_list


■details-1
<section class="progress window">
 <h1>"Really Achieving Your Childhood Dreams" を複製しています</h1>
 <details>
  <summary>複製中... <progress max="375505392" value="97543282"></progress> 25%</summary>
  <dl>
   <dt>転送レート： </dt> <dd>452KB/s</dd>
   <dt>保存先： </dt> <dd>/home/rpausch/raycd.m4v</dd>
   <dt>転送元： </dt> <dd>/var/www/lectures/raycd.m4v</dd>
   <dt>経過時間： </dt> <dd>01:16:27</dd>
   <dt>色プロファイル： </dt> <dd>SD (6-1-6)</dd>
   <dt>サイズ： </dt> <dd>320×240</dd>
  </dl>
 </details>
</section>

<section class="progress window">
 <h1>Copying "Really Achieving Your Childhood Dreams"</h1>
 <details>
  <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
  <dl>
   <dt>Transfer rate:</dt> <dd>452KB/s</dd>
   <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
   <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
   <dt>Duration:</dt> <dd>01:16:27</dd>
   <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
   <dt>Dimensions:</dt> <dd>320×240</dd>
  </dl>
 </details>
</section>

■details-2
<details>
 <summary><label for=fn>名前と拡張子：</label></summary>
 <p><input type=text id=fn name=fn value="Pillar Magazine.pdf">
 <p><label><input type=checkbox name=ext checked>拡張子を隠す</label>
</details>

<details>
 <summary><label for=fn>Name & Extension:</label></summary>
 <p><input type=text id=fn name=fn value="Pillar Magazine.pdf">
 <p><label><input type=checkbox name=ext checked> Hide extension</label>
</details>

■details-3
<section class="characteristics">
 <details name="frame-characteristics">
  <summary>素材</summary>
  この額縁は、無垢なオーク材でできています。
 </details>
 <details name="frame-characteristics">
  <summary>Size</summary>
  額縁には、高さ 40cm, 幅 30cm の写真が収まります。
  額縁自体は、高さ 45cm, 幅 35cm, 太さ 2cm です。
 </details>
 <details name="frame-characteristics">
  <summary>色</summary>
  この額縁には、
  自然な木目に着色されたもの, 黒に着色されたものがあります。
 </details>
</section>

<section class="characteristics">
 <details name="frame-characteristics">
  <summary>Material</summary>
  The picture frame is made of solid oak wood.
 </details>
 <details name="frame-characteristics">
  <summary>Size</summary>
  The picture frame fits a photo 40cm tall and 30cm wide.
  The frame is 45cm tall, 35cm wide, and 2cm thick.
 </details>
 <details name="frame-characteristics">
  <summary>Color</summary>
  The picture frame is available in its natural wood
  color, or with black stain.
 </details>
</section>

■details-4
<section class="characteristics">
 <details name="frame-characteristics" id="d1" open>...</details>
 <details name="frame-characteristics" id="d2">...</details>
 <details name="frame-characteristics" id="d3">...</details>
</section>

■details-5
<section class="characteristics">
 <details name="frame-characteristics" id="d1">...</details>
 <details name="frame-characteristics" id="d2" open>...</details>
 <details name="frame-characteristics" id="d3">...</details>
</section>

■details-6
<style>
 details > summary { transition: color 1s; color: black; }
 details[open] > summary { color: red; }
</style>
<details>
 <summary>自動運転： 作動中</summary>
 <p>速度： 12m/s</p>
 <p>方向： 北</p>
</details>

<style>
 details > summary { transition: color 1s; color: black; }
 details[open] > summary { color: red; }
</style>
<details>
 <summary>Automated Status: Operational</summary>
 <p>Velocity: 12m/s</p>
 <p>Direction: North</p>
</details>


■dialog-1
<dialog>
  <label>製品番号 <input type="text" readonly></label>
  <label>製品名 <input type="text" autofocus></label>
</dialog>

<dialog>
  <label>Product Number <input type="text" readonly></label>
  <label>Product Name <input type="text" autofocus></label>
</dialog>

■dialog-2
<dialog style="height: 80vh;">
  <div style="overflow: auto; height: 60vh;" autofocus>
    <p>西暦 2010年 4月 1日に このサイトを介して発注することにより、あなたは、今から未来永劫に、あなたの魂に対する譲渡不能な請求権を我々に是認することに同意したものとする。</p>
    <p>我々がこの請求権を行使したいと望んだ場合、あなたは、このサイトまたはその権限の委託先から書面による通知を受け取った時点から 5 営業日以内に、あなたの魂およびそれに対するいかなる請求権も明け渡すことに同意するものとする。</p>
    <!-- …等々，以下多数の <p> 要素を伴う… -->
  </div>
  <form method="dialog">
    <button type="submit" value="agree">同意する</button>
    <button type="submit" value="disagree">同意しない</button>
  </form>
</dialog>

<dialog style="height: 80vh;">
  <div style="overflow: auto; height: 60vh;" autofocus>
    <p>By placing an order via this Web site on the first day of the fourth month of the year
    2010 Anno Domini, you agree to grant Us a non-transferable option to claim, for now and for
    ever more, your immortal soul.</p>
    <p>Should We wish to exercise this option, you agree to surrender your immortal soul,
    and any claim you may have on it, within 5 (five) working days of receiving written
    notification from  this site or one of its duly authorized minions.</p>
    <!-- ... etc., with many more <p> elements ... -->
  </div>
  <form method="dialog">
    <button type="submit" value="agree">Agree</button>
    <button type="submit" value="disagree">Disagree</button>
  </form>
</dialog>

■dialog-3
<dialog>
 <h1>財布に追加する</h1>
 <p><strong><label for=amt>何枚のコインを追加しますか？</label></strong></p>
 <p><input id=amt name=amt type=number min=0 step=0.01 value=100></p>
 <p><small>コインの追加は、ご自身の責任で行なってください。</small></p>
 <p><label><input name=round type=checkbox>端数は丸める</label></p>
 <p><input type=button onclick="submit()" value="追加する"></p>
</dialog>

<dialog>
 <h1>Add to Wallet</h1>
 <p><strong><label for=amt>How many gold coins do you want to add to your wallet?</label></strong></p>
 <p><input id=amt name=amt type=number min=0 step=0.01 value=100></p>
 <p><small>You add coins at your own risk.</small></p>
 <p><label><input name=round type=checkbox> Only add perfectly round coins</label></p>
 <p><input type=button onclick="submit()" value="Add Coins"></p>
</dialog>

■dialog-4
<button type=button
        commandfor="the-dialog"
        command="show-modal">
 削除する
</button>
<dialog id="the-dialog">
 <form action="/delete" method="POST">
  <button type="submit">
   削除する
  </button>
  <button commandfor="the-dialog"
          command="close">
   取り消す
  </button>
 </form>
</dialog>

削除する:Delete
取り消す:Cancel

■legend-1
<fieldset>
 <legend accesskey=p>
  <label><input name=pizza type=number step=1 value=1 min=0>
3 種のトッピング付きのピザを希望します
  </label>
 </legend>
 <label><input name=pizza-cheese type=checkbox checked>チーズ</label>
 <label><input name=pizza-ham type=checkbox checked>ハム</label>
 <label><input name=pizza-pineapple type=checkbox> パイナップル</label>
</fieldset>

<fieldset>
 <legend accesskey=p>
  <label>I want <input name=pizza type=number step=1 value=1 min=0>
   pizza(s) with these toppings</label>
 </legend>
 <label><input name=pizza-cheese type=checkbox checked> Cheese</label>
 <label><input name=pizza-ham type=checkbox checked> Ham</label>
 <label><input name=pizza-pineapple type=checkbox> Pineapple</label>
</fieldset>

●●images
＠HTML-resources/
sample-details-1｜width:265px; height:531px; box-shadow:0px 10px 10px 10px silver; margin: 20px;｜一群の details からなる UI の見本｜.png
sample-details-2｜width:265px; height:586px; box-shadow:0px 10px 10px 10px silver; margin: 20px;｜展開された details｜.png

●●trans_metadata
<p>
~THIS_PAGEは、~WHATWGによる HTML 仕様の
<a href="~SPEC_URL">§ Interactive elements</a>
を日本語に翻訳したものです。
~PUB
</p>

</script>
</head>
<body>

<header>
	<hgroup>
<h1>HTML — やりとり可能な要素</h1>
	</hgroup>
</header>

<main id="MAIN" hidden>

		<section id="interactive-elements">
<h3 title="Interactive elements">4.11. ヤリトリありな要素</h3>

			<section id="_conventions">
<h4>【この訳に特有な表記規約】</h4>

◎表記記号

			</section>
			<section id="the-details-element">
<h4 title="The details element">4.11.1. ``details^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$／`ヤリトリありな内容$／`可触~内容$
◎
Flow content.
◎
Interactive content.
◎
Palpable content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`~flow内容$が期待される所。
◎
Where flow content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
［
1 個の `summary$e 要素, `~flow内容$
］からなる並び
◎
One summary element followed by flow content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
``name$a
— 互いに排他的な `details$e 要素たちが成す~groupの名前
◎
name — Name of group of mutually-exclusive details elements
</dd>

	<dd>
``open$a
— 詳細は可視であるかどうか
◎
open — Whether the details are visible
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`details$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
<pre class="idl">
[Exposed=Window]
interface `HTMLDetailsElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute DOMString ``name$m;
  [`CEReactions$] attribute boolean ``open$m;
};
</pre>
	</dd>
</dl>

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

<p class="note">注記：
他の~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.
</p>

<p class="note">注記：
`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.
</p>

<p>
要素の最初の子が `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").
</p>

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

<p>
``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.
</p>

<p>
作者は、
この特能を利用する前に，［
互いに関係する `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 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.
</p>

<p>
文書は、
同じ`有名~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.
</p>

<p class="note">注記：
共通な ``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.
</p>

<p>
文書は、
次を満たす `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.
</p>

<p>
``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.
</p>

<p class="note">注記：
関係する要素たちを［
視覚的／~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.
</p>

<p>
``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.
</p>

<p>
追加的な情報は、
要素の作成-時には，この属性が［
無いならば 隠される ／
在るならば 示される
］ベキである。
その後に，属性が［
除去された／追加された
］場合、
情報は［
隠される／示される
］ベキである。
◎
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.
</p>

<div class="algo">
<p>
~UAは、［
要素 %要素 に対し，追加的な情報を［
示す／隠す
］よう要請する
］ことを利用者に許容するベキである。
そのような要請を尊守するときは、
~UAは，次を走らすモノトスル：
</p>
<ul>
	<li>
示す場合
⇒
%要素 の`属性~値を設定する$( `open^l, 空~文字列 )
</li>
	<li>
隠す場合
⇒
%要素 から ``open$a `属性を除去する$
</li>
</ul>

◎
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.
</div>

<p class="note">
この，追加的な情報を［
示す／隠す
］能は、
適切な `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.
</p>

<p>
各
`有名~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:
</p>
<ul>
	<li>
%a, %b は同じ `~tree$内にある
◎
Both a and b are in the same tree.
</li>
	<li>
%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.
</li>
</ul>

<p>
各 `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.
</p>

<div class="algo">
<p>
`details$e 要素 %要素 用に利用される`属性~変更-時の手続き$は、
所与の
( %局所~名, %旧-値, %値, %名前空間 )
に対し：
◎
The following attribute change steps, given element, localName, oldValue, value, and namespace, are used for all details elements:
</p>
<ol>
	<li>
~IF［
%名前空間 ~NEQ ~NULL
］
⇒
~RET
◎
If namespace is not null, then return.
</li>
	<li>
~IF［
%局所~名 ~EQ "``name$a"
］
⇒
`必要なら要素を閉じることにより~detailsの排他性を確保する$( %要素, `自身^i )
◎
If localName is name, then ensure details exclusivity by closing the given element if needed given element.
</li>
	<li>
<p>
~IF［
%局所~名 ~EQ "``open$a"
］：
◎
If localName is open, then:
</p>
		<ol>
			<li>
<p>
~IF［
%旧-値 ~NEQ %値
］~AND［
~NULL ~IN { %旧-値, %値 }
］：
◎
If one of oldValue or value is null and the other is not null, run the following steps,＼
</p>

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

<p class="note">注記：
``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.
</p>
				<ol>
					<li>
~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".
</li>
					<li>
~ELSE
⇒
`~details用の~toggle~event~taskを~queueする$( %要素, `open^l, `closed^l )
◎
Otherwise, queue a details toggle event task given the details element, "open", and "closed".
</li>
				</ol>
			</li>
			<li>
~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.
</li>
		</ol>
	</li>
</ol>
</div>

<div class="algo">
<p>
`details$e 用の`~HTML要素~挿入-時の手続き$は、
所与の
( %挿入される~node )
に対し：
◎
The details HTML element insertion steps, given insertedNode, are:
</p>
<ol>
	<li>
`必要なら要素を閉じることにより~detailsの排他性を確保する$( %挿入される~node, `自身^i )
◎
Ensure details exclusivity by closing the given element if needed given insertedNode.
</li>
</ol>
</div>

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

<div class="algo">
<p>
`~details用の~toggle~event~taskを~queueする@
~algoは、
所与の
( `details$e 要素 %要素, 文字列 %旧-状態, 文字列 %新-状態 )
に対し：
◎
To queue a details toggle event task given a details element element, a string oldState, and a string newState:
</p>
<ol>
	<li>
%追跡子 ~LET %要素 の`~details用の~toggle~task追跡子$
◎
↓</li>
	<li>
<p>
~IF［
%追跡子 ~NEQ ~NULL
］：
◎
If element's details toggle task tracker is not null, then:
</p>
		<ol>
			<li>
%旧-状態 ~SET %追跡子 の`旧-状態$tTk
◎
Set oldState to element's details toggle task tracker's old state.
</li>
			<li>
%追跡子 の`~task$tTkを それが属する`~task~queue$から除去する
◎
Remove element's details toggle task tracker's task from its task queue.
</li>
			<li>
%要素 の`~details用の~toggle~task追跡子$ ~SET ~NULL
◎
Set element's details toggle task tracker to null.
</li>
		</ol>
	</li>
	<li>
<p>
%~task ~LET `要素~taskを~queueする$( `~DOM操作~task~source$, %要素, 次の手続き ）
◎
Queue an element task given the DOM manipulation task source and element to run＼
</p>
<div class="algo">
<p>
手続きは：
◎
the following steps:
</p>
		<ol>
			<li>
`~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.
</li>
			<li>
%要素 の`~details用の~toggle~task追跡子$ ~SET ~NULL
◎
Set element's details toggle task tracker to null.
</li>
		</ol>
</div>
	</li>
	<li>
%要素 の`~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.
</li>
</ol>
</div>

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

<p class="trans-note">【
この~algoは、
原文では 2 つの~algoにより定義されているが，
この訳では %対象 ~flagを通して 1 つに集約する。
】</p>
<ol>
	<li>
~IF［
%対象 ~EQ `自身^i
］
⇒
~Assert：
%要素 は ``open$a 属性を有する
</li>
	<li>
~ELIF［
%要素 は ``open$a 属性を有さない
］
⇒
~RET
</li>
	<li>
~IF［
%要素 は ``name$a 属性を有さない
］~OR［
%要素 は ``name$a 属性を有していて，その値 ~EQ 空~文字列
］
⇒
~RET
</li>
	<li>
%閉じる必要がある要素 ~LET ε
</li>
	<li>
<p>
%要素 が属する`有名~details~group$を成す
~EACH( %他の要素 )
に対し，`~tree順序$で：
</p>
		<ol>
			<li>
~IF［
%他の要素 ~EQ %要素
］
⇒
~CONTINUE
</li>
			<li>
~IF［
%他の要素 は ``open$a 属性を有さない
］
⇒
~CONTINUE
</li>
			<li>
<p>
~Assert：
%要素 が属する`有名~details~group$を成す~memberのうち %要素, %他の要素 以外のものは ``open$a 属性を有さない。
</p>

<p class="trans-note">【
この表明は、
原文では %対象 ~EQ `他の要素^i の場合に限り与えられているが，
%対象 を問わず満たされるはずである。
】</p>
</li>
			<li>
%閉じる必要がある要素 ~LET %対象 に応じて
⇒＃
`他の要素^i ならば %他の要素 ／
`自身^i ならば %要素 ／
</li>
			<li>
~BREAK
</li>
		</ol>
	</li>
	<li>
~IF［
%閉じる必要がある要素 ~NEQ ε
］
⇒
%閉じる必要がある要素 から ``open$a `属性を除去する$
</li>
</ol>

◎
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 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.
◎
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 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.
</div>

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

<p>
``open@m
~IDL属性は、
``open$a 内容~属性を`反映する$モノトスル。
</p>
◎
The name and open IDL attributes must reflect the respective content attributes of the same name.
</div>

<div class="algo">
<p>
`先祖~detailsを露呈する@
~algoは、
所与の
( %現在の~node )
に対し：
◎
The ancestor details revealing algorithm is to run the following steps on currentNode:
</p>
<ol>
	<li>
<p>
~WHILE ［
%現在の~node は`平坦~tree$の中で親~nodeを有する
］:
◎
While currentNode has a parent node within the flat tree:
</p>
		<ol>
			<li>
<p>
~IF［
ある `details$e 要素 %要素 が在って，
%現在の~node は %要素 の
`2 個目の~slot＠~HTMLrendering#_details-slots$の中に~slotされている
］：
◎
If currentNode is slotted into the second slot of a details element:
</p>
				<ol>
					<li>
%現在の~node ~SET %要素
◎
Set currentNode to the details element which currentNode is slotted into.
</li>
					<li>
~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.
</li>
				</ol>
			</li>
			<li>
~ELSE
⇒
%現在の~node ~SET `平坦~tree$の中の %現在の~node の親~node
◎
Otherwise, set currentNode to the parent node of currentNode within the flat tree.
</li>
		</ol>
	</li>
</ol>
</div>

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

`details-1^xCode
</div>

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

`details-2^xCode

<p>
これを ~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.
</p>

<figure>
<a id="_dgm-sample-details-1"></a>
<a id="_dgm-sample-details-2"></a>
</figure>

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

<div id="example-details-exclusive-accordion" class="example">
<p>
`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.
</p>

`details-3^xCode
</div>

<div id="example-details-exclusive-accordion-setting-open" class="example">
<p>
次の例は、［
``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.
</p>

<p>
次の初期~markup：
◎
Given the initial markup:
</p>

`details-4^xCode

<p>
および次の~script:
◎
and the script:
</p>

<pre class="lang-js">
document.getElementById("d2").setAttribute("open", "");
</pre>

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

`details-5^xCode

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

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

<div class="example">
<p>
``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:
</p>

`details-6^xCode
</div>

			</section>
			<section id="the-summary-element">
<h4 title="The summary element">4.11.2. `summary^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
~none。
◎
None.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`details$e 要素の`最初の子$として。
◎
As the first child of a details element.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`句ng内容$。
加えて，`見出し内容$が~~混在していてもよい。
◎
Phrasing content, optionally intermixed with heading content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>

	<dt>`内容~属性$</dt>
	<dd>`大域~属性$
◎
Global attributes
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`summary$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>
`HTMLElement$I を利用する。
◎
Uses HTMLElement.
</dd>
</dl>

<p>
`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.
</p>

<div class="algo">
<p>
次を満たす要素は
`親~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.
</p>
</div>

<div class="algo">
<p>
`summary$e 要素 %要素 の`作動化の挙動$は：
◎
The activation behavior of summary elements is to run the following steps:
</p>
<ol>
	<li>
~IF［
%要素 は`親~details用の~summary$でない
］
⇒
~RET
◎
If this summary element is not the summary for its parent details, then return.
</li>
	<li>
%親 ~LET %要素 の親
◎
Let parent be this summary element's parent.
</li>
	<li>
~IF［
%親 は ``open$a 属性を有する
］
⇒
%親 から ``open$a `属性を除去する$†
◎
If the open attribute is present on parent, then remove it.＼
</li>
	<li>
~ELSE
⇒
%親 の`属性~値を設定する$( `open^l, 空~文字列 )†
◎
Otherwise, set parent's open attribute to the empty string.
</li>
</ol>

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

			</section>
			<section id="commands">
<h4 title="Commands">4.11.3. ~command</h4>

				<section id="facets-2">
<h5 title="Facets">4.11.3.1. ~facet</h5>

<p>
`~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.
</p>

<p id="facets">
各`~command$ %~command は、
次に挙げる
`~facet@
（ `facet^en ）を有するように定義される：
◎
Commands are defined to have the following facets:
</p>
<dl class="def-list">
	<dt>
`~label@cF
◎
Label
</dt>
	<dd>
利用者から見える［
%~command の名前
］。
◎
The name of the command as seen by the user.
</dd>

	<dt>
`~access~UIkey@cF
◎
Access Key
</dt>
	<dd>
~UAにより選定される［
%~command を誘発する~UIkeyの組合n
］または， ε （無し）。
◎
A key combination selected by the user agent that triggers the command. A command might not have an Access Key.
</dd>

	<dt>
`隠されるか@cF
◎
Hidden State
</dt>
	<dd>
真偽値
— ~T ならば、
%~command は隠される
（基本的に，~menu内に示されるべきかどうかを表す）。
◎
Whether the command is hidden or not (basically, whether it should be shown in menus).
</dd>

	<dt>
`不能化されるか@cF
◎
Disabled State
</dt>
	<dd>
真偽値
— ~T ならば、
%~command は関連しないので誘発できない。
◎
Whether the command is relevant and can be triggered or not.
</dd>

	<dt>
`動作@cF
◎
Action
</dt>
	<dd>
%~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.
</dd>
</dl>

<p id="expose-commands-in-ui">
~UAは、
~AND↓ が満たされるならば，
要素 %要素 が定義する`~command$を公開してもヨイ ：
◎
User agents may expose the commands that match the following criteria:
</p>
<ul>
	<li>
当の`~command$の`隠されるか$cF ~EQ ~F
（ %要素 は可視である）
◎
The Hidden State facet is false (visible)
</li>
	<li>
［
%要素 はある`文書~内$にある
］~AND［
当の文書が`属する閲覧~文脈$ ~NEQ ~NULL
］
◎
The element is in a document with a non-null browsing context.
</li>
	<li>
%要素 の`広義-先祖$として，
`hidden$a 属性を有するものは無い
◎
Neither the element nor any of its ancestors has a hidden attribute specified.
</li>
</ul>

<p>
~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.
</p>

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

				</section>
				<section id="using-the-a-element-to-define-a-command">
<h5 title="Using the a element to define a command">4.11.3.2. `a^e 要素を利用して~commandを定義する</h5>

<p>
`a$e 要素 %要素 は、
`href$a 属性を有するならば，`~commandを定義する$。
この`~command$の各種`~facet$は：
◎
An a element with an href attribute defines a command.
</p>

<dl>
	<dt>`~label$cF</dt>
	<dd>
%要素 の`子孫~text内容$
◎
The Label of the command is the element's descendant text content.
</dd>

	<dt>`~access~UIkey$cF</dt>
	<dd>
%要素 に`アテガわれた~access~UIkey$
— 無い場合は ε
◎
The Access Key of the command is the element's assigned access key, if any.
</dd>

	<dt>`隠されるか$cF</dt>
	<dd>
~IS［
%要素 は `hidden$a 属性を有する
］
◎
The Hidden State of the command is true (hidden) if the element has a hidden attribute, and false otherwise.
</dd>

	<dt>`不能化されるか$cF</dt>
	<dd>
~IS［
%要素 の`広義-先祖$として，`不活$なものが在る
］
◎
The Disabled State facet of the command is true if the element or one of its ancestors is inert, and false otherwise.
</dd>

	<dt>`動作$cF</dt>
	<dd>
%要素 に向けて`~click~eventを発火する$
◎
The Action of the command is to fire a click event at the element.
</dd>
</dl>

				</section>
				<section id="using-the-button-element-to-define-a-command">
<h5 title="Using the button element to define a command">4.11.3.3. `button^e 要素を利用して~commandを定義する</h5>

<p>
`button$e 要素 %要素 は、
常に`~commandを定義する$。
この`~command$の各種`~facet$は：
◎
A button element always defines a command.
</p>

<dl>
	<dt>`~label$cF</dt>
	<dt>`~access~UIkey$cF</dt>
	<dt>`隠されるか$cF</dt>
	<dt>`動作$cF</dt>
	<dd>
それぞれ、
`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).
</dd>

	<dt>`不能化されるか$cF</dt>
	<dd>
~IS［
%要素 の`広義-先祖$として，`不活$なものが在る
］~OR［
%要素 は`不能化されて$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.
</dd>
</dl>

				</section>
				<section id="using-the-input-element-to-define-a-command">
<h5 title="Using the input element to define a command">4.11.3.4. ``input^e 要素を利用して~commandを定義する</h5>

<p>
`input$e 要素 %要素 は、［
その ``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.
</p>

<dl>
	<dt>`~label$cF</dt>
	<dd>
<p>
次に従って決定される：
◎
The Label of the command is determined as follows:
</p>
		<ol>
			<li>
%value ~LET ［
%要素 は ``value$a 属性を有するならば その値 ／
~ELSE_ ε
］
◎
↓</li>
			<li>
<p>
~IF［
%要素 の ``type$a 属性の状態 ~IN { `Submit$st, `Reset$st, `Image$st, `Button$st }
］：
</p>
				<ol>
					<li>
~IF［
%value ~NEQ ε
］
⇒
~RET %value
</li>
					<li>
~RET ~UAが~buttonに既定の~labelをあてがうときに利用する値
— 値は~UA, および~localeに依存する
</li>
				</ol>
◎
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.
</li>
			<li>
~IF［
%要素 を`~label先~control$とする `label$e 要素は在る
］
⇒
~RET 該当するもののうち，`~tree順序$で最初のものの`子孫~text内容$
（~JSで言えば， %要素`.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.)
</li>
			<li>
~RET %value に応じて
⇒＃
ε ならば 空~文字列 ／
~ELSE_ %value
◎
Otherwise, if the value attribute is present, then the Label is the value of that attribute.
◎
Otherwise, the Label is the empty string.
</li>
		</ol>
	</dd>
	<dd class="note">注記：
%要素 が `Image$st 状態にある場合， ``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.
</dd>

	<dt>`~access~UIkey$cF</dt>
	<dd>
%要素 に`アテガわれた~access~UIkey$
— 無い場合は ε
◎
The Access Key of the command is the element's assigned access key, if any.
</dd>

	<dt>`隠されるか$cF</dt>
	<dd>
~IS［
%要素 は `hidden$a 属性を有する
］
◎
The Hidden State of the command is true (hidden) if the element has a hidden attribute, and false otherwise.
</dd>

	<dt>`不能化されるか$cF</dt>
	<dd>
~IS［
%要素 の`広義-先祖$として，`不活$なものが在る
］~OR［
%要素 は`不能化されて$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.
</dd>

	<dt>`動作$cF</dt>
	<dd>
%要素 に向けて`~click~eventを発火する$
◎
The Action of the command is to fire a click event at the element.
</dd>
</dl>

				</section>
				<section id="using-the-option-element-to-define-a-command">
<h5 title="Using the option element to define a command">4.11.3.5. ``option^e 要素を利用して~commandを定義する</h5>

<div>
<p>
`option$e 要素 %要素 は、
~AND↓ を満たすならば，`~commandを定義する$：
</p>
<ul>
	<li>
先祖に `select$e 要素がある
</li>
	<li>
［
``value$a 属性を有さない 
］~OR［
``value$a 属性を有していて その値 ~NEQ 空~文字列
］
</li>
</ul>

<p>
この`~command$の各種`~facet$は：
</p>
◎
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.
</div>

<dl>
	<dt>`~label$cF</dt>
	<dd>
%要素 は ``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.
</dd>

	<dt>`~access~UIkey$cF</dt>
	<dd>
%要素 に`アテガわれた~access~UIkey$
— 無い場合は ε
◎
The Access Key of the command is the element's assigned access key, if any.
</dd>

	<dt>`隠されるか$cF</dt>
	<dd>
~IS［
%要素 は `hidden$a 属性を有する
］
◎
The Hidden State of the command is true (hidden) if the element has a hidden attribute, and false otherwise.
</dd>

	<dt>`不能化されるか$cF</dt>
	<dd>
<p>
~IS ~OR↓：
</p>
		<ul>
			<li>
%要素 は`不能化されて$optいる
</li>
			<li>
%要素 に最も近い先祖 `select$e 要素は`不能化されて$feいる
</li>
			<li>
%要素 の`広義-先祖$として，`不活$なものが在る
</li>
		</ul>
◎
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.
</dd>

	<dt>`動作$cF</dt>
	<dd>
<p>
次の手続きを走らす：
</p>
		<ol>
			<li>
~IF［
%要素 に最も近い先祖 `select$e 要素は `multiple$a 属性を有する
］
⇒
%要素 を`~toggleする$
</li>
			<li>
~ELSE
⇒
%要素 を`~~選ぶ＠~HEforms#concept-select-pick$
</li>
		</ol>
◎
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.
</dd>
</dl>

				</section>
				<section id="using-the-accesskey-attribute-on-a-legend-element-to-define-a-command">
<h5 title="Using the accesskey attribute on a legend element to define a command">4.11.3.6. `legend^e 要素の `accesskey^a 属性を利用して~commandを定義する</h5>

<p>
`legend$e 要素 %要素 は、
~AND↓ を満たすならば，`~commandを定義する$：
◎
A legend element defines a command if all of the following are true:
</p>
<ul>
	<li>
`アテガわれた~access~UIkey$はある
◎
It has an assigned access key.
</li>
	<li>
%要素 の親は `fieldset$e 要素である
◎
It is a child of a fieldset element.
</li>
	<li>
<div class="p">
<p>
~AND↓ を満たす要素は在る：
</p>
		<ul>
			<li>
%要素 の親の子孫である
</li>
			<li>
`~commandを定義する$
</li>
			<li>
`label$e 要素でない
</li>
			<li>
`legend$e 要素でない
</li>
		</ul>
◎
Its parent has a descendant that defines a command that is neither a label element nor a legend element.＼
</div>

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

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

	</li>
</ul>

<p>
この`~command$の各種`~facet$は：
◎
↓</p>
<dl>
	<dt>`~label$cF</dt>
	<dd>
%要素 の`子孫~text内容$
◎
The Label of the command is the element's descendant text content.
</dd>

	<dt>`~access~UIkey$cF</dt>
	<dd>
%要素 に`アテガわれた~access~UIkey$
— 無い場合は ε
◎
The Access Key of the command is the element's assigned access key.
</dd>

	<dt>`隠されるか$cF</dt>
	<dt>`不能化されるか$cF</dt>
	<dt>`動作$cF</dt>
	<dd>
それぞれ、
`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.
</dd>
</dl>

<div class="example">
<p>
この例では、
当の `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.
</p>

`legend-1^xCode
</div>

				</section>
				<section id="using-the-accesskey-attribute-to-define-a-command-on-other-elements">
<h5 title="Using the accesskey attribute to define a command on other elements">4.11.3.7. 他の要素~上で `accesskey^a 属性を利用して~commandを定義する</h5>

<p>
要素 %要素 は、
`アテガわれた~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.
</p>

<p>
この`~command$の各種`~facet$は：
</p>
<dl>
	<dt>`~label$cF</dt>
	<dd>
%要素 を`~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).＼
</dd>
	<dd>
他の場合、
%要素 の`子孫~text内容$
◎
Otherwise, the Label is the element's descendant text content.
</dd>

	<dt>`~access~UIkey$cF</dt>
	<dd>
%要素 に`アテガわれた~access~UIkey$
◎
The Access Key of the command is the element's assigned access key.
</dd>

	<dt>`隠されるか$cF</dt>
	<dd>
~IS［
%要素 は `hidden$a 属性を有する
］
◎
The Hidden State of the command is true (hidden) if the element has a hidden attribute, and false otherwise.
</dd>

	<dt>`不能化されるか$cF</dt>
	<dd>
~IS［
%要素 の`広義-先祖$として，`不活$なものが在る
］
◎
The Disabled State of the command is true if the element or one of its ancestors is inert, and false otherwise.
</dd>

	<dt>`動作$cF</dt>
	<dd>
<p>
次の手続きを走らす：
◎
The Action of the command is to run the following steps:
</p>
		<ol>
			<li>
`~objを~focusする$( %要素 )
◎
Run the focusing steps for the element.
</li>
			<li>
%要素 に向けて`~click~eventを発火する$
◎
Fire a click event at the element.
</li>
		</ol>
	</dd>
</dl> 

				</section>
			</section>
			<section id="the-dialog-element">
<h4 title="The dialog element">4.11.4. ``dialog^e 要素</h4>

<dl class="element-def">
	<dt>`分類$</dt>
	<dd>
`~flow内容$
◎
Flow content.
</dd>

	<dt>`この要素を利用できる文脈$</dt>
	<dd>
`~flow内容$が期待される所。
◎
Where flow content is expected.
</dd>

	<dt>`内容~model$</dt>
	<dd>
`~flow内容$
◎
Flow content.
</dd>

	<dt>`text/html における~tag省略$</dt>
	<dd>
両~tagとも省略不可。
◎
Neither tag is omissible.
</dd>
	<dt>`内容~属性$</dt>
	<dd>
`大域~属性$
◎
Global attributes
</dd>
	<dd>
``closedby$a
— どの利用者~動作が当の~dialogを閉じることになるか
◎
closedby — Which user actions will close the dialog
</dd>
	<dd>
``open$a
— 当の~dialog~boxを示しているかどうか
◎
open — Whether the dialog box is showing
</dd>

	<dt>`~accessibilityの考慮点$</dt>
	<dd>
`dialog$AA
◎
For authors.
For implementers.
</dd>

	<dt>`~DOM~interface$</dt>
	<dd>

<pre class="idl">
[Exposed=Window]
interface `HTMLDialogElement@I : `HTMLElement$I {
  [`HTMLConstructor$] constructor();

  [`CEReactions$] attribute boolean ``open$m;
  attribute DOMString ``returnValue$m;
  [`CEReactions$] attribute DOMString ``closedBy$m;
  [`CEReactions$] undefined ``show$m();
  [`CEReactions$] undefined ``showModal$m();
  [`CEReactions$] undefined ``close$m(optional DOMString %returnValue);
  [`CEReactions$] undefined ``requestClose$m(optional DOMString %returnValue);
};
</pre>

	</dd>
</dl>

<p>
`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.
</p>

<p>
とりわけ，~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.
</p>

<p class="note">注記：
`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.
</p>

<p>
~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.
</p>

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

`dialog-1^xCode

<p>
`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.
</p>

<p>
作者が，既定では製品番号~欄を~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).
</p>
</div>

<p>
利用者が直面する挙動を成す別の重要な側面は、
~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.
</p>

<div class="example">
<p>
次の~service約款~dialogは、
上の示唆を尊重する：
◎
The following terms of service dialog respects the above suggestions.
</p>

`dialog-2^xCode

<p>
既定では，［
`~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.
</p>

<p>
対照的に、
~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.
</p>
</div>

<div class="example">
<p>
次の~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.
</p>

`dialog-3^xCode
</div>

<hr>

<p>
`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.
</p>

<p>
``closedby@a
内容~属性は、
`列挙d属性$であり，
次に挙げる~keyword, とり得る状態, それらの対応付けが定義される：
◎
The closedby content attribute is an enumerated attribute with the following keywords and states:
</p>

<div>
<table><thead><tr>
<th>~keyword
<th>状態
<th>概略的な記述
<tbody>

<tr><td>`any@v
<td>`何でも@st
<td>
［
`閉-要請$／外側の~click
］は、
当の~dialogを閉じる。

<tr><td>`closerequest@v
<td>`閉-要請@st
<td>
`閉-要請$は、
当の~dialogを閉じる。

<tr><td>`none@v
<td>`なし@st
<td>
当の~dialogを自動的に閉じるような利用者-動作は、
無い。

<tr><td>
<td>`自動@st
<td>
［
当の~dialogが ``showModal()$m ~methodを利用して示された
］ときは `閉-要請$st として，
他の場合は `なし$st として挙動する。
</table>

<p>
``closedby$a 属性の［
`欠落~値~用の既定の状態$, `妥当でない値~用の既定の状態$
］は、
いずれも `自動$st とする。
</p>
◎
Keyword｜State｜Brief description
any｜Any｜Close requests or clicks outside close the dialog.
closerequest｜Close Request｜Close requests close the dialog.
none｜None｜No user actions automatically close the dialog.
◎
The closedby attribute's invalid value default and missing value default are both the Auto state.
◎
The Auto state behaves as Close Request state when the dialog was shown using its showModal() method; otherwise the None state.
</div>

<p>
``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.
</p>

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

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

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

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

<hr>

<dl class="domintro">
	<dt>%dialog.``show()$m</dt>
	<dd>
`dialog$e 要素を表示する。
◎
Displays the dialog element.
</dd>

	<dt>%dialog.``showModal()$m</dt>
	<dd>
`dialog$e 要素を表示して，それを最上層な~modal~dialogにする。
◎
Displays the dialog element and makes it the top-most modal dialog.
</dd>
	<dd>
この~methodは、
`autofocus$a 属性を尊守する。
◎
This method honors the autofocus attribute.
</dd>

	<dt>%dialog.``close([ result ])$m</dt>
	<dd>
`dialog$e 要素を閉じる。
◎
Closes the dialog element.
</dd>
	<dd>
引数は、
供されたならば，
`dialog$e の`結果値$dGを与える。
◎
The argument, if provided, provides a return value.
</dd>

	<dt>%dialog.``requestClose([ result ])$m</dt>
	<dd>
%dialog を~targetにする`閉-要請$が送信されたかのように動作する
— まず `cancel$et ~eventを発火して、
それが `preventDefault()$m で取消されなかった場合には，
%dialog を ``close()$m ~methodと同じ仕方で閉じる
（ `close$et ~eventを発火することも含む）
よう続行することにより。
◎
Acts as if a close request was sent targeting dialog, by first firing a cancel event, and if that event is not canceled with preventDefault(), proceeding to close the dialog in the same way as the close() method (including firing a close event).
</dd>
	<dd>
これは、［
`閉-要請$でない閉-用の~affordanceすべてが，この~methodの~callを経るようにする
］ことにより，［［
取消n／閉-
］用の~logicを［
`cancel$et ／ `close$et
］~event~handlerの中へ~~統合する
］ために利用できる~~便利用にある。
◎
This is a helper utility that can be used to consolidate cancelation and closing logic into the cancel and close event handlers, by having all non-close request closing affordances call this method.
</dd>
	<dd>
この~methodは、
``closedby$a 属性を無視することに注意
— すなわち、
それが `none$v に設定されていた場合でも，
同じ挙動が適用されることになる。
◎
Note that this method ignores the closedby attribute: that is, even if closedby is set to "none", the same behavior will apply.
</dd>
	<dd>
引数は、
供されたならば， %dialog の`閉-要請の返り値$dGを供する。
◎
The argument, if provided, provides a return value.
</dd>

	<dt>%dialog.``returnValue$m [ = %result ]</dt>
	<dd>
`dialog$e の`結果値$dGを返す。
◎
Returns the dialog's return value.
</dd>
	<dd>
設定して，`結果値$dGを更新できる。
◎
Can be set, to update the return value.
</dd>
</dl>

<div class="algo">
<p>
``show()@m
~method手続きは：
◎
The show() method steps are:
</p>
<ol>
	<li>
<p>
~IF［
コレは ``open$a 属性を有する
］：
</p>
		<ol>
			<li>
~IF［
コレの`~modalか$dG ~EQ ~F
］
⇒
~RET
</li>
			<li>
~THROW `InvalidStateError$E
</li>
		</ol>
◎
If this has an open attribute and is modal of this is false, then return.
◎
If this has an open attribute, then throw an "InvalidStateError" DOMException.
</li>
	<li>
%取消されなかったか ~LET `~eventを発火する$( コレ, `beforetoggle$et, `ToggleEvent$I )
— 次のように初期化して
⇒＃
`cancelable$m 属性 ~SET ~T,
`oldState$m 属性 ~SET `closed^l,
`newState$m 属性 ~SET `open^l
◎
If the result of firing an event named beforetoggle, using ToggleEvent, with the cancelable attribute initialized to true, the oldState attribute initialized to "closed", and the newState attribute initialized to "open" at this＼
</li>
	<li>
<p>
~IF［
~OR↓
］…
</p>
		<ul>
			<li>
%取消されなかったか ~EQ ~F
</li>
			<li>
コレは ``open$a 属性を有する
</li>
		</ul>
<p>
…ならば
⇒
~RET
</p>
◎
is false, then return.
◎
If this has an open attribute, then return.
</li>
	<li>
`~dialog用の~toggle~event~taskを~queueする$( コレ, `closed^l, `open^l )
◎
Queue a dialog toggle event task given this, "closed", and "open".
</li>
	<li>
コレの`属性~値を設定する$( `open^l, 空~文字列 )
【！コレに［値に空~文字列を伴う ``open$a 属性］を追加する】
◎
Add an open attribute to this, whose value is the empty string.
</li>
	<li>
%文書 ~LET コレの`~node文書$
◎
↓</li>
	<li>
~Assert：
コレ ~NIN %文書 の`開な~dialog~list$doc
◎
Assert: this's node document's open dialogs list does not contain this.
</li>
	<li>
%文書 の`開な~dialog~list$docにコレを`付加する$【！add】
◎
Add this to this's node document's open dialogs list.
</li>
	<li>
`~dialog用の閉-注視器を設定する$( コレ )
◎
Set the dialog close watcher with this.
</li>
	<li>
コレの`前回に~focusされた要素$ ~SET `~focusされて$いる要素
◎
Set this's previously focused element to the focused element.
</li>
	<li>
<p>
« `hint^l, `auto^l »
を成す
~EACH( %~mode )
に対し：
</p>
		<ol>
			<li>
%~popover~list ~LET `文書が示している~popover~listを取得する$( %文書, %~mode )
</li>
			<li>
%ある所 ~SET `最上層な~popover先祖を見出す$( コレ, %~popover~list, ~NULL, ~F )
</li>
			<li>
~IF［
%ある所 ~NEQ ~NULL
］
⇒
~BREAK
</li>
		</ol>
◎
↑ Let document be this's node document.
◎
Let hideUntil be the result of running topmost popover ancestor given this, document's showing hint popover list, null, and false.
◎
If hideUntil is null, then set hideUntil to the result of running topmost popover ancestor given this, document's showing auto popover list, null, and false.
</li>
	<li>
~IF［
%ある所 ~EQ ~NULL
］
⇒
%ある所 ~SET %文書
◎
If hideUntil is null, then set hideUntil to document.
</li>
	<li>
`ある所までの~popoverをすべて隠す$( %ある所, ~F, ~T )
◎
Run hide all popovers until given hideUntil, false, and true.
</li>
	<li>
`~dialogを~focusする$( コレ )
◎
Run the dialog focusing steps given this.
</li>
</ol>
</div>

<div class="algo">
``showModal()@m
~method手続きは
⇒
`~modal~dialogを示す$( コレ )
◎
The showModal() method steps are to show a modal dialog given this.
</div>

<div class="algo">
``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.
</div>

<div class="algo">
<p>
``requestClose(returnValue)@m
~method手続きは：
◎
The requestClose(returnValue) method steps are:
</p>
<ol>
	<li>
~IF［
コレは ``open$a 属性を有していない
］
⇒
~RET
◎
If this does not have an open attribute, then return.
</li>
	<li>
~Assert：
コレの`閉-注視器$dG ~NEQ ~NULL
◎
Assert: this's close watcher is not null.
</li>
	<li>
コレ【！dialog】の`閉-要請~method用の閉-注視器を可能化するか$dG ~SET ~T
◎
Set dialog's enable close watcher for requestClose() to true.
</li>
	<li>
~IF［
%returnValue ~EQ ε
］
⇒
%returnValue ~SET ~NULL
◎
If returnValue is not given, then set it to null.
</li>
	<li>
コレの`閉-要請の返り値$dG ~SET %returnValue
◎
Set this's request close return value to returnValue.
</li>
	<li>
`閉-注視器に閉じるよう要請する$( %dialog の`閉-注視器$dG, ~F )
◎
Request to close dialog's close watcher with false.
</li>
	<li>
%dialog の`閉-要請~method用の閉-注視器を可能化するか$dG ~SET ~F
◎
Set dialog's enable close watcher for requestClose() to false.
</li>
</ol>
</div>

<div class="note" id="note-dialog-method-names">
<p>注記：
`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:
</p>
<ul>
	<li>
~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.)
</li>
	<li>
~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.
</li>
	<li>
にもかかわらず，
`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.
</li>
</ul>

<p>
さらには，［
`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.
</p>

<p>
要約すると、［
ある種の動詞の含意,
それらが技術~文脈において どう利用されるか
］によっては，
~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.
</p>
</div>

<p>
``returnValue@m
~IDL属性の：
◎
The returnValue IDL attribute,＼
</p>
<ul>
	<li class="algo">
取得子~手続きは
⇒
~RET コレの`結果値$dG
◎
on getting, must return the last value to which it was set.＼
</li>
	<li class="algo">
設定子~手続きは
⇒
コレの`結果値$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.
</li>
</ul>

<p>
``closedBy@m
~IDL属性の：
◎
↓</p>
<ul>
	<li class="algo">
<p>
取得子~手続きは：
</p>
		<ol>
			<li>
%状態 ~LET `~dialogの~closed-by状態を算出する$( コレ )
</li>
			<li>
~Assert：
%状態 ~NEQ `自動$st
</li>
			<li>
~RET ``closedby$a 内容~属性~用の~keywordのうち %状態 に対応するもの
</li>
		</ol>
◎
The closedBy getter steps are to return the keyword corresponding to the computed closed-by state given this.
</li>
	<li class="algo">
設定子~手続きは
⇒
コレの`属性~値を設定する$( "``closedby$a", 所与の値 )
【！コレの ``closedby$a 内容~属性の値 ~SET 所与の値】
◎
The closedBy setter steps are to set the closedby content attribute to the given value.
</li>
</ul>

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

<hr>

<p>
各`文書$は、
`~dialog~pointerdown~target@doc
を有する
— それは、［
~NULL ／ `HTMLDialogElement$I
］であり，初期~時は ~NULL とする。
◎
Each Document has a dialog pointerdown target, which is an HTML dialog element or null, initially null.
</p>

<p>
各 `~HTML要素$ %要素 には、
`前回に~focusされた要素@
が結付けられる。
それは、［
~NULL ／ 要素
］であり，初期~時は ~NULL とする
— これは：
◎
Each HTML element has a previously focused element which is null or an element, and it is initially null.＼
</p>
<ul>
	<li>
%要素 に対し［
``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.＼
</li>
	<li>
%要素 が `popover$a 属性を有する場合、
`~popoverを示す$間に現在`~focusされて$いる要素に設定される。
◎
Elements with the popover attribute set this element to the currently focused element during the show popover algorithm.
</li>
</ul>

<p>
各 `dialog$e 要素には、
次に挙げるものが結付けられる：
◎
↓</p>
<ul>
	<li>
<p>
`結果値@dG
⇒
文字列
— 初期~時は空~文字列とする。
</p>

<p class="trans-note">【
これは、
この訳にて導入した用語。
原文では、
（~markupなしに） “`return value^en” と記されていて，
（~algoの） “返り値” と紛らわしいので。
それに伴い，初期~値の要件も ``returnValue$m ~IDL属性の記述から ここに移動している。
】</p>
	</li>
	<li>
`~toggle~task追跡子@dG
⇒
~NULL ／ある`~toggle~task追跡子$
— 初期~時は ~NULL とする。
◎
Each dialog element has a dialog toggle task tracker, which is a toggle task tracker or null, initially null.
</li>
	<li>
`閉-注視器@dG
⇒
~NULL ／ある`閉-注視器$
— 初期~時は ~NULL とする。
◎
Each dialog element has a close watcher, which is a close watcher or null, initially null.
</li>
	<li>
`閉-要請の返り値@dG
⇒
【~NULL ／】 文字列
— 初期~時は~NULL とする。
◎
Each dialog element has a request close return value, which is a string, initially null.
</li>
	<li>
`閉-要請~method用の閉-注視器を可能化するか@dG
⇒
真偽値
— 初期~時は ~F とする。
◎
Each dialog element has an enable close watcher for requestClose() boolean, initially false.
</li>
	<li>
`~modalか@dG
⇒
真偽値
— 初期~時は ~F とする。
◎
Each dialog element has an is modal boolean, initially false.
</li>
</ul>

<hr>

<div class="algo">
<p>
`dialog$e 要素~用の`~HTML要素~除去-時の手続き$は、
所与の
( %除去される~node, %旧-親 )
に対し：
◎
The dialog HTML element removing steps, given removedNode and oldParent, are:
</p>
<ol>
	<li>
<p>
~IF［
%除去される~node の`閉-注視器$dG ~NEQ ~NULL
］：
◎
If removedNode's close watcher is not null, then:
</p>
		<ol>
			<li>
`閉-注視器を破壊する$( %除去される~node の`閉-注視器$dG )
◎
Destroy removedNode's close watcher.
</li>
			<li>
%除去される~node の`閉-注視器$dG ~SET ~NULL
◎
Set removedNode's close watcher to null.
</li>
		</ol>
	</li>
	<li>
~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.
</li>
	<li>
%除去される~node の`~modalか$dG ~SET ~F
◎
Set is modal of removedNode to false.
</li>
	<li>
%除去される~node の`~node文書$の`開な~dialog~list$docから %除去される~node を`除去する$
◎
Remove removedNode from removedNode's node document's open dialogs list.
</li>
</ol>
</div>

<div class="algo">
<p>
`~modal~dialogを示す@
~algoは、
所与の
( `dialog$e 要素 %dialog )
に対し：
◎
To show a modal dialog given a dialog element subject:
</p>
<ol>
	<li>
~IF［
%dialog は ``open$a 属性を有する
］~AND［
%dialog の`~modalか$dG ~EQ ~T
］
⇒
~RET
◎
If subject has an open attribute and is modal of subject is true, then return.
</li>
	<li>
<p>
~IF［
~OR↓
］…
</p>
		<ul>
			<li>
%dialog は ``open$a 属性を有する
</li>
			<li>
%dialog の`~node文書$は`全部的に作動中$でない
</li>
			<li>
%dialog は`接続されて$いない
</li>
			<li>
%dialog の`~popover可視性~状態$ ~EQ `示している$i
</li>
		</ul>
<p>
…ならば
⇒
~THROW `InvalidStateError$E
</p>
◎
If subject has an open attribute, then throw an "InvalidStateError" DOMException.
◎
If subject's node document is not fully active, then throw an "InvalidStateError" DOMException.
◎
If subject is not connected, then throw an "InvalidStateError" DOMException.
◎
If subject is in the popover showing state, then throw an "InvalidStateError" DOMException.
</li>
	<li>
%取消されなかったか ~LET `~eventを発火する$( %dialog, `beforetoggle$et, `ToggleEvent$I )
— 次のように初期化して
⇒＃
`cancelable$m 属性 ~SET ~T,
`oldState$m 属性 ~SET `closed^l,
`newState$m 属性 ~SET `open^l
◎
If the result of firing an event named beforetoggle, using ToggleEvent, with the cancelable attribute initialized to true, the oldState attribute initialized to "closed", and the newState attribute initialized to "open" at subject＼
</li>
	<li>
<p>
~IF［
~OR↓
］…
</p>
		<ul>
			<li>
%取消されなかったか ~EQ ~F
</li>
			<li>
%dialog は ``open$a 属性を有する
</li>
			<li>
%dialog は`接続されて$いない
</li>
			<li>
%dialog の`~popover可視性~状態$ ~EQ `示している$i
</li>
		</ul>
<p>
…ならば
⇒
~RET
</p>
◎
is false, then return.
◎
If subject has an open attribute, then return.
◎
If subject is not connected, then return.
◎
If subject is in the popover showing state, then return.
</li>
	<li>
`~dialog用の~toggle~event~taskを~queueする$( %dialog, `closed^l, `open^l )
◎
Queue a dialog toggle event task given subject, "closed", and "open".
</li>
	<li>
%dialog の`属性~値を設定する$( `open^l, 空~文字列 )
【！%dialog に値に空~文字列を伴う ``open$a 属性を追加する】
◎
Add an open attribute to subject, whose value is the empty string.
</li>
	<li>
%dialog の`~modalか$dG ~SET ~T
◎
Set is modal of subject to true.
</li>
	<li>
%文書 ~LET %dialog の`~node文書$
◎
↓</li>
	<li>
~Assert：
%dialog ~NIN %文書 の`開な~dialog~list$doc
◎
Assert: subject's node document's open dialogs list does not contain subject.
</li>
	<li>
%文書 の`開な~dialog~list$docに %dialog を`付加する$【！add】
◎
Add subject to subject's node document's open dialogs list.
</li>
	<li>
<p>
%dialog を %文書 を`阻んでいる~modal~dialog$にする
◎
Let subject's node document be blocked by the modal dialog subject.
</p>

<p class="note" id="note-dialog-plus-focus-fixup">注記：
これは、
%文書 が`指名する被focus区画$docを`不活$にする
（現在の被focus区画が %dialog の`~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.
</p>
	</li>
	<li>
~IF［
%dialog ~NIN %文書 の`上端~層$
］
⇒
`上端~層に要素を追加する$( %dialog )
◎
If subject's node document's top layer does not already contain subject, then add an element to the top layer given subject.
</li>
	<li>
`~dialog用の閉-注視器を設定する$( %dialog )
◎
Set the dialog close watcher with subject.
</li>
	<li>
%dialog の`前回に~focusされた要素$ ~SET `~focusされて$いる要素
◎
Set subject's previously focused element to the focused element.
</li>
	<li>
<p>
« `hint^l, `auto^l »
を成す
~EACH( %~mode )
に対し：
</p>
		<ol>
			<li>
%~popover~list ~LET `文書が示している~popover~listを取得する$( %文書, %~mode )
</li>
			<li>
%ある所 ~SET `最上層な~popover先祖を見出す$( %dialog, %~popover~list, ~NULL, ~F )
</li>
			<li>
~IF［
%ある所 ~NEQ ~NULL
］
⇒
~BREAK
</li>
		</ol>
◎
↑ Let document be subject's node document.
◎
Let hideUntil be the result of running topmost popover ancestor given subject, document's showing hint popover list, null, and false.
◎
If hideUntil is null, then set hideUntil to the result of running topmost popover ancestor given subject, document's showing auto popover list, null, and false.
</li>
	<li>
~IF［
%ある所 ~EQ ~NULL
］
⇒
%ある所 ~SET %文書
◎
If hideUntil is null, then set hideUntil to document.
</li>
	<li>
`ある所までの~popoverをすべて隠す$( %ある所, ~F, ~T )
◎
Run hide all popovers until given hideUntil, false, and true.
</li>
	<li>
`~dialogを~focusする$( %dialog )
◎
Run the dialog focusing steps given subject.
</li>
</ol>
</div>

<div class="algo">
<p id="canceling-dialogs">
`~dialog用の閉-注視器を設定する@
~algoは、
所与の
( `dialog$e 要素 %dialog )
に対し：
◎
To set the dialog close watcher, given a dialog element dialog:
</p>
<ol>
	<li>
<p>
%dialog の`閉-注視器$dG ~SET `閉-注視器を確立する$( %dialog に`関連な大域~obj$ )
— 次も与える下で：
◎
Set dialog's close watcher to the result of establishing a close watcher given dialog's relevant global object, with:
</p>
		<ul>
			<li class="algo">
`取消-動作^i は、
所与の
( %閉-を防止し得るか )
に対し
⇒
`~eventを発火する$( %dialog, `cancel$et )
— 次のように初期化して
⇒＃
`cancelable$m 属性 ~SET %閉-を防止し得るか
◎
cancelAction given canPreventClose being to return the result of firing an event named cancel at dialog, with the cancelable attribute initialized to canPreventClose.
</li>
			<li class="algo">
`閉-動作^i は
⇒
`~dialogを閉じる$( %dialog, %dialog の`閉-要請の返り値$dG )
◎
closeAction being to close the dialog given dialog and dialog's request close return value.
</li>
			<li class="algo">
`可能化~状態を取得する^i は
⇒
~RET ~IS［
%dialog の`閉-要請~method用の閉-注視器を可能化するか$dG ~EQ ~T
］~OR［
`~dialogの~closed-by状態を算出する$( %dialog ) ~NEQ `なし$st
］
◎
getEnabledState being to return true if dialog's enable close watcher for requestClose() is true or dialog's computed closed-by state is not None; otherwise false.
</li>
		</ul>
	</li>
</ol>
</div>

<div class="algo">
`dialog$e 要素~用の
`呼出元~commandは妥当か？手続き$
は、
所与の
( `command$a 属性 %~command )
に対し
⇒
~RET ~IS［
%~command の状態 ~IN { `閉じる$st, `~modalを示す$st }
］
◎
The is valid invoker command steps for dialog elements, given a command attribute command, are:
• If command is in the Close state or in the Show Modal state, then return true.
• Return false.
</div>

<div class="algo">
<p>
`dialog$e 要素~用の`呼出元~command手続き$は、
所与の
( 要素 %dialog, 要素 %呼出元, `command$a 属性 %~command )
に対し：
◎
The invoker command steps for dialog elements, given an element element, an element invoker, and a command attribute command, are:
</p>
<ol>
	<li>
~IF［
%dialog の`~popover可視性~状態$ ~EQ `示している$i
］
⇒
~RET
◎
If element is in the popover showing state, then return.
</li>
	<li>
~IF［
%~command の状態 ~EQ `閉じる$st
］~AND［
%dialog は ``open$a 属性を有する
］
⇒
`~dialogを閉じる$( %dialog, %呼出元 の`値$fe )
◎
If command is in the Close state and element has an open attribute:
• Let value be invoker's value.
• Close the dialog element with value.
</li>
	<li>
~IF［
%~command の状態 ~EQ `~modalを示す$st
］~AND［
%dialog は ``open$a 属性を有さない
］
⇒
`~modal~dialogを示す$( %dialog )
◎
If command is the Show Modal state and element does not have an open attribute, then show a modal dialog given element.
</li>
</ol>
</div>

<div class="example">
<p>
次の~buttonは、
 `commandfor$a 属性を利用して，
“確認-用の” `dialog$e が作動化されたとき~modalとして開く（閉じる）ようにする：
◎
The following buttons use commandfor to open and close a "confirm" dialog as modal when activated:
</p>

`dialog-4^xCode
</div>

<div class="algo">
<p>
`~dialogを閉じる@
~algoは、
所与の
( `dialog$e 要素 %dialog, ［
~NULL ／文字列
］ %結果 )
に対し：
◎
When a dialog element subject is to be closed, with null or a string result, run these steps:
</p>
<ol>
	<li>
~IF［
%dialog は ``open$a 属性を有さない
］
⇒
~RET
◎
If subject does not have an open attribute, then return.
</li>
	<li>
`~eventを発火する$( %dialog, `beforetoggle$et, `ToggleEvent$I )
— 次のように初期化して
⇒＃
`oldState$m 属性 ~SET `open^l,
`newState$m 属性 ~SET `closed^l
◎
Fire an event named beforetoggle, using ToggleEvent, with the oldState attribute initialized to "open" and the newState attribute initialized to "closed" at subject.
</li>
	<li>
~IF［
%dialog は ``open$a 属性を有さない
］
⇒
~RET
◎
If subject does not have an open attribute, then return.
</li>
	<li>
`~dialog用の~toggle~event~taskを~queueする$( コレ【！subject】, `open^l, `closed^l )
◎
Queue a dialog toggle event task given subject, "open", and "closed".
</li>
	<li>
%dialog から ``open$a `属性を除去する$
◎
Remove subject's open attribute.
</li>
	<li>
~IF［
%dialog の`~modalか$dG ~EQ ~T
］
⇒
`上端~層から要素を除去するよう要請する$( %dialog )
◎
If is modal of subject is true, then request an element to be removed from the top layer given subject.
</li>
	<li>
%~modalであったか ~LET %dialog の`~modalか$dG
◎
Let wasModal be the value of subject's is modal flag.
</li>
	<li>
%dialog の`~modalか$dG ~SET ~F
◎
Set is modal of subject to false.
</li>
	<li>
%dialog の`~node文書$ の`開な~dialog~list$docから %dialog を`除去する$
◎
Remove subject from subject's node document's open dialogs list.
</li>
	<li>
~IF［
%結果 ~NEQ ~NULL
］
⇒
%dialog の `結果値$dG ~SET %結果
◎
If result is not null, then set the returnValue attribute to result.
</li>
	<li>
【 %dialog の】`閉-要請の返り値$dG ~SET ~NULL
◎
Set the request close return value to null.
</li>
	<li>
<p>
~IF［
%dialog の`前回に~focusされた要素$ ~NEQ ~NULL
］：
◎
If subject's previously focused element is not null, then:
</p>
		<ol>
			<li>
%要素 ~LET %dialog の`前回に~focusされた要素$
◎
Let element be subject's previously focused element.
</li>
			<li>
%dialog の`前回に~focusされた要素$ ~SET ~NULL
◎
Set subject's previously focused element to null.
</li>
			<li>
<p>
~IF［
%dialog の`~node文書$が`指名する被focus区画$docの`~DOM~anchor$は，
%dialog の`~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 subject, or wasModal is true, then run the focusing steps for element;＼
</p>

<p>
この段を行うときは、
表示域は~scrollされるベキでない。
◎
the viewport should not be scrolled by doing this step.
</p>
			</li>
		</ol>
	</li>
	<li>
<p>
`要素~taskを~queueする$( `利用者ヤリトリ~task~source$, %dialog, 次の手続き )
</p>
<div class="algo">
手続きは
⇒
`~eventを発火する$( %dialog, `close$et )
</div>
◎
Queue an element task on the user interaction task source given the subject element to fire an event named close at subject.
</li>
	<li>
<p>
~IF［
%dialog の`閉-注視器$dG ~NEQ ~NULL
］：
◎
If subject's close watcher is not null, then:
</p>
		<ol>
			<li>
`閉-注視器を破壊する$( %dialog の`閉-注視器$dG )
◎
Destroy subject's close watcher.
</li>
			<li>
%dialog の`閉-注視器$dG ~SET ~NULL
◎
Set subject's close watcher to null.
</li>
		</ol>
	</li>
</ol>
</div>

<div class="algo">
<p>
`~dialog用の~toggle~event~taskを~queueする@
~algoは、
所与の
( `dialog$e 要素 %dialog, 文字列 %旧-状態, 文字列 %新-状態 )
に対し：
◎
To queue a dialog toggle event task given a dialog element element, a string oldState, and a string newState:
</p>
<ol>
	<li>
<p>
~IF［
%dialog の`~toggle~task追跡子$dG ~NEQ ~NULL
］：
◎
If element's dialog toggle task tracker is not null, then:
</p>
		<ol>
			<li>
%旧-状態 ~SET %dialog の`~toggle~task追跡子$dGの`旧-状態$tTk
◎
Set oldState to element's dialog toggle task tracker's old state.
</li>
			<li>
%dialog の`~toggle~task追跡子$dGの`~task$tTkを それが属する`~task~queue$から除去する
◎
Remove element's dialog toggle task tracker's task from its task queue.
</li>
			<li>
%dialog の`~toggle~task追跡子$dG ~SET ~NULL
◎
Set element's dialog toggle task tracker to null.
</li>
		</ol>
	</li>
	<li>
<p>
%~task ~LET `要素~taskを~queueする$( `~DOM操作~task~source$, %dialog, 次の手続き )
◎
Queue an element task given the DOM manipulation task source and element to＼
</p>

<div class="algo">
<p>
手続きは：
◎
run the following steps:
</p>
		<ol>
			<li>
`~eventを発火する$( %dialog, `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.
</li>
			<li>
%dialog の`~toggle~task追跡子$dG ~SET ~NULL
◎
Set element's dialog toggle task tracker to null.
</li>
		</ol>
</div>
	</li>
	<li>
%dialog の`~toggle~task追跡子$dG ~SET 次を伴う構造体
⇒＃
`~task$tTk ~SET %~task,
`旧-状態$tTk ~SET %旧-状態
◎
Set element's dialog toggle task tracker to a struct with task set to the just-queued task and old state set to oldState.
</li>
</ol>
</div>

<div class="algo">
<p>
`~dialogの~closed-by状態を算出する@
~algoは、
所与の
( `dialog$e %dialog )
に対し：
◎
To retrieve a dialog's computed closed-by state, given a dialog dialog:
</p>
<ol>
	<li>
%状態 ~LET %dialog の ``closedby$a 属性の状態
◎
↓</li>
	<li>
<p>
~IF［
%状態 ~EQ `自動$st
］：
◎
If the state of dialog's closedby attribute is Auto:
</p>
		<ol>
			<li>
~IF［
%dialog の`~modalか$dG ~EQ ~T
］
⇒
~RET `閉-要請$st
◎
If dialog's is modal is true, then return Close Request.
</li>
			<li>
~RET `なし$st
◎
Return None.
</li>
		</ol>
	</li>
	<li>
~RET %状態
◎
Return the state of dialog's closedby attribute.
</li>
</ol>
</div>

<div class="algo">
<p>
`~dialogを~focusする@
~algoは、
所与の
( `dialog$e 要素 %dialog )
に対し：
◎
The dialog focusing steps, given a dialog element subject, are as follows:
</p>
<ol>
	<li>
~IF［
`~focusを許容する手続き$( %dialog の`~node文書$ ) ~EQ ~F
］
⇒
~RET ~F
◎
If the allow focus steps given subject's node document return false, then return.
</li>
	<li>
%~control ~LET ~NULL
◎
Let control be null.
</li>
	<li>
~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.
</li>
	<li>
~IF［
%~control ~EQ ~NULL
］
⇒
%~control ~SET %dialog
◎
If control is null, then set control to subject.
</li>
	<li>
<p>
`~objを~focusする$( %~control )
◎
Run the focusing steps for control.
</p>

<p class="note">注記：
%~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.
</p>
	</li>
	<li>
%~top文書 ~LET %~control の`~node~navigable$の`~top-level辿可能$navにて`作動中な文書$nav
◎
Let topDocument be control's node navigable's top-level traversable's active document.
</li>
	<li>
~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.
</li>
	<li>
%~top文書 の`自動focus候補~群$を`空にする$
◎
Empty topDocument's autofocus candidates.
</li>
	<li>
%~top文書 の`自動focusは処理-済みか$ ~SET ~T
◎
Set topDocument's autofocus processed flag to true.
</li>
</ol>
</div>

			</section>
			<section id="dialog-light-dismiss">
<h4 title="Dialog light dismiss">4.11.5. ~dialogを軽く退ける</h4>

<p class="note">注記：
“軽く退ける（ `light dismiss^en ）” とは、
次を意味する
⇒
`dialog$e 要素のうち［
その ``closedby$a 属性の状態 ~EQ `何でも$st
］を満たすものに対し，当の要素の外側を~clickすると、
当の要素を閉じることになる。
◎終
このふるまいは、［
そのような `dialog$e が`閉-要請$に対しどう応答するか
］に対する追加である。
◎
"Light dismiss" means that clicking outside of a dialog element whose closedby attribute is in the Any state will close the dialog element. This is in addition to how such dialogs respond to close requests.
</p>

<div class="algo">
<p>
`開な~dialogたちを軽く退ける@
~algoは、
所与の
( `PointerEvent$I %~event )
に対し：
◎
To light dismiss open dialogs, given a PointerEvent event:
</p>
<ol>
	<li>
~Assert：
%~event の `isTrusted$m 属性 ~EQ ~T
◎
Assert: event's isTrusted attribute is true.
</li>
	<li>
~Assert：
%~event の`~target$ ~NEQ ~NULL
【この段は、この訳による補完。】
</li>
	<li>
%文書 ~LET %~event の`~target$の`~node文書$
◎
Let document be event's target's node document.
</li>
	<li>
~IF［
%文書 の`開な~dialog~list$docは`空$である
］
⇒
~RET
◎
If document's open dialogs list is empty, then return.
</li>
	<li>
%先祖 ~LET `最も近い~clickされた~dialogを見出す$( %~event )
◎
Let ancestor be the result of running nearest clicked dialog given event.
</li>
	<li>
~IF［
%~event の `type$m ~EQ "`pointerdown$et"
］
⇒
%文書 の`~dialog~pointerdown~target$doc ~SET %先祖
◎
If event's type is "pointerdown", then set document's dialog pointerdown target to ancestor.
</li>
	<li>
<p>
~ELIF［
%~event の `type$m ~EQ "`pointerup$et"
］：
◎
If event's type is "pointerup", then:
</p>
		<ol>
			<li>
%同じ~targetか ~LET ~IS［
%先祖 ~EQ %文書 の`~dialog~pointerdown~target$doc
］
◎
Let sameTarget be true if ancestor is document's dialog pointerdown target.
</li>
			<li>
%文書 の`~dialog~pointerdown~target$doc ~SET ~NULL
◎
Set document's dialog pointerdown target to null.
</li>
			<li>
~IF［
%同じ~targetか ~EQ ~F
］
⇒
~RET
◎
If sameTarget is false, then return.
</li>
			<li>
%最上層な~dialog ~LET %文書 の`開な~dialog~list$docを成す最後の要素
◎
Let topmostDialog be the last element of document's open dialogs list.
</li>
			<li>
~IF［
%先祖 ~EQ %最上層な~dialog
］
⇒
~RET
◎
If ancestor is topmostDialog, then return.
</li>
			<li>
~IF［
`~dialogの~closed-by状態を算出する$( %最上層な~dialog ) ~NEQ `何でも$st
］
⇒
~RET
◎
If topmostDialog's computed closed-by state is not Any, then return.
</li>
			<li>
~Assert：
%最上層な~dialog の`閉-注視器$dG ~NEQ ~NULL
◎
Assert: topmostDialog's close watcher is not null.
</li>
			<li>
`閉-注視器に閉じるよう要請する$( %最上層な~dialog の`閉-注視器$dG, ~F )
◎
Request to close topmostDialog's close watcher with false.
</li>
		</ol>
	</li>
</ol>
</div>

<div class="algo">
<p>
`軽く退けるふるまいを走らす@
~algoは、
所与の
( `PointerEvent$I %~event )
に対し：
◎
To run light dismiss activities, given a PointerEvent event:
</p>
<ol>
	<li>
`開な~popoverたちを軽く退ける$( %~event )
◎
Run light dismiss open popovers with event.
</li>
	<li>
`開な~dialogたちを軽く退ける$( %~event )
◎
Run light dismiss open dialogs with event.
</li>
</ol>

<p class="XXX">
`軽く退けるふるまいを走らす$は、
利用者が~page上のどこでも［
~clickした／~touchした
］ときに，
`POINTEREVENTS$r 仕様により`~callされることになる＠https://github.com/w3c/pointerevents/pull/460$。
◎
Run light dismiss activities will be called by the Pointer Events spec when the user clicks or touches anywhere on the page.
</p>
</div>

<div class="algo">
<p>
`最も近い~clickされた~dialogを見出す@
~algoは、
所与の
( `PointerEvent$I %~event )
に対し：
◎
To find the nearest clicked dialog, given a PointerEvent event:
</p>
<ol>
	<li>
%~target ~LET %~event の`~target$
◎
Let target be event's target.
</li>
	<li>
<p>
~IF［
~AND↓
］…
</p>
		<ul>
			<li>
%~target は `dialog$e 要素である
</li>
			<li>
%~target は ``open$a 属性を有している
</li>
			<li>
%~target の`~modalか$dG ~EQ ~T
</li>
			<li>
<p>
%~event の
( `clientX＠~CSSOMVIEW#dom-mouseevent-clientx$m, `clientY＠~CSSOMVIEW#dom-mouseevent-clienty$m )
は、
%~target の限界域の外側にある
</p>

<p class="note">注記：
この条件は、［
%~event が当の~dialogの `backdrop$pe 疑似要素で生じたものである場合
］でも［
%~target は当の `dialog$e 要素になる
］ことから必要になる。
</p>
			</li>
		</ul>
<p>
…ならば
⇒
~RET ~NULL
</p>
◎
If target is a dialog element, target has an open attribute, target's is modal is true, and event's clientX and clientY are outside the bounds of target, then return null.
◎
The check for clientX and clientY is because a pointer event that hits the ::backdrop pseudo element of a dialog will result in event having a target of the dialog element itself.
</li>
	<li>
%現在の~node ~LET %~target
◎
Let currentNode be target.
</li>
	<li>
<p>
~WHILE［
%現在の~node ~NEQ ~NULL
］：
◎
While currentNode is not null:
</p>
		<ol>
			<li>
~IF［
%現在の~node は `dialog$e 要素である
~AND
%現在の~node は ``open$a 属性を有している
］
⇒
~RET %現在の~node
◎
If currentNode is a dialog element and currentNode has an open attribute, then return currentNode.
</li>
			<li>
%現在の~node ~SET `平坦~tree$における %現在の~node の親
◎
Set currentNode to currentNode's parent in the flat tree.
</li>
		</ol>
	</li>
	<li>
~RET ~NULL
◎
Return null.
</li>
</ol>
</div>

			</section>
		</section>
</main>