ranger/rangerhq-logbook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux: remove duplicate smiley-face button on the emoji picker

Browse Source 
The "Add emoji" formatting option rendered two clickable elements
stacked: the "Click to add emoji" text input AND a separate button
beside it with a smiley-face dashicon. Both opened the same dropdown
picker — visually duplicated and slightly confusing for users who
expected one or the other to be the trigger.

The button is gone. Clicking the input itself still opens the
picker (the existing JS already wired both .emoji-picker-button and
.emoji-input to the same click handler — the click handler now just
targets .emoji-input). Keyboard navigation (Enter/Space to toggle,
Escape to close) refocuses the input instead of the removed button.

Orphaned .emoji-picker-button CSS rule deleted.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
David Keane
2026-05-25 07:49:09 +01:00
parent b34d2d8f70
commit 3f881b01ca
2 changed files with 25 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wp-notes.php
+14 -18
View File
@@ -524,7 +524,7 @@ function wp_notes_emoji_picker_init() {
// Initialize emoji picker
function initEmojiPicker() {
// Handle emoji picker toggle
$('.emoji-picker-button, .emoji-input').on('click', function(e) {
$('.emoji-input').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var $container = $(this).closest('.emoji-picker-container');
@@ -567,21 +567,23 @@ function wp_notes_emoji_picker_init() {
}
});
// Handle keyboard navigation
// Handle keyboard navigation — focus returns to the input
// (the picker trigger) after Escape now that the dedicated
// button has been removed.
$('.emoji-picker-container').on('keydown', function(e) {
var $dropdown = $(this).find('.emoji-picker-dropdown');
var $button = $(this).find('.emoji-picker-button');
// Toggle dropdown with Enter or Space
if ((e.key === 'Enter' || e.key === ' ') && e.target === $button[0]) {
var $input = $(this).find('.emoji-input');
// Toggle dropdown with Enter or Space when the input is focused
if ((e.key === 'Enter' || e.key === ' ') && e.target === $input[0]) {
e.preventDefault();
$dropdown.toggle();
}
// Close with Escape
if (e.key === 'Escape' && $dropdown.is(':visible')) {
$dropdown.hide();
$button.focus();
$input.focus();
}
});
}
@@ -821,19 +823,14 @@ function wp_notes_page_callback() {
Emoji
</label>
<div class="emoji-picker-container">
<input
type="text"
name="wp_notes_emoji"
id="wp_notes_emoji"
<input
type="text"
name="wp_notes_emoji"
id="wp_notes_emoji"
placeholder="Click to add emoji"
class="small-text emoji-input"
aria-label="Add emoji"
readonly>
<button type="button"
class="button emoji-picker-button"
aria-label="Open emoji picker">
<span class="dashicons dashicons-smiley"></span>
</button>
<div class="emoji-picker-dropdown" style="display: none;">
<div class="emoji-list">
<!-- Common emojis -->
@@ -872,7 +869,6 @@ function wp_notes_page_callback() {
.format-label { display: flex; align-items: center; gap: 5px; }
.submit-button { margin-top: 1em; }
.emoji-picker-container { position: relative; }
.emoji-picker-button { margin-left: 5px; padding: 2px 6px; }
.emoji-picker-dropdown {
position: absolute;
top: 100%;