Fix collapsed white space in certain labels

Previously I used a `display_hotkey` function which was similar to
`AccessKeys.toHTML` but it included a `<span style="white-space: pre">`
wrapper. The wrapper span (although perhaps not the style attribute) is
important to avoid white space collapsing.
For example, in the Flip/Rotate dialog, the "Flip &vertical" label was
converted to 'Flip <span class="menu-hotkey">v</span>ertical', and since
the space between the words was next to an element, it was ignored,
within the context of the `<label>` element parent.

Author: 1j01

src/edit-colors.js

@@ -6,7 +6,7 @@ import { $DialogWindow } from "./$ToolWindow.js";
 // import { localize } from "./app-localization.js";
 import { basic_colors, custom_colors } from "./color-data.js";
 import { detect_monochrome, make_monochrome_palette, show_error_message, undoable } from "./functions.js";
-import { $G, get_help_folder_icon, get_rgba_from_color, make_canvas, rgb_to_hsl } from "./helpers.js";
+import { $G, get_help_folder_icon, get_rgba_from_color, make_canvas, render_access_key, rgb_to_hsl } from "./helpers.js";
 import { replace_color_globally } from "./image-manipulation.js";
 
 // @TODO:
@@ -265,9 +265,9 @@ function choose_color(initial_color, callback) {
 	const $left_right_split = $(`<div class="left-right-split">`).appendTo($w.$main);
 	const $left = $(`<div class="left-side">`).appendTo($left_right_split);
 	const $right = $(`<div class="right-side">`).appendTo($left_right_split).hide();
-	$left.append(`<label for="basic-colors">${AccessKeys.toHTML("&Basic colors:")}</label>`);
+	$left.append(`<label for="basic-colors">${render_access_key("&Basic colors:")}</label>`);
 	const $basic_colors_grid = make_color_grid(basic_colors, "basic-colors").appendTo($left);
-	$left.append(`<label for="custom-colors">${AccessKeys.toHTML("&Custom colors:")}</label>`);
+	$left.append(`<label for="custom-colors">${render_access_key("&Custom colors:")}</label>`);
 	const custom_colors_dom_order = []; // (wanting) horizontal top to bottom
 	for (let list_index = 0; list_index < custom_colors.length; list_index++) {
 		const row = list_index % 2;
@@ -287,7 +287,7 @@ function choose_color(initial_color, callback) {
 	}
 
 	const $define_custom_colors_button = $(`<button class="define-custom-colors-button" type="button">`)
-		.html(AccessKeys.toHTML("&Define Custom Colors >>"))
+		.html(render_access_key("&Define Custom Colors >>"))
 		.appendTo($left)
 		.on("click", (e) => {
 			// prevent the form from submitting
@@ -314,7 +314,7 @@ function choose_color(initial_color, callback) {
 	};
 	$(window).on("resize", maybe_reenable_button_for_mobile_navigation);
 
-	const $color_solid_label = $(`<label for="color-solid-canvas">${AccessKeys.toHTML("Color|S&olid")}</label>`);
+	const $color_solid_label = $(`<label for="color-solid-canvas">${render_access_key("Color|S&olid")}</label>`);
 	$color_solid_label.css({
 		position: "absolute",
 		left: 10,
@@ -446,7 +446,7 @@ function choose_color(initial_color, callback) {
 				b: 255,
 			}[component_letter];
 			const label = document.createElement("label");
-			label.innerHTML = AccessKeys.toHTML(text_with_hotkey);
+			label.innerHTML = render_access_key(text_with_hotkey);
 			const input_y_spacing = 22;
 			$(label).css({
 				position: "absolute",
@@ -614,7 +614,7 @@ function choose_color(initial_color, callback) {
 	$right.append(rainbow_canvas, luminosity_canvas, result_canvas, $color_solid_label, lum_arrow_canvas);
 
 	const $add_to_custom_colors_button = $(`<button class="add-to-custom-colors-button" type="button">`)
-		.html(AccessKeys.toHTML("&Add To Custom Colors"))
+		.html(render_access_key("&Add To Custom Colors"))
 		.appendTo($right)
 		.on("click", (event) => {
 			// prevent the form from submitting

src/functions.js

@@ -10,7 +10,7 @@ import { OnCanvasTextBox } from "./OnCanvasTextBox.js";
 // import { localize } from "./app-localization.js";
 import { default_palette } from "./color-data.js";
 import { image_formats } from "./file-format-data.js";
-import { $G, E, TAU, debounce, from_canvas_coords, get_help_folder_icon, get_icon_for_tool, get_rgba_from_color, is_discord_embed, is_pride_month, make_canvas, to_canvas_coords } from "./helpers.js";
+import { $G, E, TAU, debounce, from_canvas_coords, get_help_folder_icon, get_icon_for_tool, get_rgba_from_color, is_discord_embed, is_pride_month, make_canvas, render_access_key, to_canvas_coords } from "./helpers.js";
 import { apply_image_transformation, draw_grid, draw_selection_box, flip_horizontal, flip_vertical, invert_monochrome, invert_rgb, rotate, stretch_and_skew, threshold_black_and_white } from "./image-manipulation.js";
 import { show_imgur_uploader } from "./imgur.js";
 import { showMessageBox } from "./msgbox.js";
@@ -450,11 +450,11 @@ function show_custom_zoom_window() {
 	$fieldset.append(`
 		<legend>${localize("Zoom to")}</legend>
 		<div class="fieldset-body">
-			<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-1" aria-keyshortcuts="Alt+1 1" value="1"/><label for="zoom-option-1">${AccessKeys.toHTML("&100%")}</label></div>
-			<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-2" aria-keyshortcuts="Alt+2 2" value="2"/><label for="zoom-option-2">${AccessKeys.toHTML("&200%")}</label></div>
-			<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-4" aria-keyshortcuts="Alt+4 4" value="4"/><label for="zoom-option-4">${AccessKeys.toHTML("&400%")}</label></div>
-			<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-6" aria-keyshortcuts="Alt+6 6" value="6"/><label for="zoom-option-6">${AccessKeys.toHTML("&600%")}</label></div>
-			<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-8" aria-keyshortcuts="Alt+8 8" value="8"/><label for="zoom-option-8">${AccessKeys.toHTML("&800%")}</label></div>
+			<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-1" aria-keyshortcuts="Alt+1 1" value="1"/><label for="zoom-option-1">${render_access_key("&100%")}</label></div>
+			<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-2" aria-keyshortcuts="Alt+2 2" value="2"/><label for="zoom-option-2">${render_access_key("&200%")}</label></div>
+			<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-4" aria-keyshortcuts="Alt+4 4" value="4"/><label for="zoom-option-4">${render_access_key("&400%")}</label></div>
+			<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-6" aria-keyshortcuts="Alt+6 6" value="6"/><label for="zoom-option-6">${render_access_key("&600%")}</label></div>
+			<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-8" aria-keyshortcuts="Alt+8 8" value="8"/><label for="zoom-option-8">${render_access_key("&800%")}</label></div>
 			<div class="radio-field"><input type="radio" name="custom-zoom-radio" id="zoom-option-really-custom" value="really-custom"/><label for="zoom-option-really-custom"><input type="number" min="10" max="1000" name="really-custom-zoom-input" class="inset-deep no-spinner" value=""/>%</label></div>
 		</div>
 	`);
@@ -3175,8 +3175,8 @@ function image_attributes() {
 	let width_in_px = main_canvas.width;
 	let height_in_px = main_canvas.height;
 
-	const $width_label = $(E("label")).appendTo($main).html(AccessKeys.toHTML(localize("&Width:")));
-	const $height_label = $(E("label")).appendTo($main).html(AccessKeys.toHTML(localize("&Height:")));
+	const $width_label = $(E("label")).appendTo($main).html(render_access_key(localize("&Width:")));
+	const $height_label = $(E("label")).appendTo($main).html(render_access_key(localize("&Height:")));
 	const $width = $(E("input")).attr({ type: "number", min: 1, "aria-keyshortcuts": "Alt+W W W" }).addClass("no-spinner inset-deep").appendTo($width_label);
 	const $height = $(E("input")).attr({ type: "number", min: 1, "aria-keyshortcuts": "Alt+H H H" }).addClass("no-spinner inset-deep").appendTo($height_label);
 
@@ -3192,9 +3192,9 @@ function image_attributes() {
 	const $units = $(E("fieldset")).appendTo($main).append(`
 		<legend>${localize("Units")}</legend>
 		<div class="fieldset-body">
-			<div class="radio-field"><input type="radio" name="units" id="unit-in" value="in" aria-keyshortcuts="Alt+I I"><label for="unit-in">${AccessKeys.toHTML(localize("&Inches"))}</label></div>
-			<div class="radio-field"><input type="radio" name="units" id="unit-cm" value="cm" aria-keyshortcuts="Alt+M M"><label for="unit-cm">${AccessKeys.toHTML(localize("C&m"))}</label></div>
-			<div class="radio-field"><input type="radio" name="units" id="unit-px" value="px" aria-keyshortcuts="Alt+P P"><label for="unit-px">${AccessKeys.toHTML(localize("&Pixels"))}</label></div>
+			<div class="radio-field"><input type="radio" name="units" id="unit-in" value="in" aria-keyshortcuts="Alt+I I"><label for="unit-in">${render_access_key(localize("&Inches"))}</label></div>
+			<div class="radio-field"><input type="radio" name="units" id="unit-cm" value="cm" aria-keyshortcuts="Alt+M M"><label for="unit-cm">${render_access_key(localize("C&m"))}</label></div>
+			<div class="radio-field"><input type="radio" name="units" id="unit-px" value="px" aria-keyshortcuts="Alt+P P"><label for="unit-px">${render_access_key(localize("&Pixels"))}</label></div>
 		</div>
 	`);
 	$units.find(`[value=${current_unit}]`).attr({ checked: true });
@@ -3208,8 +3208,8 @@ function image_attributes() {
 	const $colors = $(E("fieldset")).appendTo($main).append(`
 		<legend>${localize("Colors")}</legend>
 		<div class="fieldset-body">
-			<div class="radio-field"><input type="radio" name="colors" id="attribute-monochrome" value="monochrome" aria-keyshortcuts="Alt+B B"><label for="attribute-monochrome">${AccessKeys.toHTML(localize("&Black and white"))}</label></div>
-			<div class="radio-field"><input type="radio" name="colors" id="attribute-polychrome" value="polychrome" aria-keyshortcuts="Alt+L L"><label for="attribute-polychrome">${AccessKeys.toHTML(localize("Co&lors"))}</label></div>
+			<div class="radio-field"><input type="radio" name="colors" id="attribute-monochrome" value="monochrome" aria-keyshortcuts="Alt+B B"><label for="attribute-monochrome">${render_access_key(localize("&Black and white"))}</label></div>
+			<div class="radio-field"><input type="radio" name="colors" id="attribute-polychrome" value="polychrome" aria-keyshortcuts="Alt+L L"><label for="attribute-polychrome">${render_access_key(localize("Co&lors"))}</label></div>
 		</div>
 	`);
 	$colors.find(`[value=${monochrome ? "monochrome" : "polychrome"}]`).attr({ checked: true });
@@ -3290,7 +3290,7 @@ function image_attributes() {
 	});
 
 	// Parsing HTML with jQuery; $Button takes text (not HTML) or Node/DocumentFragment
-	$w.$Button($.parseHTML(AccessKeys.toHTML(localize("&Default")))[0], () => {
+	$w.$Button($.parseHTML(render_access_key(localize("&Default")))[0], () => {
 		width_in_px = default_canvas_width;
 		height_in_px = default_canvas_height;
 		$width.val(width_in_px / unit_sizes_in_px[current_unit]);
@@ -3376,7 +3376,7 @@ function image_flip_and_rotate() {
 				value="flip-horizontal"
 				aria-keyshortcuts="Alt+F"
 				checked
-			/><label for="flip-horizontal">${AccessKeys.toHTML(localize("&Flip horizontal"))}</label>
+			/><label for="flip-horizontal">${render_access_key(localize("&Flip horizontal"))}</label>
 		</div>
 		<div class="radio-wrapper">
 			<input
@@ -3385,7 +3385,7 @@ function image_flip_and_rotate() {
 				id="flip-vertical"
 				value="flip-vertical"
 				aria-keyshortcuts="Alt+V"
-			/><label for="flip-vertical">${AccessKeys.toHTML(localize("Flip &vertical"))}</label>
+			/><label for="flip-vertical">${render_access_key(localize("Flip &vertical"))}</label>
 		</div>
 		<div class="radio-wrapper">
 			<input
@@ -3394,7 +3394,7 @@ function image_flip_and_rotate() {
 				id="rotate-by-angle"
 				value="rotate-by-angle"
 				aria-keyshortcuts="Alt+R"
-			/><label for="rotate-by-angle">${AccessKeys.toHTML(localize("&Rotate by angle"))}</label>
+			/><label for="rotate-by-angle">${render_access_key(localize("&Rotate by angle"))}</label>
 		</div>
 	`);
 
@@ -3416,7 +3416,7 @@ function image_flip_and_rotate() {
 					aria-keyshortcuts="Alt+${AccessKeys.get(label_with_hotkey).toUpperCase()}"
 				/><label
 					for="rotate-${degrees}"
-				>${AccessKeys.toHTML(label_with_hotkey)}</label>
+				>${render_access_key(label_with_hotkey)}</label>
 			</div>
 		`);
 	}
@@ -3538,7 +3538,7 @@ function image_stretch_and_skew() {
 			width: "40px"
 		}).addClass("no-spinner inset-deep");
 		$(E("td")).appendTo($tr).append($img);
-		$(E("td")).appendTo($tr).append($(E("label")).html(AccessKeys.toHTML(label_with_hotkey)).attr("for", input_id));
+		$(E("td")).appendTo($tr).append($(E("label")).html(render_access_key(label_with_hotkey)).attr("for", input_id));
 		$(E("td")).appendTo($tr).append($input);
 		$(E("td")).appendTo($tr).text(label_unit);
 

src/helpers.js

@@ -32,6 +32,18 @@ export const is_discord_embed = query_params.get('frame_id') != null;
 
 const $G = $(window);
 
+/**
+ * Wrapper for AccessKeys.toHTML that ensures whitespace isn't collapsed in cases like "Fox &Trot" or "Fo&x Trot" where the access key abuts a space.
+ * 
+ * (Actually a simple `<span>` may be enough (since it's an inline element?), but `white-space: pre` is more explicit.)
+ * 
+ * @param {string} label  text with an access key denoted by an ampersand (can escape with double ampersand)
+ * @returns {string}  HTML for label with access key underlined
+ */
+function render_access_key(label) {
+	return `<span style="white-space: pre">${AccessKeys.toHTML(label)}</span>`;
+}
+
 /**
  * @param {string} name  filename without extension
  * @param {[number, number]} coords  hotspot coordinates
@@ -422,6 +434,7 @@ export {
 	make_canvas,
 	make_css_cursor,
 	memoize_synchronous_function,
+	render_access_key,
 	rgb_to_hsl,
 	to_canvas_coords
 };