Making SVG image inline HTML rather than link via img tag.
authorJames Craig <jcraig@apple.com>
Wed, 14 May 2014 17:07:38 -0700
changeset 199 5d77b6ee1006
parent 198 16d337a98b82
child 200 a02a750c339b
Making SVG image inline HTML rather than link via img tag.
src/indie-ui-context.html
--- a/src/indie-ui-context.html	Sun May 04 20:44:23 2014 -0700
+++ b/src/indie-ui-context.html	Wed May 14 17:07:38 2014 -0700
@@ -168,7 +168,7 @@
 						<dd>Key name for the requested user setting. E.g. 'user-font-size' or 'subtitles'</dd>
 					</dl>
 				</dd>
-			</pre>
+			</dl>
 
 		</section>
 		<!-- :::::::::::::::::::: END UserSettingListener :::::::::::::::::::: -->
@@ -233,7 +233,38 @@
 					<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>
-						<img src="./img/example_dialog.svg" width="465" height="255" alt="Example dialog displaying site URL, details of the settings requested, an author-provided justification string, and buttons labeled Allow and Deny.">
+						<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>
+								<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"/>
+									<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"/>
+										<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">
+										<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>
+										</text>
+									</g>
+									<g role="button" id="deny_button" tabindex="0">
+										<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">
+											<tspan font-family="Helvetica" font-size="12" font-weight="500" x="7.993164" y="11" textLength="28.013672">Deny</tspan>
+										</text>
+									</g>
+								</g>
+							</g>
+						</svg>
 					</figure>
 				</section>
 				<section class="informative">
@@ -1002,7 +1033,7 @@
 				<p>Web authors SHOULD NOT request any keys in this category unless the knowledge is essential to the operation of the web application, and web authors MUST provide a justification for the request as defined in @@ section.</p>
 
 				<div class="ednote">
-					<h5>Editorial Note on User Privacy</h3>
+					<h4>Editorial Note on User Privacy</h4>
 					<p>Due to community feedback related to privacy, this feature may be marked as at-risk or removed. The working group acknowledges its usefulness in complex web applications such as enterprise document-editing suites, but also acknowledges the fact that its utility may be easily misunderstood or potentially misused.</p>
 					<p>For example, the typing echo or other verbosity settings would be useful today, for sites such as Google Docs and iWork for iCloud. These applications use custom display views that are not able to be made accessible through conventional means, so speech output is controlled via live region announcements. The web application does not otherwise have access to user settings such as typing echo, so without access to this feature, the web application could not mimic the user's preferred output.</p>
 					<p>One potential misuse is for user metrics or tracking. Even with the <a href="http://www.marcozehe.de/2014/02/27/why-screen-reader-detection-on-the-web-is-a-bad-thing/comment-page-1/#comment-2466420">best of intentions</a>, this is a potentially harmful misuse of the API. There are currently very strict user <a href="#privacy-model">privacy model</a> requirements to implement this feature in a reasonably safe and secure way, but if the working group is not comfortable in the implementation's ability to sufficiently prevent this type of misuse, we will remove the feature.</p>