fix: closes #13256, allow keyboard access to icon colors

install/package.json

@@ -108,7 +108,7 @@
         "nodebb-plugin-spam-be-gone": "2.3.1",
         "nodebb-plugin-web-push": "0.7.3",
         "nodebb-rewards-essentials": "1.0.1",
-        "nodebb-theme-harmony": "2.0.40",
+        "nodebb-theme-harmony": "2.0.41",
         "nodebb-theme-lavender": "7.1.18",
         "nodebb-theme-peace": "2.2.39",
         "nodebb-theme-persona": "14.0.16",

public/scss/modules/picture-switcher.scss

@@ -1,59 +1,17 @@
 .picture-switcher {
-	h4 {
-		line-height: 46px;
-		margin: 0;
-	}
 
-	.modal-body .btn {
-		padding: 10px 5px;
-		font-size: 13px;
-	}
-
-	label {
-		vertical-align: top;
-		line-height: 26px;
-
-		> input[type="radio"] {
-			display: none;
-
-			&:checked {
-				+ span:before {
+	[data-bg-color] {
+		position: relative;
+		border-radius: 50%;
+		&.selected::after {
+			content: '';
+			position: absolute;
+			top: -2px; left: -2px;
+			right: -2px; bottom: -2px;
 			border-radius: 50%;
 			border: 2px solid $primary;
-					position: relative;
-					top: -4px;
-					left: -4px;
-				}
-			}
-
-			&[value="transparent"] {
-				&:checked + span:before {
-					padding-top: 2px;
-					padding-left: 2px;
-				}
-
-				+ span:before {
-					content: '\f05e';
-					font-family: FontAwesome;
-					color: $gray-200;
-					font-size: 28px;
-				}
-			}
-		}
-
-		span {
-			display: inline-block;
-			width: 24px;
-			height: 24px;
-			border-radius: 50%;
-			margin-right: .5em;
-
-			&:before {
-				content: '';
-				display: inline-block;
-				width: 32px;
-				height: 32px;
-			}
+			pointer-events: none;
+			z-index: 1;
 		}
 	}
 }

public/src/modules/accounts/picture.js

@@ -60,8 +60,10 @@ define('accounts/picture', [
 					modal.find('.list-group-item').removeClass('active');
 					$(this).addClass('active');
 				});
-				modal.on('change', 'input[type="radio"][name="icon:bgColor"]', (e) => {
-					const value = e.target.value;
+
+				modal.on('click', '[data-bg-color]', function () {
+					const value = $(this).attr('data-bg-color');
+					$(this).addClass('selected').siblings().removeClass('selected');
 					modal.find('[component="avatar/icon"]').css('background-color', value);
 				});
 
@@ -80,18 +82,17 @@ define('accounts/picture', [
 					}
 
 					// Update avatar background colour
-					const radioEl = document.querySelector(`.modal input[type="radio"][value="${ajaxify.data['icon:bgColor']}"]`);
-					if (radioEl) {
-						radioEl.checked = true;
+					const iconbgEl = modal.find(`[data-bg-color="${ajaxify.data['icon:bgColor']}"]`);
+					if (iconbgEl.length) {
+						iconbgEl.addClass('selected');
 					} else {
-						// Check the first one
-						document.querySelector('.modal input[type="radio"]').checked = true;
+						modal.find('[data-bg-color="transparent"]').addClass('selected');
 					}
 				}
 
 				function saveSelection() {
 					const type = modal.find('.list-group-item.active').attr('data-type');
-					const iconBgColor = document.querySelector('.modal.picture-switcher input[type="radio"]:checked').value || 'transparent';
+					const iconBgColor = modal.find('[data-bg-color].selected').attr('data-bg-color') || 'transparent';
 
 					changeUserPicture(type, iconBgColor).then(() => {
 						Picture.updateHeader(

src/views/modals/change-picture.tpl

@@ -35,8 +35,9 @@
 <hr />
 
 <h4>[[user:avatar-background-colour]]</h4>
-
-<label><input type="radio" name="icon:bgColor" value="transparent" /><span></span></label>
-{{{ each iconBackgrounds }}}
-<label><input type="radio" name="icon:bgColor" value="{@value}" /><span style="background-color: {@value};"></span></label>
+<div class="d-flex gap-2">
+	<a href="#" class="lh-1 p-1" data-bg-color="transparent"><i class="fa-solid fa-2x fa-ban text-secondary"></i></a>
+	{{{ each iconBackgrounds }}}
+	<a href="#" class="lh-1 p-1" data-bg-color="{@value}" style="color: {@value};"><i class="fa-solid fa-2x fa-circle"></i></a>
 {{{ end }}}
+</div>