pixl-xyapp 2.1.6 → 2.1.9

package/LICENSE.md

@@ -1,11 +1,28 @@
-# License
+BSD 3-Clause License
 
-**The MIT License (MIT)**
+Copyright (c) 2019 - 2026 PixlCore LLC & CONTRIBUTORS.
 
-*Copyright (c) 2025 PixlCore.com*
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -355,7 +355,7 @@ The pagination links work by constructing self-referencing URL to the current pa
 
 Since the `limit` is set to 5 items per page, and `offset` starts at `0`, then the next page (page 2) will be at offset `5`.  This link is simply a hashtag anchor tag, which doesn't reload the browser page, but will instead be caught by the navigation system, and call your page's `onDeactivate()` then its `onActivate()` with the new values.  It is up to your page code to redraw the table with the new data chunk and new `offset` value.
 
-Instead of generating hashtag anchor links, you can optionally provide a custom JavaScript function in a `pagination_link` property, which will be written into the HTML as an `onMouseUp` handler on each link, and called instead of a standard link.  Note that it must be a string and globally accessible, so remember the `$P()` shortcut to get access to the current page.  Example:
+Instead of generating hashtag anchor links, you can optionally provide a custom JavaScript function in a `pagination_link` property, which will be written into the HTML as an `onClick` handler on each link, and called instead of a standard link.  Note that it must be a string and globally accessible, so remember the `$P()` shortcut to get access to the current page.  Example:
 
 ```javascript
 	pagination_link: '$P().tableNavClick'
@@ -370,7 +370,7 @@ Notification messages are shown in a fixed bar at the top of the screen, regardl
 To use the notification system in your app, make sure this markup is in your main HTML page:
 
 ```html
-	<div id="d_message" class="message" style="display:none" onMouseUp="app.hideMessage(250)">
+	<div id="d_message" class="message" style="display:none" onClick="app.hideMessage(250)">
 		<div id="d_message_inner" class="message_inner"></div>
 	</div>
 ```

package/css/base.css

@@ -1,5 +1,5 @@
 /* xyOps Base Theme */
-/* Copyright (c) 2019 Joseph Huckaby - MIT License */
+/* Copyright (c) 2019 - 2026 Joseph Huckaby - BSD 3-Clause License */
 
 * {
 	box-sizing: border-box;
@@ -112,22 +112,22 @@ body.dark {
 	--gray: rgb(98, 107, 115);
 	--gray-highlight: color-mix(in srgb, rgb(98, 107, 115) 80%, white);
 	
-	--border-color: rgb(50, 54, 58);
+	--border-color: rgb(50, 50, 58);
 	--shadow-color: rgba(0, 0, 0, 0.0);
-	--background-color: rgb(24, 28, 32);
-	--header-background-color: rgb(32, 34, 38);
-	--header-text-color: rgb(125, 135, 150);
-	--box-background-color: rgb(32, 34, 38);
-	--form-background-color: rgb(40, 44, 48);
+	--background-color: rgb(24, 24, 32);
+	--header-background-color: rgb(32, 32, 38);
+	--header-text-color: rgb(125, 125, 150);
+	--box-background-color: rgb(32, 32, 38);
+	--form-background-color: rgb(40, 40, 48);
 	--table-header-background-color: rgba(200, 225, 255, 0.03);
 	
-	--sidebar-background-color: rgb(32, 34, 38);
-	--sidebar-text-color: rgb(125, 135, 150);
+	--sidebar-background-color: rgb(32, 32, 38);
+	--sidebar-text-color: rgb(125, 125, 150);
 	
-	--body-text-color: rgb(170, 180, 200);
-	--link-color: rgb(145, 155, 170);
-	--label-color: rgb(145, 155, 170);
-	--alt-label-color: rgb(120, 125, 130);
+	--body-text-color: rgb(170, 170, 200);
+	--link-color: rgb(145, 145, 170);
+	--label-color: rgb(145, 145, 170);
+	--alt-label-color: rgb(120, 120, 130);
 	--icon-color: rgb(115, 115, 130);
 	--icon-color-half: rgba(115, 115, 130, 0.5);
 }
@@ -178,6 +178,14 @@ body.dark fieldset input {
 	background: var(--box-background-color);
 }
 
+button.link {
+	background: none;
+	border: none;
+	padding: 0;
+	margin: 0;
+	font: inherit;
+}
+
 a, .link {
 	color: var(--link-color);
 }
@@ -197,6 +205,12 @@ a, .link {
 	text-decoration: none;
 }
 
+.link {
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+}
+
 a.danger:hover, .link.danger:hover {
 	color: var(--red) !important;
 }
@@ -695,17 +709,12 @@ div.toast > span {
 	word-break: break-word;
 }
 
-div.toast.success { background: #44bb44; }
-div.toast.warning { background: #bbbb44; }
+div.toast.success { background: var(--green); }
+div.toast.warning { background: var(--yellow); }
 div.toast.error { background: var(--red); }
-div.toast.critical { background: #bb44bb; }
-div.toast.info { background: #5890db; }
-
-body.dark div.toast.success { background: rgb(20, 128, 20); }
-body.dark div.toast.warning { background: rgb(128, 128, 20); }
-body.dark div.toast.error { background-color:var(--red); }
-body.dark div.toast.critical { background: rgb(128, 20, 128); }
-body.dark div.toast.info { background: rgb(28, 84, 160); }
+div.toast.critical { background: var(--purple); }
+div.toast.info { background: var(--theme-color); }
+div.toast.suspended { background: var(--orange); }
 
 div.toast.channel { 
 	background: var(--box-background-color); 
@@ -787,6 +796,7 @@ div.message.error { background: var(--red); }
 div.message.critical { background: var(--purple); }
 div.message.abort { background: var(--red); }
 div.message.info { background: var(--blue); }
+div.message.suspended { background: var(--orange); }
 
 /* body.dark div.message.success { background: rgb(20, 128, 20); }
 body.dark div.message.warning { background: rgb(128, 128, 20); }
@@ -1494,9 +1504,6 @@ body.dark fieldset .checkbox_container > label:before {
 	transform: scale(.2);
 }
 
-/* .checkbox_container > input:hover ~ label:before {
-	border-color: var(--theme-color);
-} */
 .checkbox_container > input:hover ~ label {
 	color: var(--theme-color);
 }
@@ -1521,13 +1528,11 @@ body.dark fieldset .checkbox_container > label:before {
 .checkbox_container:hover {
 	color: var(--body-text-color);
 }
-/* .checkbox_container > input:hover ~ label:before {
-	background-color: var(--theme-color-half) !important;
-	border-color: var(--theme-color);
-} */
-/* .checkbox_container > input[checked]:hover ~ label:after {
-	background-color: var(--theme-color-half) !important;
-} */
+
+.checkbox_container > input:focus-visible ~ label::before {
+	outline: 2px solid var(--theme-color);
+	outline-offset: 2px;
+}
 
 div.info_label {
 	font-size: 11px;
@@ -1911,6 +1916,10 @@ div.progress_bar_label.second_half {
 	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
 }
 
+.progress_bar_label i.mdi:before {
+	transform: scale(1.5);
+}
+
 div.progress_bar_container.indeterminate div.progress_bar_label {
 	display: none;
 }
@@ -2398,6 +2407,7 @@ table.data_table.compact th:first-child, table.data_table.compact td:first-child
 }
 
 div.data_table_compact > div.data_grid > ul.grid_row_header > div {
+	border-top: none;
 	margin-bottom: 5px;
 }
 
@@ -2587,6 +2597,10 @@ body.dark .data_grid > ul.grid_row_header > div {
 	padding-right: 1px;
 }
 
+.data_grid > ul > div .progress_bar_container {
+	margin: 1px 0 2px 0; /* Nudge height from 18px to 21px to match std grid units */
+}
+
 .data_grid ul.disabled div {
 	opacity: 0.6;
 }

package/js/base.js

@@ -41,7 +41,7 @@ var app = {
 	
 	setHeaderNav: function(items) {
 		// populate header with multiple nav elements
-		var html = '<div class="header_nav_cont">';
+		var html = '<div class="header_nav_cont" role="navigation">';
 		
 		items.forEach( function(item, idx) {
 			if (!item) return;
@@ -225,9 +225,11 @@ var app = {
 		var icon = '';
 		switch (type) {
 			case 'success': icon = 'check-circle'; break;
-			case 'warning': icon = 'alert-circle'; break;
+			case 'warning': icon = 'alert-rhombus'; break;
 			case 'error': icon = 'alert-decagram'; break;
 			case 'info': icon = 'information-outline'; break;
+			case 'critical': icon = 'fire-alert'; break;
+			case 'suspended': icon = 'motion-pause-outline'; break;
 			
 			default:
 				if (type.match(/^(\w+)\/(.+)$/)) { type = RegExp.$1; icon = RegExp.$2; }
@@ -245,8 +247,11 @@ var app = {
 		// show toast notification given raw html
 		var { type, icon, msg, lifetime, loc } = args;
 		
+		var role = 'alert';
+		if ((type == 'success') || (type == 'info')) role = 'status';
+		
 		var html = '';
-		html += '<div class="toast ' + type + '" style="display:none">';
+		html += '<div class="toast ' + type + '" style="display:none" role="' + role + '" aria-atomic="true">';
 			html += '<i class="mdi mdi-' + icon + '"></i>';
 			html += '<span>' + msg + '</span>';
 		html += '</div>';
@@ -259,7 +264,11 @@ var app = {
 		$toast.on('click', function() {
 			if (timer) clearTimeout(timer);
 			$toast.fadeOut( 250, function() { $(this).remove(); } );
-			if (loc) Nav.go(loc);
+			if (loc) {
+				$toast.addClass('clicky');
+				if (typeof(loc) == 'function') loc();
+				else if (typeof(loc) == 'string') Nav.go(loc);
+			}
 		} );
 		
 		if ((type == 'success') || (type == 'info') || lifetime) {
@@ -271,9 +280,7 @@ var app = {
 	},
 	
 	hideMessage: function(animate) {
-		// if (animate) $('#d_message').hide(animate);
-		// else $('#d_message').hide();
-		
+		// hide all toasts
 		if (animate) $('div.toast').fadeOut( animate, function() { $(this).remove(); } );
 		else $('div.toast').remove();
 	},
@@ -532,6 +539,47 @@ var app = {
 	notifyUserNav: function(loc) {
 		// override in app
 		// called by each page nav operation
+	},
+	
+	focusNext($cur, $cont) {
+		// focus the next focusable element
+		if (!$cur) $cur = $(document.activeElement);
+		if (!$cont) $cont = $(document);
+		
+		const $elems = $cont.find(
+			'a[href], button, input, textarea, select, details, summary, [tabindex]:not([tabindex="-1"])'
+		).filter(function() {
+			const $el = $(this);
+			if ($el.is(':disabled') || !$el.is(':visible')) return false;
+			if ($el.attr('tabindex') === "-1") return false;
+			return true;
+		});
+		
+		// Find current element in list
+		const idx = $elems.index($cur);
+		
+		// Focus the next tabbable element
+		if (idx !== -1 && idx < $elems.length - 1) {
+			const $next = $elems.eq(idx + 1);
+			$next.focus();
+			return $next;
+		}
+		
+		return null;
+	},
+	
+	buttonize: function($sel) {
+		// add aria roles and keyboard handlers to all buttons inside container
+		$sel.find('.button').attr({ role: 'button', tabindex: '0', onkeypress: 'app.buttonKey(this,event)' });
+	},
+	
+	buttonKey: function(elem, event) {
+		// key pressed while button is focused -- click if space or enter
+		if ((event.key == 'Enter') || (event.key == ' ')) {
+			event.preventDefault();
+			event.stopPropagation();
+			$(elem).click();
+		}
 	}
 	
 }; // app object

package/js/calendar.js

@@ -46,9 +46,9 @@ var Calendar = {
 		
 		html += '<div class="calendar">';
 			html += '<div class="cal_header">';
-				html += '<div class="ch_nav ch_prev" onMouseUp="Calendar.prevMonth()" title="Previous Month"><i class="mdi mdi-chevron-double-left"></i></div>';
+				html += '<div class="ch_nav ch_prev" onClick="Calendar.prevMonth()" title="Previous Month"><i class="mdi mdi-chevron-double-left"></i></div>';
 				html += '<div class="ch_title"></div>';
-				html += '<div class="ch_nav ch_next" onMouseUp="Calendar.nextMonth()" title="Next Month"><i class="mdi mdi-chevron-double-right"></i></div>';
+				html += '<div class="ch_nav ch_next" onClick="Calendar.nextMonth()" title="Next Month"><i class="mdi mdi-chevron-double-right"></i></div>';
 			html += '</div>';
 			html += '<div class="cal_days">';
 				_short_day_names.forEach( function(ddd) {

package/js/datetime.js

@@ -1,6 +1,6 @@
 // Joe's Date/Time Tools
-// Copyright (c) 2004 - 2025 Joseph Huckaby
-// Released under the MIT License
+// Copyright (c) 2004 - 2026 Joseph Huckaby
+// Released under the BSD 3-Clause License
 
 var _months = [
 	[ 1, 'January' ], [ 2, 'February' ], [ 3, 'March' ], [ 4, 'April' ],

package/js/dialog.js

@@ -45,7 +45,7 @@ var Dialog = {
 			$('#dialog').stop().remove();
 		}
 		
-		var $dialog = $('<div id="dialog" class="dialog"></div>').css({
+		var $dialog = $('<div id="dialog" class="dialog" role="dialog" aria-modal="true"></div>').css({
 			opacity: 0,
 			left: '' + x + 'px',
 			top: '' + y + 'px'
@@ -56,6 +56,12 @@ var Dialog = {
 		
 		this.active = true;
 		unscroll();
+		
+		// buttonize all buttons
+		app.buttonize( $dialog );
+		
+		// make everything behind us inert, for accessibility
+		$('div.sidebar, div.header, div.main, div.footer').attr('inert', 'true');
 	},
 	
 	autoResize: function() {
@@ -83,6 +89,7 @@ var Dialog = {
 		if (this.active) {
 			$('#dialog').stop().fadeOut( 250, function() { $(this).remove(); } );
 			$('#dialog_overlay').stop().fadeOut( 300, function() { $(this).remove(); } );
+			$('div.sidebar, div.header, div.main, div.footer').removeAttr('inert');
 			this.active = false;
 			unscroll.reset();
 			
@@ -221,6 +228,9 @@ var Dialog = {
 		Dialog.active = 'confirmation';
 		
 		setTimeout( function() {
+			// change aria role for danger type
+			$('#dialog').attr('role', 'alertdialog');
+			
 			// hold alt/opt key to immediately click default button
 			if (app.lastClick.altKey) return Dialog.confirm_click(true);
 		}, 1 );
@@ -300,7 +310,7 @@ var CodeEditor = {
 			$('#ceditor').stop().remove();
 		}
 		
-		var $dialog = $('<div class="dialog" id="ceditor"></div>').css({
+		var $dialog = $('<div class="dialog" id="ceditor" role="dialog" aria-modal="true"></div>').css({
 			opacity: 0,
 			left: '' + x + 'px',
 			top: '' + y + 'px'
@@ -313,6 +323,17 @@ var CodeEditor = {
 		
 		// only do the unscroll thing if another dialog isn't active under us
 		if (!Dialog.active) unscroll();
+		
+		// if dialog is active under us, remove its modal role and make it inert
+		if (Dialog.active) {
+			$('#dialog').removeAttr('aria-modal').attr({ 'aria-hidden': 'true', 'inert': 'true' });
+		}
+		else {
+			$('div.sidebar, div.header, div.main, div.footer').attr('inert', 'true');
+		}
+		
+		// buttonize all buttons
+		app.buttonize( $dialog );
 	},
 	
 	autoResize: function() {
@@ -345,6 +366,14 @@ var CodeEditor = {
 			// only release scroll lock if another dialog isn't active under us
 			if (!Dialog.active) unscroll.reset();
 			
+			// if dialog is active under us, restore its modal role
+			if (Dialog.active) {
+				$('#dialog').attr('aria-modal', 'true').removeAttr('aria-hidden').removeAttr('inert');
+			}
+			else {
+				$('div.sidebar, div.header, div.main, div.footer').removeAttr('inert');
+			}
+			
 			if (this.onHide) {
 				// one time hook for hide
 				var callback = this.onHide;
@@ -353,6 +382,7 @@ var CodeEditor = {
 			}
 			
 			this.onDragDrop = null;
+			this.onKeyDown = null;
 		}
 	},
 	

package/js/page.js

@@ -88,7 +88,7 @@ window.Page = class Page {
 		
 		html += '<div class="form_row ' + extra_classes + '" ' + compose_attribs(args) + '>';
 		if (label) html += '<div class="fr_label">' + label + '</div>';
-		if (content) html += '<div class="fr_content">' + content + '</div>';
+		if (content) html += '<div class="fr_content" aria-label="' + strip_html(label).replace(/\&\w+\;/g, '').trim() + '">' + content + '</div>';
 		if (suffix) html += '<div class="fr_suffix">' + suffix + '</div>';
 		if (caption) html += '<div class="fr_caption"><span>' + inline_marked(caption) + '</span></div>'; // markdown
 		html += '</div>';
@@ -161,7 +161,7 @@ window.Page = class Page {
 		
 		html += '<div class="checkbox_container">';
 		html += '<input type="checkbox" ' + compose_attribs(args) + '/>';
-		html += '<label>' + label + '</label>';
+		html += '<label for="' + (args.id || '') + '">' + label + '</label>';
 		html += '</div>';
 		
 		return html;
@@ -557,7 +557,7 @@ window.Page = class Page {
 			// html += 'Page: ';
 			if (current_page > 1) {
 				if (cpl) {
-					html += '<span class="link" onMouseUp="'+cpl+'('+Math.floor((current_page - 2) * results.limit)+')">&laquo; Prev</span>';
+					html += '<span class="link" onClick="'+cpl+'('+Math.floor((current_page - 2) * results.limit)+')">&laquo; Prev</span>';
 				}
 				else {
 					html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
@@ -587,7 +587,7 @@ window.Page = class Page {
 				}
 				else {
 					if (cpl) {
-						html += '<span class="link" onMouseUp="'+cpl+'('+Math.floor((idx - 1) * results.limit)+')">' + commify(idx) + '</span>';
+						html += '<span class="link" onClick="'+cpl+'('+Math.floor((idx - 1) * results.limit)+')">' + commify(idx) + '</span>';
 					}
 					else {
 						html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
@@ -601,7 +601,7 @@ window.Page = class Page {
 			html += '&nbsp;&nbsp;';
 			if (current_page < num_pages) {
 				if (cpl) {
-					html += '<span class="link" onMouseUp="'+cpl+'('+Math.floor((current_page + 0) * results.limit)+')">Next &raquo;</span>';
+					html += '<span class="link" onClick="'+cpl+'('+Math.floor((current_page + 0) * results.limit)+')">Next &raquo;</span>';
 				}
 				else {
 					html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
@@ -717,7 +717,7 @@ window.Page = class Page {
 			// html += 'Page: ';
 			if (current_page > 1) {
 				if (cpl) {
-					html += '<span class="link" onMouseUp="'+cpl+'('+Math.floor((current_page - 2) * results.limit)+')">&laquo; Prev</span>';
+					html += '<span class="link" onClick="'+cpl+'('+Math.floor((current_page - 2) * results.limit)+')">&laquo; Prev</span>';
 				}
 				else {
 					html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
@@ -748,7 +748,7 @@ window.Page = class Page {
 				}
 				else {
 					if (cpl) {
-						html += '<span class="link" onMouseUp="'+cpl+'('+Math.floor((idx - 1) * results.limit)+')">' + commify(idx) + '</span>';
+						html += '<span class="link" onClick="'+cpl+'('+Math.floor((idx - 1) * results.limit)+')">' + commify(idx) + '</span>';
 					}
 					else {
 						html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
@@ -763,7 +763,7 @@ window.Page = class Page {
 			
 			if (current_page < num_pages) {
 				if (cpl) {
-					html += '<span class="link" onMouseUp="'+cpl+'('+Math.floor((current_page + 0) * results.limit)+')">Next &raquo;</span>';
+					html += '<span class="link" onClick="'+cpl+'('+Math.floor((current_page + 0) * results.limit)+')">Next &raquo;</span>';
 				}
 				else {
 					html += '<a href="#' + this.ID + compose_query_string(merge_objects(this.args, {
@@ -1250,26 +1250,17 @@ window.Page = class Page {
 		var $elem = $field.closest('.form_row').find('.fr_suffix .checker');
 		
 		if (username.match(/^[\w\-\.]+$/)) {
-			// check with server
-			app.api.get('app/check_user_exists', { username: username }, function(resp) {
-				if (!self.active) return; // sanity
-				
-				if (resp.user_exists) {
-					// username taken
-					$elem.css('color','red').html('<span class="mdi mdi-alert-circle"></span>').attr('title', "Username is taken.");
-					$field.addClass('warning');
-				}
-				else if (resp.user_invalid) {
-					// bad username
-					$elem.css('color', 'red').html('<span class="mdi mdi-alert-decagram"></span>').attr('title', "Username is malformed.");
-					$field.addClass('warning');
-				}
-				else {
-					// username is valid and available!
-					$elem.css('color','green').html('<span class="mdi mdi-check-circle"></span>').attr('title', "Username available!");
-					$field.removeClass('warning');
-				}
-			} );
+			// check with user list
+			if (find_object( app.users, { username })) {
+				// username taken
+				$elem.css('color','red').html('<span class="mdi mdi-alert-circle"></span>').attr('title', "Username is taken.");
+				$field.addClass('warning');
+			}
+			else {
+				// username is valid and available!
+				$elem.css('color','green').html('<span class="mdi mdi-check-circle"></span>').attr('title', "Username available!");
+				$field.removeClass('warning');
+			}
 		}
 		else if (username.length) {
 			// bad username
@@ -1726,10 +1717,6 @@ window.PageManager = class PageManager {
 		var result = page.onActivate.apply(page, [args]);
 		if (typeof(result) == 'boolean') return result;
 		else throw("Page " + id + " onActivate did not return a boolean!");
-		
-		// expand section if applicable -- TODO: unreachable code:
-		var $sect = $('#tab_'+id).parent().prev();
-		if ($sect.length && $sect.hasClass('section_title')) this.expandSidebarGroup( $sect );
 	}
 	
 	deactivate(id, new_id) {

package/js/popover.js

@@ -68,6 +68,9 @@ var Popover = {
 			}
 			
 			if (!Dialog.active) unscroll();
+			
+			// buttonize all buttons
+			app.buttonize( $box );
 		}, 1 );
 	},
 	

package/js/select.js

@@ -9,9 +9,9 @@ var SingleSelect = {
 		$(sel).each( function() {
 			var self = this;
 			var $this = $(this);
-			$this.css('display', 'none');
+			$this.css('display', 'none').attr({ 'aria-hidden': true, tabindex: '-1' });
 			
-			var $ms = $('<div class="multiselect single"></div>');
+			var $ms = $('<div class="multiselect single" role="button" tabindex="0" aria-haspopup="listbox" aria-expanded="false"></div>');
 			if ($this.data('private')) $ms.attr('data-private', 1);
 			$this.after( $ms );
 			
@@ -50,16 +50,25 @@ var SingleSelect = {
 			// also expose redraw as a custom event that can be triggered
 			$this.on('redraw', redraw);
 			
-			$ms.on('mouseup', function() {
+			// allow keyboard to open menu
+			$ms.on('keydown', function(event) {
+				if ((event.key == 'Enter') || (event.key == ' ')) {
+					$ms.click();
+					event.preventDefault();
+				}
+			} );
+			
+			$ms.on('click', function() {
 				// create popover dialog for selecting and filtering
 				var html = '';
 				var is_private = $this.data('private');
 				if ($ms.hasClass('disabled')) return;
+				$ms.attr('aria-expanded', 'true');
 				
 				html += '<div class="sel_dialog_label">' + ($this.attr('title') || 'Select Item') + '</div>';
 				
 				if (!$this.data('compact')) {
-					html += '<div class="sel_dialog_search_container">';
+					html += '<div class="sel_dialog_search_container" role="search">';
 						html += '<input type="text" id="fe_sel_dialog_search" class="sel_dialog_search" autocomplete="off" value=""/>';
 						html += '<div class="sel_dialog_search_icon"><i class="mdi mdi-magnify"></i></div>';
 					html += '</div>';
@@ -67,7 +76,7 @@ var SingleSelect = {
 				
 				html += '<div id="d_sel_dialog_scrollarea" class="sel_dialog_scrollarea';
 				if ($this.data('nudgeheight')) html += ' nudgeheight';
-				html += '">';
+				html += '" role="listbox">';
 				
 				for (var idx = 0, len = self.options.length; idx < len; idx++) {
 					var opt = self.options[idx];
@@ -83,7 +92,8 @@ var SingleSelect = {
 					}
 					if ($this.data('shrinkwrap')) html += ' shrinkwrap';
 					
-					html += '" ' + ((idx >= SingleSelect.maxMenuItems) ? 'style="display:none"' : '') + ' data-value="' + opt.value + '">';
+					html += '" ' + ((idx >= SingleSelect.maxMenuItems) ? 'style="display:none"' : '') + ' data-value="' + opt.value + '"';
+					html += ' role="option" aria-selected="' + (opt.selected ? 'true' : 'false') + '" tabindex="-1">';
 					
 					if (opt.getAttribute && opt.getAttribute('data-icon')) {
 						html += '<i class="mdi mdi-' + opt.getAttribute('data-icon') + '">&nbsp;</i>';
@@ -100,11 +110,11 @@ var SingleSelect = {
 				}
 				html += '</div>';
 				
-				html += '</div>';
+				html += '</div>'; // scrollarea
 				
 				Popover.attach( $ms, '<div style="padding:15px;">' + html + '</div>', $this.data('shrinkwrap') || false );
 				
-				$('#d_sel_dialog_scrollarea > div.sel_dialog_item').on('mouseup', function() {
+				$('#d_sel_dialog_scrollarea > div.sel_dialog_item').on('click', function() {
 					// select item, close dialog and update multi-select
 					var $item = $(this);
 					$this.val( $item.data('value') );
@@ -154,19 +164,64 @@ var SingleSelect = {
 						if ((event.keyCode == 13) && value.length) {
 							event.preventDefault();
 							event.stopPropagation();
-							$('#d_sel_dialog_scrollarea > div.sel_dialog_item.match').slice(0, 1).trigger('mouseup');
+							$('#d_sel_dialog_scrollarea > div.sel_dialog_item.match').slice(0, 1).trigger('click');
 						}
 					});
 				}
 				
+				// handle keyboard focus
+				Popover.onKeyDown = SingleSelect.handleKeyDown;
+				
 				// highlight select field under us
 				$ms.addClass('selected');
-				Popover.onDetach = function() { $ms.removeClass('selected'); };
-			}); // mouseup
+				Popover.onDetach = function() { 
+					$ms.removeClass('selected').attr('aria-expanded', 'false').focus();
+				};
+			}); // click
 			
 		}); // forach elem
 	},
 	
+	handleKeyDown: function(event) {
+		var $options = $('#d_sel_dialog_scrollarea > div.sel_dialog_item');
+		var $active = $(document.activeElement).closest('.sel_dialog_item');
+		
+		var focusItem = function($item) {
+			if (!$item.length) return;
+			$options.attr({ 'tabindex':'-1', 'aria-selected':'false' });
+			$item.attr({ 'tabindex':'0', 'aria-selected':'true' }).focus();
+		};
+		
+		switch (event.key) {
+			case 'ArrowDown':
+				focusItem( $options.eq( $active.length ? ($active.index('.sel_dialog_item') + 1) : 0 ) );
+				event.preventDefault();
+				event.stopPropagation();
+			break;
+			
+			case 'ArrowUp':
+				focusItem( $options.eq( $active.length ? Math.max(0, $active.index('.sel_dialog_item') - 1) : 0 ) );
+				event.preventDefault();
+				event.stopPropagation();
+			break;
+			
+			case 'Enter':
+			case ' ':
+				if ($active.length) {
+					$active.click();
+					event.preventDefault();
+					event.stopPropagation();
+				}
+			break;
+			
+			case 'Escape':
+				Popover.detach();
+				event.preventDefault();
+				event.stopPropagation();
+			break;
+		} // switch key
+	}, // onKeyDown
+	
 	popupQuickMenu: function(opts) {
 		// show popup menu on custom element
 		// opts: { elem, title, items, value, callback, nocheck?, onCancel? }
@@ -179,17 +234,20 @@ var SingleSelect = {
 		
 		html += '<div class="sel_dialog_label">' + opts.title + '</div>';
 		if (opts.search) {
-			html += '<div class="sel_dialog_search_container">';
+			html += '<div class="sel_dialog_search_container" role="search">';
 				html += '<input type="text" id="fe_sel_dialog_search" class="sel_dialog_search" autocomplete="off" value=""/>';
 				html += '<div class="sel_dialog_search_icon"><i class="mdi mdi-magnify"></i></div>';
 			html += '</div>';
 		}
-		html += '<div id="d_sel_dialog_scrollarea" class="sel_dialog_scrollarea">';
+		html += '<div id="d_sel_dialog_scrollarea" class="sel_dialog_scrollarea" role="listbox">';
 		for (var idy = 0, ley = items.length; idy < ley; idy++) {
 			var item = items[idy];
 			var sel = (item.id == opts.value);
 			if (item.group) html += '<div class="sel_dialog_group">' + item.group + '</div>';
-			html += '<div class="sel_dialog_item ' + check + ' ' + (sel ? 'selected' : '') + ' shrinkwrap" data-value="' + item.id + '">';
+			
+			html += '<div class="sel_dialog_item ' + check + ' ' + (sel ? 'selected' : '') + ' shrinkwrap" data-value="' + item.id + '"';
+			html += ' role="option" aria-selected="' + (sel ? 'true' : 'false') + '" tabindex="-1">';
+			
 			if (item.icon) html += '<i class="mdi mdi-' + item.icon + '">&nbsp;</i>';
 			html += '<span>' + item.title + '</span>';
 			if (!opts.nocheck) html += '<div class="sel_dialog_item_check"><i class="mdi mdi-check"></i></div>';
@@ -199,7 +257,7 @@ var SingleSelect = {
 		
 		Popover.attach( $elem, '<div style="padding:15px;">' + html + '</div>', true );
 		
-		$('#d_sel_dialog_scrollarea > div.sel_dialog_item').on('mouseup', function() {
+		$('#d_sel_dialog_scrollarea > div.sel_dialog_item').on('click', function() {
 			// select item, close dialog and update state
 			var $item = $(this);
 			var value = $item.data('value');
@@ -207,10 +265,13 @@ var SingleSelect = {
 			delete opts.onCancel;
 			Popover.detach();
 			callback(value);
-		}); // mouseup
+		}); // click
+		
+		// handle keyboard focus
+		Popover.onKeyDown = SingleSelect.handleKeyDown;
 		
 		Popover.onDetach = function() {
-			$elem.removeClass('popped');
+			$elem.removeClass('popped').focus();
 			if (opts.onCancel) opts.onCancel();
 		};
 		
@@ -249,7 +310,7 @@ var SingleSelect = {
 					event.preventDefault();
 					event.stopPropagation();
 					
-					var mup = jQuery.Event( "mouseup" );
+					var mup = jQuery.Event( "click" );
 					mup.metaKey = true; // bypass `hold` feature
 					$('#d_sel_dialog_scrollarea > div.sel_dialog_item.match').slice(0, 1).trigger(mup);
 				}
@@ -266,9 +327,9 @@ var MultiSelect = {
 		$(sel).each( function() {
 			var self = this;
 			var $this = $(this);
-			$this.css('display', 'none');
+			$this.css('display', 'none').attr({ 'aria-hidden': true, 'tabindex': '-1' });
 			
-			var $ms = $('<div class="multiselect multi"></div>');
+			var $ms = $('<div class="multiselect multi" role="button" tabindex="0" aria-haspopup="listbox" aria-expanded="false"></div>');
 			if ($this.data('compact')) $ms.addClass('compact');
 			if ($this.data('private')) $ms.attr('data-private', 1);
 			$this.after( $ms );
@@ -311,7 +372,7 @@ var MultiSelect = {
 				if (num_sel) $ms.append( '<div class="clear"></div>' );
 				else $ms.append( '<div class="placeholder">' + ($this.attr('placeholder') || 'Click to select...') + '</div>' );
 				
-				$ms.find('div.item > i.mdi-close').on('mouseup', function(e) {
+				$ms.find('div.item > i.mdi-close').on('click', function(e) {
 					// user clicked on the 'X' -- remove this item and redraw
 					var $item = $(this).parent();
 					var value = $item.data('value');
@@ -335,8 +396,8 @@ var MultiSelect = {
 				
 				if ($this.data('hold') && $this.data('volatile') && Popover.enabled && (Popover.$anchor.prop('id') == $this.prop('id'))) {
 					$('#d_sel_dialog_scrollarea > div.sel_dialog_item').each( function(idx) {
-						if (self.options[idx].selected) $(this).addClass('selected');
-						else $(this).removeClass('selected');
+						if (self.options[idx].selected) $(this).addClass('selected').attr('aria-selected', 'true');
+						else $(this).removeClass('selected').attr('aria-selected', 'false');
 					} );
 				}
 			}; // redraw
@@ -349,7 +410,15 @@ var MultiSelect = {
 			// also expose redraw as a custom event that can be triggered
 			$this.on('redraw', redraw);
 			
-			$ms.on('mouseup', function() {
+			// allow keyboard to open menu
+			$ms.on('keydown', function(event) {
+				if ((event.key == 'Enter') || (event.key == ' ')) {
+					$ms.click();
+					event.preventDefault();
+				}
+			} );
+			
+			$ms.on('click', function() {
 				// create popover dialog for selecting and filtering
 				var html = '';
 				var orig_sel_state = [];
@@ -357,6 +426,7 @@ var MultiSelect = {
 				var inherited = $this.data('inherited') ? ($this.data('inherited') || '').split(/\,\s*/) : [];
 				var is_private = $this.data('private');
 				if ($ms.hasClass('disabled')) return;
+				$ms.attr('aria-expanded', 'true');
 				
 				html += '<div class="sel_dialog_label">' + ($this.attr('title') || 'Select Items');
 				if ($this.data('select-all')) {
@@ -365,11 +435,11 @@ var MultiSelect = {
 				}
 				html += '</div>';
 				
-				html += '<div class="sel_dialog_search_container">';
+				html += '<div class="sel_dialog_search_container" role="search">';
 					html += '<input type="text" id="fe_sel_dialog_search" class="sel_dialog_search" autocomplete="off" value=""/>';
 					html += '<div class="sel_dialog_search_icon"><i class="mdi mdi-magnify"></i></div>';
 				html += '</div>';
-				html += '<div id="d_sel_dialog_scrollarea" class="sel_dialog_scrollarea">';
+				html += '<div id="d_sel_dialog_scrollarea" class="sel_dialog_scrollarea" role="listbox">';
 				
 				for (var idx = 0, len = self.options.length; idx < len; idx++) {
 					var opt = self.options[idx];
@@ -387,7 +457,9 @@ var MultiSelect = {
 					if ($this.data('shrinkwrap')) html += ' shrinkwrap';
 					if (is_inherited) html += ' inherited';
 					
-					html += '" data-value="' + opt.value + '" title="' + (is_inherited ? ($this.data('itooltip') || '(Inherited Item)') : '') + '">';
+					html += '" data-value="' + opt.value + '" title="' + (is_inherited ? ($this.data('itooltip') || '(Inherited Item)') : '') + '"';
+					html += ' role="option" aria-selected="' + (opt.selected ? 'true' : 'false') + '" tabindex="-1">';
+					
 					if (opt.getAttribute && opt.getAttribute('data-icon')) {
 						html += '<i class="mdi mdi-' + opt.getAttribute('data-icon') + '">&nbsp;</i>';
 					}
@@ -409,7 +481,7 @@ var MultiSelect = {
 				
 				Popover.attach( $ms, '<div style="padding:15px;">' + html + '</div>', $this.data('shrinkwrap') || false );
 				
-				$('#d_sel_dialog_scrollarea > div.sel_dialog_item').on('mouseup', function(event) {
+				$('#d_sel_dialog_scrollarea > div.sel_dialog_item').on('click', function(event) {
 					// select item, close dialog and update multi-select
 					var $item = $(this);
 					if ($item.hasClass('inherited')) return; // no clicky on inherited items
@@ -422,7 +494,7 @@ var MultiSelect = {
 						var opt = self.options[idx];
 						if (opt.value == value) {
 							opt.selected = new_sel_state;
-							if (new_sel_state) $item.addClass('selected'); else $item.removeClass('selected');
+							if (new_sel_state) $item.addClass('selected').attr('aria-selected', 'true'); else $item.removeClass('selected').attr('aria-selected', 'false');
 							if (new_sel_state) new_sel_idx = idx;
 							idx = len;
 						}
@@ -436,7 +508,7 @@ var MultiSelect = {
 						// select range
 						if (last_sel_idx > new_sel_idx) { var temp = last_sel_idx; last_sel_idx = new_sel_idx; new_sel_idx = temp; }
 						for (var idx = last_sel_idx; idx <= new_sel_idx; idx++) { self.options[idx].selected = true; }
-						$('#d_sel_dialog_scrollarea > div.sel_dialog_item').slice(last_sel_idx, new_sel_idx + 1).addClass('selected');
+						$('#d_sel_dialog_scrollarea > div.sel_dialog_item').slice(last_sel_idx, new_sel_idx + 1).addClass('selected').attr('aria-selected', 'true');
 					}
 					else if ($this.data('hold') && event.altKey && (new_sel_idx > -1) && (last_sel_idx > -1) && (new_sel_idx != last_sel_idx)) {
 						// select pattern
@@ -445,7 +517,7 @@ var MultiSelect = {
 						for (var idx = last_sel_idx, len = self.options.length; idx < len; idx += dist) {
 							var opt = self.options[idx];
 							opt.selected = true;
-							$('#d_sel_dialog_scrollarea > div.sel_dialog_item').slice(idx, idx + 1).addClass('selected');
+							$('#d_sel_dialog_scrollarea > div.sel_dialog_item').slice(idx, idx + 1).addClass('selected').attr('aria-selected', 'true');
 						}
 					}
 					else if ($this.data('hold') && !new_sel_state) {
@@ -461,10 +533,10 @@ var MultiSelect = {
 						var is_all_sel = !!(find_objects(self.options, { selected: true }).length == self.options.length);
 						$('div.arrow_box div.sel_all_none').html( is_all_sel ? 'Select None' : 'Select All' );
 					}
-				}); // mouseup
+				}); // click
 				
 				if ($this.data('hold')) {
-					$('#btn_sel_dialog_cancel').on('mouseup', function() {
+					$('#btn_sel_dialog_cancel').on('click', function() {
 						Popover.detach();
 						
 						// restore original opts and redraw
@@ -476,11 +548,11 @@ var MultiSelect = {
 						redraw();
 						$this.trigger('change');
 					});
-					$('#btn_sel_dialog_add').on('mouseup', function() { Popover.detach(); });
+					$('#btn_sel_dialog_add').on('click', function() { Popover.detach(); $ms.focus(); });
 				} // hold
 				
 				// attach click handler for select-all-none
-				$('div.arrow_box div.sel_all_none').on('mouseup', function(event) {
+				$('div.arrow_box div.sel_all_none').on('click', function(event) {
 					var is_all_sel = !!(find_objects(self.options, { selected: true }).length == self.options.length);
 					var new_sel_state = !is_all_sel;
 					
@@ -490,7 +562,7 @@ var MultiSelect = {
 						
 						var opt = self.options[idx];
 						opt.selected = new_sel_state;
-						if (new_sel_state) $item.addClass('selected'); else $item.removeClass('selected');
+						if (new_sel_state) $item.addClass('selected').attr('aria-selected', 'true'); else $item.removeClass('selected').attr('aria-selected', 'false');
 					} );
 					
 					$this.trigger('change');
@@ -535,7 +607,7 @@ var MultiSelect = {
 						event.preventDefault();
 						event.stopPropagation();
 						
-						var mup = jQuery.Event( "mouseup" );
+						var mup = jQuery.Event( "click" );
 						mup.metaKey = true; // bypass `hold` feature
 						$('#d_sel_dialog_scrollarea > div.sel_dialog_item.match').slice(0, 1).trigger(mup);
 					}
@@ -543,13 +615,13 @@ var MultiSelect = {
 						// enter key WITHOUT value typed into search box + hold mode
 						event.preventDefault();
 						event.stopPropagation();
-						$('#btn_sel_dialog_add').trigger( jQuery.Event("mouseup") );
+						$('#btn_sel_dialog_add').trigger( jQuery.Event("click") );
 					}
 					else if ((event.keyCode == 27) && $this.data('hold')) {
 						// esc key WITHOUT value typed into search box + hold mode
 						event.preventDefault();
 						event.stopPropagation();
-						$('#btn_sel_dialog_cancel').trigger( jQuery.Event("mouseup") );
+						$('#btn_sel_dialog_cancel').trigger( jQuery.Event("click") );
 					}
 				});
 				
@@ -559,23 +631,26 @@ var MultiSelect = {
 						// enter key
 						event.preventDefault();
 						event.stopPropagation();
-						$('#btn_sel_dialog_add').trigger( jQuery.Event("mouseup") );
+						$('#btn_sel_dialog_add').trigger( jQuery.Event("click") );
 					}
 					else if ((event.keyCode == 27) && !$input.is(':focus') && $this.data('hold')) {
 						// esc key
 						event.preventDefault();
 						event.stopPropagation();
-						$('#btn_sel_dialog_cancel').trigger( jQuery.Event("mouseup") );
+						$('#btn_sel_dialog_cancel').trigger( jQuery.Event("click") );
 					}
 				};
 				
+				// handle keyboard focus
+				Popover.onKeyDown = SingleSelect.handleKeyDown;
+				
 				// highlight multiselect field under us
 				$ms.addClass('selected');
 				Popover.onDetach = function() { 
-					$ms.removeClass('selected'); 
+					$ms.removeClass('selected').attr('aria-expanded', 'false').focus();
 					if (Dialog.active) Dialog.autoResize();
 				};
-			}); // mouseup
+			}); // click
 			
 		}); // foreach elem
 	},
@@ -591,16 +666,19 @@ var MultiSelect = {
 		
 		html += '<div class="sel_dialog_label">' + opts.title + '</div>';
 		if (opts.search) {
-			html += '<div class="sel_dialog_search_container">';
+			html += '<div class="sel_dialog_search_container" role="search">';
 				html += '<input type="text" id="fe_sel_dialog_search" class="sel_dialog_search" autocomplete="off" value=""/>';
 				html += '<div class="sel_dialog_search_icon"><i class="mdi mdi-magnify"></i></div>';
 			html += '</div>';
 		}
-		html += '<div id="d_sel_dialog_scrollarea" class="sel_dialog_scrollarea">';
+		html += '<div id="d_sel_dialog_scrollarea" class="sel_dialog_scrollarea" role="listbox">';
 		for (var idy = 0, ley = items.length; idy < ley; idy++) {
 			var item = items[idy];
 			var sel = opts.values.includes(item.id);
-			html += '<div class="sel_dialog_item check ' + (sel ? 'selected' : '') + ' shrinkwrap" data-value="' + item.id + '">';
+			
+			html += '<div class="sel_dialog_item check ' + (sel ? 'selected' : '') + ' shrinkwrap" data-value="' + item.id + '"';
+			html += ' role="option" aria-selected="' + (sel ? 'true' : 'false') + '" tabindex="-1">';
+			
 			if (item.icon) html += '<i class="mdi mdi-' + item.icon + '">&nbsp;</i>';
 			html += '<span>' + item.title + '</span>';
 			html += '<div class="sel_dialog_item_check"><i class="mdi mdi-check"></i></div>';
@@ -610,7 +688,7 @@ var MultiSelect = {
 		
 		Popover.attach( $elem, '<div style="padding:15px;">' + html + '</div>', true );
 		
-		$('#d_sel_dialog_scrollarea > div.sel_dialog_item').on('mouseup', function() {
+		$('#d_sel_dialog_scrollarea > div.sel_dialog_item').on('click', function() {
 			// select item, close dialog and update state
 			var $item = $(this);
 			if ($item.hasClass('selected')) $item.removeClass('selected');
@@ -623,10 +701,13 @@ var MultiSelect = {
 			
 			Popover.detach();
 			callback(values);
-		}); // mouseup
+		}); // click
+		
+		// handle keyboard focus
+		Popover.onKeyDown = SingleSelect.handleKeyDown;
 		
 		Popover.onDetach = function() {
-			$elem.removeClass('popped');
+			$elem.removeClass('popped').focus();
 		};
 		
 		$elem.addClass('popped');
@@ -664,7 +745,7 @@ var MultiSelect = {
 					event.preventDefault();
 					event.stopPropagation();
 					
-					var mup = jQuery.Event( "mouseup" );
+					var mup = jQuery.Event( "click" );
 					mup.metaKey = true; // bypass `hold` feature
 					$('#d_sel_dialog_scrollarea > div.sel_dialog_item.match').slice(0, 1).trigger(mup);
 				}
@@ -681,8 +762,9 @@ var TextSelect = {
 		$(sel).each( function() {
 			var self = this;
 			var $this = $(this);
+			$this.css('display', 'none').attr({ 'aria-hidden': true, 'tabindex': '-1' });
 			
-			var $ms = $('<div class="multiselect text"></div>');
+			var $ms = $('<div class="multiselect text" role="button" tabindex="0"></div>');
 			$this.after( $ms );
 			
 			var redraw = function() {
@@ -703,7 +785,7 @@ var TextSelect = {
 				if (num_sel) $ms.append( '<div class="clear"></div>' );
 				else $ms.append( '<div class="placeholder">' + ($this.attr('placeholder') || 'Click to add...') + '</div>' );
 				
-				$ms.find('div.item > i').on('mouseup', function(e) {
+				$ms.find('div.item > i').on('click', function(e) {
 					// user clicked on the 'X' -- remove this item and redraw
 					var $item = $(this).parent();
 					var value = $item.data('value');
@@ -726,7 +808,15 @@ var TextSelect = {
 			// also expose redraw as a custom event that can be triggered
 			$this.on('redraw', redraw);
 			
-			$ms.on('mouseup', function() {
+			// allow keyboard to open menu
+			$ms.on('keydown', function(event) {
+				if ((event.key == 'Enter') || (event.key == ' ')) {
+					$ms.click();
+					event.preventDefault();
+				}
+			} );
+			
+			$ms.on('click', function() {
 				// create popover dialog for adding new items
 				var html = '';
 				if ($ms.hasClass('disabled')) return;
@@ -772,8 +862,8 @@ var TextSelect = {
 					$this.trigger('change');
 				}; // doAdd
 				
-				$('#btn_sel_dialog_cancel').on('mouseup', function() { Popover.detach(); });
-				$('#btn_sel_dialog_add').on('mouseup', function() { doAdd(); });
+				$('#btn_sel_dialog_cancel').on('click', function() { Popover.detach(); });
+				$('#btn_sel_dialog_add').on('click', function() { doAdd(); });
 				
 				var $input = $('#fe_sel_dialog_text').focus().on('keydown', function(event) {
 					// capture enter key
@@ -786,8 +876,10 @@ var TextSelect = {
 				
 				// highlight multiselect field under us
 				$ms.addClass('selected');
-				Popover.onDetach = function() { $ms.removeClass('selected'); };
-			}); // mouseup
+				Popover.onDetach = function() { 
+					$ms.removeClass('selected').focus();
+				};
+			}); // click
 			
 		}); // forach elem
 	},
@@ -835,8 +927,8 @@ var TextSelect = {
 			callback(value);
 		}; // doAdd
 		
-		$('#btn_sel_dialog_cancel').on('mouseup', function() { Popover.detach(); });
-		$('#btn_sel_dialog_add').on('mouseup', function() { doAdd(); });
+		$('#btn_sel_dialog_cancel').on('click', function() { Popover.detach(); });
+		$('#btn_sel_dialog_add').on('click', function() { doAdd(); });
 		
 		var $input = $('#fe_sel_dialog_text').focus().on('keydown', function(event) {
 			// capture enter key
@@ -848,7 +940,9 @@ var TextSelect = {
 		});
 		
 		$elem.addClass('popped');
-		Popover.onDetach = function() { $elem.removeClass('popped'); };
+		Popover.onDetach = function() { 
+			$elem.removeClass('popped').focus(); 
+		};
 	}
 	
 }; // TextSelect

package/js/tools.js

@@ -1,7 +1,7 @@
 ////
 // Joe's Misc JavaScript Tools
-// Copyright (c) 2004 - 2025 Joseph Huckaby
-// Released under the MIT License
+// Copyright (c) 2004 - 2026 Joseph Huckaby
+// Released under the BSD 3-Clause License
 ////
 
 var months = [
@@ -560,7 +560,7 @@ function expando_text(text, max, link) {
 	var after = text.substring(max);
 	
 	return before + 
-		'<span>... <a href="javascript:void(0)" onMouseUp="$(this).parent().hide().next().show()">'+link+'</a></span>' + 
+		'<span>... <a href="javascript:void(0)" onClick="$(this).parent().hide().next().show()">'+link+'</a></span>' + 
 		'<span style="display:none">' + after + '</span>';
 };
 

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "pixl-xyapp",
-	"version": "2.1.6",
+	"version": "2.1.9",
 	"description": "A theme for xyOps.",
 	"author": "Joseph Huckaby <jhuckaby@pixlcore.com>",
 	"homepage": "https://github.com/pixlcore/pixl-xyapp",
-	"license": "MIT",
+	"license": "BSD-3-Clause",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/pixlcore/pixl-xyapp"
+		"url": "git+https://github.com/pixlcore/pixl-xyapp.git"
 	},
 	"bugs": {
 		"url": "https://github.com/pixlcore/pixl-xyapp/issues"