From 3f881b01caee0718d296b218a3f0bdee05a62333 Mon Sep 17 00:00:00 2001
From: David Keane <david.keane.1974@gmail.com>
Date: Mon, 25 May 2026 07:49:09 +0100
Subject: [PATCH] ux: remove duplicate smiley-face button on the emoji picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 CHANGELOG.md | 11 +++++++++++
 wp-notes.php | 32 ++++++++++++++------------------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e6f62a..762f7a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,17 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
 
 ## [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"
 - **"Create WP Note" submenu renamed to "My Notes"** (both in the WP
   Notes parent menu and the Tools → quick-access shortcut). The page
diff --git a/wp-notes.php b/wp-notes.php
index 38c161e..8921a06 100644
--- a/wp-notes.php
+++ b/wp-notes.php
@@ -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%;