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
CHANGELOG.md
+11
View File
@@ -7,6 +7,17 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
## [Unreleased] ## [Unreleased]
### Changed — Removed duplicate smiley-face button on the emoji picker
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. The standalone
button has been removed; clicking the input itself still opens the
picker (the JS already wired both targets to the same handler).
Keyboard navigation (Enter/Space to toggle, Escape to close)
follows focus to the input instead of the now-gone button.
Orphaned `.emoji-picker-button` CSS rule deleted.
### Changed — Menu labels: "Create WP Note" → "My Notes", "About WP Notes" → "About" ### Changed — Menu labels: "Create WP Note" → "My Notes", "About WP Notes" → "About"
- **"Create WP Note" submenu renamed to "My Notes"** (both in the WP - **"Create WP Note" submenu renamed to "My Notes"** (both in the WP
Notes parent menu and the Tools → quick-access shortcut). The page Notes parent menu and the Tools → quick-access shortcut). The page
wp-notes.php
+14 -18
View File
@@ -524,7 +524,7 @@ function wp_notes_emoji_picker_init() {
// Initialize emoji picker // Initialize emoji picker
function initEmojiPicker() { function initEmojiPicker() {
// Handle emoji picker toggle // Handle emoji picker toggle
$('.emoji-picker-button, .emoji-input').on('click', function(e) { $('.emoji-input').on('click', function(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
var $container = $(this).closest('.emoji-picker-container'); 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) { $('.emoji-picker-container').on('keydown', function(e) {
var $dropdown = $(this).find('.emoji-picker-dropdown'); var $dropdown = $(this).find('.emoji-picker-dropdown');
var $button = $(this).find('.emoji-picker-button'); var $input = $(this).find('.emoji-input');
// Toggle dropdown with Enter or Space // Toggle dropdown with Enter or Space when the input is focused
if ((e.key === 'Enter' || e.key === ' ') && e.target === $button[0]) { if ((e.key === 'Enter' || e.key === ' ') && e.target === $input[0]) {
e.preventDefault(); e.preventDefault();
$dropdown.toggle(); $dropdown.toggle();
} }
// Close with Escape // Close with Escape
if (e.key === 'Escape' && $dropdown.is(':visible')) { if (e.key === 'Escape' && $dropdown.is(':visible')) {
$dropdown.hide(); $dropdown.hide();
$button.focus(); $input.focus();
} }
}); });
} }
@@ -821,19 +823,14 @@ function wp_notes_page_callback() {
Emoji Emoji
</label> </label>
<div class="emoji-picker-container"> <div class="emoji-picker-container">
<input <input
type="text" type="text"
name="wp_notes_emoji" name="wp_notes_emoji"
id="wp_notes_emoji" id="wp_notes_emoji"
placeholder="Click to add emoji" placeholder="Click to add emoji"
class="small-text emoji-input" class="small-text emoji-input"
aria-label="Add emoji" aria-label="Add emoji"
readonly> 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-picker-dropdown" style="display: none;">
<div class="emoji-list"> <div class="emoji-list">
<!-- Common emojis --> <!-- Common emojis -->
@@ -872,7 +869,6 @@ function wp_notes_page_callback() {
.format-label { display: flex; align-items: center; gap: 5px; } .format-label { display: flex; align-items: center; gap: 5px; }
.submit-button { margin-top: 1em; } .submit-button { margin-top: 1em; }
.emoji-picker-container { position: relative; } .emoji-picker-container { position: relative; }
.emoji-picker-button { margin-left: 5px; padding: 2px 6px; }
.emoji-picker-dropdown { .emoji-picker-dropdown {
position: absolute; position: absolute;
top: 100%; top: 100%;