ACTION-89: Update the example dialog graphic to not show justification string in trusted UI
authorJames Craig <jcraig@apple.com>
Mon, 16 Jun 2014 00:19:37 -0700
changeset 214 d4387d414dbf
parent 213 1d6fe3283e9e
child 215 1fe082f83795
child 217 d8201cb8c363
ACTION-89: Update the example dialog graphic to not show justification string in trusted UI
src/indie-ui-context.html
--- a/src/indie-ui-context.html	Wed Jun 11 18:48:01 2014 -0700
+++ b/src/indie-ui-context.html	Mon Jun 16 00:19:37 2014 -0700
@@ -232,36 +232,42 @@
 					</pre>
 					<p>A user agent may render the prompt a number of ways, such as a non-blocking notification or a modal dialog.</p>
 					<figure>
-						<figcaption>Example dialog prompting user to confirm or deny access to media player settings.</figcaption>
+						<figcaption>Example dialog prompting user to confirm or deny access to media player settings. In the example graphic, the author-provided justification string is not shown in the "trusted" user interface by default.</figcaption>
 						<svg viewBox="144 230 310 170" width="310pt" height="170pt">
 							<g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1">
-								<title>Example dialog displaying site URL, details of the settings requested, an author-provided justification string, and buttons labeled Allow and Deny.</title>
+								<title>Example dialog displaying site URL, details of the settings requested, an author-provided justification string (hidden by default), and buttons labeled Allow and Deny.</title>
 								<g role="dialog" aria-labelledby="heading_id">
-									<rect x="155.88672" y="237.66406" width="287.0625" height="146.38281" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+									<rect aria-hidden="true" x="155.88672" y="237.66406" width="287.0625" height="146.38281" fill="white"/>
+									<rect aria-hidden="true" x="155.88672" y="237.66406" width="287.0625" height="146.38281" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
 									<g role="heading" aria-level="1" id="heading_id">
-										<rect x="155.91406" y="237.60938" width="287.03516" height="47.789062" fill="#dad7dd" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+										<rect aria-hidden="true" x="155.91406" y="237.60938" width="287.03516" height="47.789062" fill="#dad7dd"/>
+										<rect aria-hidden="true" x="155.91406" y="237.60938" width="287.03516" height="47.789062" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
 										<text transform="translate(184.71875 248.91406)" fill="black" role="text">
-											<tspan font-family="Helvetica" font-size="12" font-weight="bold" x="0" y="11" textLength="187">Share media player settings with</tspan>
-											<tspan font-family="Helvetica" font-size="12" font-weight="bold" x="0" y="25" textLength="154">https://www.example.com?</tspan>
-										</text>	
-									</g>
-									<text transform="translate(184.71875 294.91406)" fill="black" role="text">
-										<tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="223">Example Site uses your media settings to </tspan>
-										<tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="25" textLength="235">automatically enable captions or subtitles in </tspan>
-										<tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="39" textLength="131">your preferred language.</tspan>
-									</text>
-									<g role="button" id="allow_button" tabindex="0" aria-label="Allow">
-										<path d="M 381 344 L 417 344 C 421.97055 344 426 348.02945 426 353 L 426 360.53906 C 426 365.50961 421.97055 369.53906 417 369.53906 L 381 369.53906 C 376.02945 369.53906 372 365.50961 372 360.53906 C 372 360.53906 372 360.53906 372 360.53906 L 372 353 C 372 348.02945 376.02945 344 381 344 Z" fill="#81bbff" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
-										<text transform="translate(377 349.76953)" fill="black" role="text">
-											<tspan font-family="Helvetica" font-size="12" font-weight="500" fill="black" x="7.6621094" y="11" textLength="28.675781">Allow</tspan>
+											<tspan font-family="Helvetica" font-size="12" font-weight="bold" x="0" y="11" textLength="196.671875">The site https://www.example.com</tspan>
+											<tspan font-family="Helvetica" font-size="12" font-weight="bold" x="0" y="25" textLength="189.375">wants to use your media settings</tspan>
 										</text>
 									</g>
-									<g role="button" id="deny_button" tabindex="0" aria-label="Deny">
-										<path d="M 318 344 L 354 344 C 358.97055 344 363 348.02945 363 353 L 363 360.53906 C 363 365.50961 358.97055 369.53906 354 369.53906 L 318 369.53906 C 313.02945 369.53906 309 365.50961 309 360.53906 C 309 360.53906 309 360.53906 309 360.53906 L 309 353 C 309 348.02945 313.02945 344 318 344 Z" fill="#d9d9d9" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
-										<text transform="translate(314 349.76953)" fill="black" role="text">
+									<g role="checkbox" id="showdetails" aria-checked="false" aria-label="Show details" tabindex="0">
+										<path d="M 187.12498 314.4722 L 187.12498 308.24466 L 195.77635 311.15186 Z" fill="black"/>
+										<path d="M 187.12498 314.4722 L 187.12498 308.24466 L 195.77635 311.15186 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+										<text transform="translate(202.71875 303.91406)" fill="black">
+											<tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="68.039062">Show details</tspan>
+										</text>
+									</g>
+									<g role="button" id="allow" aria-label="Deny" tabindex="0">
+										<path d="M 309 335 L 345 335 C 349.97055 335 354 339.02945 354 344 L 354 351.53906 C 354 356.50961 349.97055 360.53906 345 360.53906 L 309 360.53906 C 304.02945 360.53906 300 356.50961 300 351.53906 C 300 351.53906 300 351.53906 300 351.53906 L 300 344 C 300 339.02945 304.02945 335 309 335 Z" fill="#d9d9d9"/>
+										<path d="M 309 335 L 345 335 C 349.97055 335 354 339.02945 354 344 L 354 351.53906 C 354 356.50961 349.97055 360.53906 345 360.53906 L 309 360.53906 C 304.02945 360.53906 300 356.50961 300 351.53906 C 300 351.53906 300 351.53906 300 351.53906 L 300 344 C 300 339.02945 304.02945 335 309 335 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+										<text transform="translate(305 340.76953)" fill="black">
 											<tspan font-family="Helvetica" font-size="12" font-weight="500" x="7.993164" y="11" textLength="28.013672">Deny</tspan>
 										</text>
 									</g>
+									<g role="button" id="allow" aria-label="Allow" tabindex="0">
+										<path d="M 372 335 L 408 335 C 412.97055 335 417 339.02945 417 344 L 417 351.53906 C 417 356.50961 412.97055 360.53906 408 360.53906 L 372 360.53906 C 367.02945 360.53906 363 356.50961 363 351.53906 C 363 351.53906 363 351.53906 363 351.53906 L 363 344 C 363 339.02945 367.02945 335 372 335 Z" fill="#81bbff"/>
+										<path d="M 372 335 L 408 335 C 412.97055 335 417 339.02945 417 344 L 417 351.53906 C 417 356.50961 412.97055 360.53906 408 360.53906 L 372 360.53906 C 367.02945 360.53906 363 356.50961 363 351.53906 C 363 351.53906 363 351.53906 363 351.53906 L 363 344 C 363 339.02945 367.02945 335 372 335 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+										<text transform="translate(368 340.76953)" fill="black">
+											<tspan font-family="Helvetica" font-size="12" font-weight="500" x="7.6621094" y="11" textLength="28.675781">Allow</tspan>
+										</text>
+									</g>
 								</g>
 							</g>
 						</svg>