Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(emoji-picker): DP-102475 fix keyboard navigation #389

Merged
merged 2 commits into from
Jul 1, 2024
Merged

fix(emoji-picker): DP-102475 fix keyboard navigation #389

merged 2 commits into from
Jul 1, 2024

Conversation

ninamarina
Copy link
Contributor

@ninamarina ninamarina commented Jun 28, 2024 •
edited
Loading

Fix Emoji Picker keyboard navigation when there is no search input

Obligatory GIF (super important!)

Obligatory GIF

🛠️ Type Of Change

These types will increment the version number on release:

  • Fix
  • Feature
  • Performance Improvement
  • Refactor

These types will not increment the version number, but will still deploy to documentation site on release:

  • Documentation
  • Build system
  • CI
  • Style (code style changes, not css changes)
  • Test
  • Other (chore)

📖 Jira Ticket

DP-102475

📖 Description

When the prop showSearch is false, hitting tab from the emoji tab set would fail with the error Cannot read properties of undefined (reading 'focusSearchInput') because the ref to the search input was not there.

To solve this, I changed the emitted event from 'focus-search-input' to 'tab-key-pressed' so that the parent component can handle the event and decide to which section should the focus move.

📝 Checklist

For all PRs:

  • I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
  • I have reviewed my changes.
  • I have added all relevant documentation.
  • I have considered the performance impact of my change.

For all Vue changes:

  • I have added / updated unit tests.
  • I have made my changes in Vue 2 and Vue 3. Note: you may sync your changes from Vue 2 to Vue 3 (or vice versa) using the ./scripts/dialtone-vue-sync.sh script. Read docs here: Dialtone Vue Sync Script
  • I have validated components with a screen reader.
  • I have validated components keyboard navigation.

📷 Screenshots / GIFs

Remember that to reproduce this you must set showSearch to false.

Before

emoji-picker-error

Now

emoji-picker-fixed

Next Steps

Add changes to Vue 3 once approved

@github-actions GitHub Actions
Copy link

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

@ninamarina ninamarina added the no-visual-test Add this tag when the PR does not need visual testing label Jun 28, 2024
@ninamarina ninamarina marked this pull request as ready for review June 28, 2024 21:05
braddialpad
braddialpad approved these changes Jun 28, 2024
View reviewed changes
Copy link
Contributor

@braddialpad braddialpad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems to work nicely thanks!

@github-actions GitHub Actions
Copy link

github-actions bot commented Jul 1, 2024

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-389/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-389/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-389/

@ninamarina ninamarina merged commit 6ca1d16 into staging Jul 1, 2024
10 checks passed
@ninamarina ninamarina deleted the fix/emoji-picker branch July 1, 2024 14:13
juliodialpad pushed a commit that referenced this pull request Jul 1, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone/v9.51.0
d2cf89f 
# [9.51.0](dialtone/v9.50.0...dialtone/v9.51.0) (2024-07-01)

### Bug Fixes

* **Badge:** DP-102533 mention only color ([#386](#386)) ([b6dc77d](b6dc77d))
* **Emoji Picker:** DP-102475 fix keyboard navigation ([#389](#389)) ([6ca1d16](6ca1d16))
* **Expressive Theme:** NO-JIRA corrected figma and tokens studio connection ([#384](#384)) ([255936f](255936f))
* **Logo:** DLT-1833 corrected antialiased edging  ([#381](#381)) ([67322e6](67322e6))

### Documentation

* DLT-1765 update favicon to Ai logomark ([#378](#378)) ([59ff0a4](59ff0a4))
* DLT-1791 move storybook to doc site -  Avatar to ButtonGroup ([#380](#380)) ([b754575](b754575))
* DLT-1792 move storybook to doc site - Card to Combobox ([#383](#383)) ([56fbb43](56fbb43))
* **Prototypes:** DLT-1740 left bar prototype - vue 2 ([#385](#385)) ([689af1b](689af1b))
* **Prototypes:** DLT-1740 left bar prototype ([#368](#368)) ([b0e3c9a](b0e3c9a))

### Features

* **Icon:** DLT-1712 add token icon  ([#388](#388)) ([66d2474](66d2474))
* **Popover:** DLT-1826 appendTo root ([#379](#379)) ([4d2c54d](4d2c54d))
* **Popover:** DLT-1826 appendTo root ([#382](#382)) ([35480c5](35480c5))
juliodialpad pushed a commit that referenced this pull request Jul 1, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone-icons/v4.22.0
a9b5efc 
# [4.22.0](dialtone-icons/v4.21.0...dialtone-icons/v4.22.0) (2024-07-01)

### Bug Fixes

* **Emoji Picker:** DP-102475 fix keyboard navigation ([#389](#389)) ([6ca1d16](6ca1d16))
* **Logo:** DLT-1833 corrected antialiased edging  ([#381](#381)) ([67322e6](67322e6))

### Features

* **Icon:** DLT-1712 add token icon  ([#388](#388)) ([66d2474](66d2474))
juliodialpad pushed a commit that referenced this pull request Jul 1, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone-vue2/v2.140.0
e248e32 
# [2.140.0](dialtone-vue2/v2.139.2...dialtone-vue2/v2.140.0) (2024-07-01)

### Bug Fixes

* **Badge:** DP-102533 mention only color ([#386](#386)) ([b6dc77d](b6dc77d))
* **Emoji Picker:** DP-102475 fix keyboard navigation ([#389](#389)) ([6ca1d16](6ca1d16))

### Documentation

* DLT-1764 update to new Dialpad logo in doc site header ([#377](#377)) ([6536125](6536125))
* DLT-1765 update favicon to Ai logomark ([#378](#378)) ([59ff0a4](59ff0a4))
* DLT-1791 move storybook to doc site -  Avatar to ButtonGroup ([#380](#380)) ([b754575](b754575))
* DLT-1792 move storybook to doc site - Card to Combobox ([#383](#383)) ([56fbb43](56fbb43))
* **Input:** DLT-1782 add search input example ([#376](#376)) ([a6b6416](a6b6416))
* **Prototypes:** DLT-1740 left bar prototype - vue 2 ([#385](#385)) ([689af1b](689af1b))

### Features

* **Popover:** DLT-1826 appendTo root ([#379](#379)) ([4d2c54d](4d2c54d))
* **Popover:** DLT-1826 appendTo root ([#382](#382)) ([35480c5](35480c5))
juliodialpad pushed a commit that referenced this pull request Jul 1, 2024
@semantic-release-bot
chore(release): NO-JIRA dialtone-vue3/v3.133.0
5c98698 
# [3.133.0](dialtone-vue3/v3.132.2...dialtone-vue3/v3.133.0) (2024-07-01)

### Bug Fixes

* **Badge:** DP-102533 mention only color ([#386](#386)) ([b6dc77d](b6dc77d))
* **Emoji Picker:** DP-102475 fix keyboard navigation ([#389](#389)) ([6ca1d16](6ca1d16))

### Documentation

* DLT-1764 update to new Dialpad logo in doc site header ([#377](#377)) ([6536125](6536125))
* DLT-1765 update favicon to Ai logomark ([#378](#378)) ([59ff0a4](59ff0a4))
* DLT-1791 move storybook to doc site -  Avatar to ButtonGroup ([#380](#380)) ([b754575](b754575))
* DLT-1792 move storybook to doc site - Card to Combobox ([#383](#383)) ([56fbb43](56fbb43))
* **Input:** DLT-1782 add search input example ([#376](#376)) ([a6b6416](a6b6416))
* **Prototypes:** DLT-1740 left bar prototype - vue 2 ([#385](#385)) ([689af1b](689af1b))
* **Prototypes:** DLT-1740 left bar prototype ([#368](#368)) ([b0e3c9a](b0e3c9a))

### Features

* **Popover:** DLT-1826 appendTo root ([#382](#382)) ([35480c5](35480c5))
@iropolo iropolo mentioned this pull request Jul 1, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@braddialpad braddialpad braddialpad approved these changes

@juliodialpad juliodialpad Awaiting requested review from juliodialpad juliodialpad is a code owner

@iropolo iropolo Awaiting requested review from iropolo iropolo is a code owner

@francisrupert francisrupert Awaiting requested review from francisrupert francisrupert is a code owner

Assignees
No one assigned
Labels
no-visual-test Add this tag when the PR does not need visual testing
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@ninamarina @braddialpad