From 3b60d5d396df9bee94b6945b127b315fae4d9c3a Mon Sep 17 00:00:00 2001
From: bloodrizer <cheshire.panther@gmail.com>
Date: Tue, 7 Jan 2025 18:07:22 -0800
Subject: [PATCH] better button tooltip accessability

---
 core.js            | 30 ++++++++++++++++++++++--------
 game.js            |  1 -
 index.html         |  2 +-
 js/jsx/left.jsx.js |  2 +-
 res/default.css    |  3 +++
 res/i18n/en.json   |  2 +-
 6 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/core.js b/core.js
index c343a8676b..ab1d922133 100644
--- a/core.js
+++ b/core.js
@@ -918,6 +918,7 @@ dojo.declare("com.nuclearunicorn.game.ui.Button", com.nuclearunicorn.core.Contro
 				position: "relative",
 				display: this.model.visible ? "block" : "none"
 			},
+			"aria-description": this.model.description,
 			tabIndex: 0
 		}, btnContainer);
 
@@ -944,11 +945,10 @@ dojo.declare("com.nuclearunicorn.game.ui.Button", com.nuclearunicorn.core.Contro
 		}
 
 		this.updateVisible();
+		this.afterRender();
 
 		dojo.connect(this.domNode, "onclick", this, "onClick");
 		dojo.connect(this.domNode, "onkeypress", this, "onKeyPress");
-
-		this.afterRender();
 	},
 
 	animate: function(){
@@ -978,14 +978,13 @@ dojo.declare("com.nuclearunicorn.game.ui.Button", com.nuclearunicorn.core.Contro
 
 	},
 
-	onKeyPress: function(event){
-		if (event.key == "Enter"){
-			this.onClick(event);
+	onKeyPress: function(e){
+		if (e.key == "Enter"){
+			this.onClick(e);
 		}
 	},
 
 	afterRender: function(){
-
 		var prices = this.model.prices;
 		if (prices.length && !this.tooltip){
 
@@ -1031,8 +1030,11 @@ dojo.declare("com.nuclearunicorn.game.ui.Button", com.nuclearunicorn.core.Contro
 			dojo.connect(this.domNode, "onmouseover", this, dojo.partial(function(tooltip){ dojo.style(tooltip, "display", ""); }, tooltip));
 			dojo.connect(this.domNode, "onmouseout", this,  dojo.partial(function(tooltip){ dojo.style(tooltip, "display", "none"); }, tooltip));
 
+
 			this.tooltip = tooltip;
 			this.tooltipPricesNodes = tooltipPricesNodes;
+
+			console.log("this after render", this);
 		}
 	},
 
@@ -2518,7 +2520,7 @@ UIUtils = {
 		var gameNode = dojo.byId("game");
 		var tooltip = dojo.byId("tooltip");
 
-		dojo.connect(container, "onmouseover", this, function() {
+		var showTooltip = function () {
 			game.tooltipUpdateFunc = function(){
 				tooltip.innerHTML = dojo.hitch(game, htmlProvider)();
 			};
@@ -2549,12 +2551,24 @@ UIUtils = {
 			if (tooltip.innerHTML) {
 				dojo.style(tooltip, "display", "");
 			}
-		});
+		};
+
+		dojo.connect(container, "onmouseover", this, showTooltip);
 
 		dojo.connect(container, "onmouseout", this, function(){
 			game.tooltipUpdateFunc = null;
 			dojo.style(tooltip, "display", "none");
 		});
+		
+		dojo.connect(container, "onkeydown", this, function(e){
+			if (e.code == "Space"){
+				e.stopPropagation();
+				e.preventDefault();
+
+				showTooltip();
+				tooltip.focus();
+			}
+		});
 
 		return htmlProvider;
 	}
diff --git a/game.js b/game.js
index 5fe81ae9b6..e19dd52f8c 100644
--- a/game.js
+++ b/game.js
@@ -3991,7 +3991,6 @@ dojo.declare("com.nuclearunicorn.game.ui.GamePage", null, {
 		dojo.connect(container, "onmouseout", this, function(){
 			dojo.style(container, "fontWeight", "normal");
 		});
-
 	},
 
 	/**
diff --git a/index.html b/index.html
index 7d0a12a120..a3f55437cd 100644
--- a/index.html
+++ b/index.html
@@ -373,7 +373,7 @@
 			</div>
 
 			<div id="game" style="display:none;">
-				<div id="tooltip" class="button_tooltip"></div>
+				<div id="tooltip" class="button_tooltip" role="tooltip" tabindex="0"></div>
 
 				<!-- LEFT -->
 				<div id="leftColumn" class="column" style="vertical-align: top;" aria-label="Resource panel">
diff --git a/js/jsx/left.jsx.js b/js/jsx/left.jsx.js
index b0c6291c05..94c4f0902a 100644
--- a/js/jsx/left.jsx.js
+++ b/js/jsx/left.jsx.js
@@ -685,7 +685,7 @@ WCraftTable = React.createClass({
                         className: "link" + (this.state.isEditMode ? " toggled" : ""), 
                         onClick: this.toggleEdit,
                         onKeyDown: this.onKeyDown,
-                        tabIndex: 1
+                        tabindex: 1
                     }, "⚙")
                 )
             ]),
diff --git a/res/default.css b/res/default.css
index 1a77b3ed4f..3264d13ddd 100644
--- a/res/default.css
+++ b/res/default.css
@@ -7,6 +7,7 @@ body {
     margin: 0;
     padding: 0;
     background-color: #FFFFFF;
+    height: 100vh;
 }
 
 img.loader {
@@ -136,6 +137,7 @@ div#gameLog {
 .bldTopContainer {
     padding-bottom: 5px;
 	margin-bottom: 15px;
+    height: 100%;
 }
 
 .bldTopContainer > a, .bldTopContainer > span {
@@ -470,6 +472,7 @@ td.resLimitWarn, .res-cell.resLimitWarn  {
     padding-top: 15px;
     border-top: 1px solid gray;
     margin-top: 10px;
+    height: 100%;
 }
 
 .btn.modern {
diff --git a/res/i18n/en.json b/res/i18n/en.json
index 6a107bb246..8e54e1a318 100644
--- a/res/i18n/en.json
+++ b/res/i18n/en.json
@@ -690,7 +690,7 @@
     "menu.wipe": "Wipe",
     "menu.getTheApp": "Get the app",
 
-    "mid.buildings.tip": "Ctrl+click to buy/sell multiple buildings (meta+click on macOS). Shift+click to buy/sell all buildings.<br>You can set the batch size for ctrl+click in the game options.<br><br>Hold shift to see total effects of all buildings.",
+    "mid.buildings.tip": "Ctrl+click to buy/sell multiple buildings (meta+click on macOS). Shift+click to buy/sell all buildings.<br>You can set the batch size for ctrl+click in the game options.<br><br>Hold shift to see total effects of all buildings.<br><br>Use `Tab` to select building, `Enter` to buy it and `Space` to see detailed tooltip.",
 
     "navbar.title": "Kittens Game",
     "navbar.menu.title": "Menu",