jquery-ui/tests/visual/dialog/form.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Dialog Visual Test</title>
	<link rel="stylesheet" href="../../../themes/base/all.css">
	<script src="../../../external/requirejs/require.js"></script>
	<script src="../../../demos/bootstrap.js">
		$( "#form-dialog, #prompt-dialog" ).dialog({
			autoOpen: false,
			modal: true
		});

		$( "#open-form" ).on( "click", function() {
			$( "#form-dialog" ).dialog( "open" );
		});

		$( "#open-prompt" ).on( "click", function() {
			$( "#prompt-dialog" ).dialog( "open" );
		});
	</script>
	<style>
	label {
		display: block;
	}
	</style>
</head>
<body>

<p>WHAT: A modal dialog containing form fields, with groups to describe each section. A second modal dialog with just an input and some text markup.</p>
<p>EXPECTED: Dialog shows up, screenreader reads the dialog's title, the word "dialog" (or equivalent), the text before the first input (description of the first section) and the label of the first, focused input. When tabbing to the next group, the screenreader should announce the description of that group, along with the label of the focused field.</p>
<p>For the second dialog, the behaviour should be similar, except that the whole content is read as the description of the dialog, likely causing the input's label to be read twice.</p>
<p>NOTE: Using <code>fieldset</code> with <code>legend</code> seems to have the same result as using <code>role="group"</code> and <code>aria-describedby</code>. The latter needs an id-attribute, offers more flexibilty in markup order and has no built-in styling.</p>

<div id="form-dialog" title="Profile Information">
	<fieldset>
		<legend>Please share some personal information</legend>
		<label for="favorite-animal">Your favorite animal</label><input id="favorite-animal">
		<label for="favorite-color">Your favorite color</label><input id="favorite-color">
	</fieldset>
	<div role="group" aria-describedby="section2">
		<p id="section2">Some more (optional) information</p>
		<label for="favorite-food">Favorite food</label><input id="favorite-food">
	</div>
</div>

<button id="open-form">Open Form Dialog</button>

<div id="prompt-dialog" title="Are you sure?">
	<p>Please enter password to continue.</p>
	<label for="password">Password</label><input id="password">
</div>

<button id="open-prompt">Open Prompt Dialog</button>

</body>
</html>
Dialog: Visual test page for modal form dialogs 2012-10-26 00:47:22 +00:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="utf-8">`
			`<title>Dialog Visual Test</title>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<link rel="stylesheet" href="../../../themes/base/all.css">`
Tests: Use demo bootstrap for visual tests Adds a data-composite option and fixes paths for effects. Otherwise just applies the same conversion as already applied to demos, sometimes moving a <style> element to the right place. 2015-09-30 07:49:13 +00:00			`<script src="../../../external/requirejs/require.js"></script>`
			`<script src="../../../demos/bootstrap.js">`
Dialog: Visual test page for modal form dialogs 2012-10-26 00:47:22 +00:00			`$( "#form-dialog, #prompt-dialog" ).dialog({`
			`autoOpen: false,`
			`modal: true`
			`});`

Dialog: Remove core event/alias and deprecated module dependencies 2015-05-14 01:57:04 +00:00			`$( "#open-form" ).on( "click", function() {`
Dialog: Visual test page for modal form dialogs 2012-10-26 00:47:22 +00:00			`$( "#form-dialog" ).dialog( "open" );`
			`});`

Dialog: Remove core event/alias and deprecated module dependencies 2015-05-14 01:57:04 +00:00			`$( "#open-prompt" ).on( "click", function() {`
Dialog: Visual test page for modal form dialogs 2012-10-26 00:47:22 +00:00			`$( "#prompt-dialog" ).dialog( "open" );`
			`});`
			`</script>`
			`<style>`
			`label {`
			`display: block;`
			`}`
			`</style>`
			`</head>`
			`<body>`

			`<p>WHAT: A modal dialog containing form fields, with groups to describe each section. A second modal dialog with just an input and some text markup.</p>`
			`<p>EXPECTED: Dialog shows up, screenreader reads the dialog's title, the word "dialog" (or equivalent), the text before the first input (description of the first section) and the label of the first, focused input. When tabbing to the next group, the screenreader should announce the description of that group, along with the label of the focused field.</p>`
			`<p>For the second dialog, the behaviour should be similar, except that the whole content is read as the description of the dialog, likely causing the input's label to be read twice.</p>`
			`<p>NOTE: Using <code>fieldset</code> with <code>legend</code> seems to have the same result as using <code>role="group"</code> and <code>aria-describedby</code>. The latter needs an id-attribute, offers more flexibilty in markup order and has no built-in styling.</p>`

			`<div id="form-dialog" title="Profile Information">`
			`<fieldset>`
			`<legend>Please share some personal information</legend>`
			`<label for="favorite-animal">Your favorite animal</label><input id="favorite-animal">`
			`<label for="favorite-color">Your favorite color</label><input id="favorite-color">`
			`</fieldset>`
			`<div role="group" aria-describedby="section2">`
			`<p id="section2">Some more (optional) information</p>`
			`<label for="favorite-food">Favorite food</label><input id="favorite-food">`
			`</div>`
			`</div>`

			`<button id="open-form">Open Form Dialog</button>`

			`<div id="prompt-dialog" title="Are you sure?">`
			`<p>Please enter password to continue.</p>`
			`<label for="password">Password</label><input id="password">`
			`</div>`

			`<button id="open-prompt">Open Prompt Dialog</button>`

			`</body>`
			`</html>`