r2425 - static markup and CSS recommendation for autocomplete (contains ARIA attribute suggestion...
Author: scottjehl
Date: Wed Apr 1 13:29:58 2009
New Revision: 2425
Added:
branches/dev/autocomplete/tests/static/autocomplete/
branches/dev/autocomplete/tests/static/autocomplete/default.html
(contents, props changed)
Log:
static markup and CSS recommendation for autocomplete (contains ARIA
attribute suggestions as well)
Added: branches/dev/autocomplete/tests/static/autocomplete/default.html
==============================================================================
--- (empty file)
+++ branches/dev/autocomplete/tests/static/autocomplete/default.html Wed
Apr 1 13:29:58 2009
@@ -0,0 +1,58 @@
+<!doctype html>
+<html>
+<head>
+ <title>Autocomplete Static Test : Default</title>
+ <link rel="stylesheet" href="../static.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../static.js"></script>
+ <style type="text/css">
+ input { width: 196px;}
+
+ /* Autocomplete
+ ----------------------------------*/
+ .ui-autocomplete { position: absolute; height: 200px; width: 200px;
overflow: auto; }
+ .ui-autocomplete-results { list-style: none; padding: 0; margin:.2em 0;
display: block; width: 100%; }
+ .ui-autocomplete-results .ui-autocomplete-item { margin: 0 .2em;
display: block; padding:0; line-height: 1.3em; }
+ .ui-autocomplete-results a { text-decoration: none; display: block;
padding: .2em .4em; border: 1px dashed transparent; font-weight:
normal !important; }
+ .ui-autocomplete-results a strong { font-weight: bold; }
+ </style>
+
+ <script type="text/javascript">
+
+ </script>
+
+</head>
+<body>
+
+
+<input type="text" name="example" value="a" aria-autocomplete="list"
aria-haspopup="true" />
+
+
+<div class="ui-autocomplete ui-widget ui-widget-content ui-corner-bottom"
style="top: 29px; left: 8px;">
+ <ul id="ui-autocomplete-instance" role="menu"
aria-activedescendant="ui-active-menuitem" class="ui-autocomplete-results">
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1" class="ui-corner-all"><strong>A</strong>berdeen</a></li>
+ <li class="ui-autocomplete-item" role="menuitem"
id="ui-active-menuitem"><a href="#" tabindex="-1" class="ui-state-hover
ui-corner-all"><strong>A</strong>d<strong>a</strong></a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1"
class="ui-corner-all"><strong>A</strong>d<strong>a</strong>msville</a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1" class="ui-corner-all"><strong>A</strong>ddyston</a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1" class="ui-corner-all"><strong>A</strong>delphi</a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1"
class="ui-corner-all"><strong>A</strong>den<strong>a</strong></a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1"
class="ui-corner-all"><strong>A</strong>dri<strong>a</strong>n</a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1" class="ui-corner-all"><strong>A</strong>kron</a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1"
class="ui-corner-all"><strong>A</strong>lb<strong>a</strong>ny</a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1"
class="ui-corner-all"><strong>A</strong>lex<strong>a</strong>ndri<strong>a</strong></a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1" class="ui-corner-all"><strong>A</strong>lger</a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1"
class="ui-corner-all"><strong>A</strong>lledoni<strong>a</strong></a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1"
class="ui-corner-all"><strong>A</strong>lli<strong>a</strong>nce</a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1"
class="ui-corner-all"><strong>A</strong>lph<strong>a</strong></a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1"
class="ui-corner-all"><strong>A</strong>lv<strong>a</strong>d<strong>a</strong></a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1" class="ui-corner-all"><strong>A</strong>lvordton</a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1"
class="ui-corner-all"><strong>A</strong>m<strong>a</strong>nd<strong>a</strong></a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1"
class="ui-corner-all"><strong>A</strong>meli<strong>a</strong></a></li>
+ <li class="ui-autocomplete-item" role="menuitem"><a href="#"
tabindex="-1" class="ui-corner-all"><strong>A</strong>mesville</a></li>
+ </ul>
+</div>
+
+</body>
+</html>