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