<body>
<div class="demo">
- <a href="#login-form">Log In</a>
- <div id="login-form" class="ui-widget-content" tabIndex="0">
+ <a href="#login-form">Log In</a>
+ <div class="ui-widget-content" id="login-form" aria-label="Login options">
<form>
<div>
- <label>Username</label>
- <input type="username" />
+ <label for="un">Username</label>
+ <input type="text" id="un" />
</div>
<div>
- <label>Password</label>
- <input type="password" />
+ <label for="pw">Password</label>
+ <input type="password" id="pw" />
</div>
<div>
- <input type="submit" class="submit" value="Login" />
+ <input type="submit" value="Login" class="submit" />
</div>
</form>
</div>
+
+
+
+
</div>
<div class="demo-description">
if ( !this.element.attr( "role" ) ) {
// TODO alternatives to tooltip are dialog and menu, all three aren't generic popups
- this.element.attr( "role", "tooltip" );
+ this.element.attr( "role", "dialog" );
this.generatedRole = true;
}
});
this._bind(this.element, {
- // TODO use focusout so that element itself doesn't need to be focussable
- blur: function( event ) {
+ focusout: function( event ) {
var that = this;
// use a timer to allow click to clear it and letting that
// handle the closing instead of opening again
that.closeTimer = setTimeout( function() {
that.close( event );
}, 100);
- }
+ },
+ focusin: function( event ) {
+ var that = this;
+ clearTimeout( that.closeTimer );
+ }
});
this._bind({
- // TODO only triggerd on element if it can receive focus
+ // TODO only triggered on element if it can receive focus
// bind to document instead?
// either element itself or a child should be focusable
keyup: function( event ) {
.show()
.attr( "aria-hidden", false )
.attr( "aria-expanded", true )
- .position( position )
- // TODO find a focussable child, otherwise put focus on element, add tabIndex=0 if not focussable
- .focus();
-
- if (this.element.is(":ui-menu")) {
+ .position( position );
+
+ if (this.element.is(":ui-menu")) { //popup is a menu
+ this.element.focus();
this.element.menu("focus", event, this.element.children( "li" ).first() );
+ this.element.focus();
}
-
+ // TODO add other special use cases that differ from the default dialog style keyboard mechanism
+ else {
+ //default use case, popup could be anything (e.g. a form)
+ this.element
+ .bind( "keypress.ui-popup", function( event ) {
+ if ( event.keyCode !== $.ui.keyCode.TAB ) {
+ return;
+ }
+ var tabbables = $( ":tabbable", this ),
+ first = tabbables.filter( ":first" ),
+ last = tabbables.filter( ":last" );
+ if ( event.target === last[0] && !event.shiftKey ) {
+ first.focus( 1 );
+ return false;
+ } else if ( event.target === first[0] && event.shiftKey ) {
+ last.focus( 1 );
+ return false;
+ }
+ });
+
+ // set focus to the first tabbable element in the popup container
+ // if there are no tabbable elements, set focus on the popup itself
+ var tabbables = this.element.find( ":tabbable" );
+ if (!tabbables.length) {
+ this.element.attr("tabindex", "0");
+ tabbables.add(this.element);
+ }
+ tabbables.eq( 0 ).focus(1);
+ }
+
// take trigger out of tab order to allow shift-tab to skip trigger
this.options.trigger.attr("tabindex", -1);
this.element
.hide()
.attr( "aria-hidden", true )
- .attr( "aria-expanded", false );
+ .attr( "aria-expanded", false )
+ .unbind( "keypress.ui-popup");
this.options.trigger.attr("tabindex", 0);
projects / jquery-ui.git / commitdiff