feat: Added keyboard navigation to Compose Actions Menu #7846

mananjadhav · 2022-02-20T12:29:38Z

Details

Added keyboard navigation and keyboard based menu trigger for ~~Compose Actions Menu~~ <PopoverMenu />
Updated changes consists of using ArrowKeyFocusManager and KeyboardShortcuts lib for keyboard handling.
Impacted Components:
- ReportActionComposer, additional actions menu consisting Request Money, Split Money and Add Attachment
- FAB Menu/Sidebar Screen, which pops up when clicking the green floating action Menu
- AvatarImagePicker, which can be tested with Profile Picture
- Payments List, which pops up when clicking Add Payment Methods
- ButtonWithMenu component, which is available when we select the Payment method when settling IOU
- ThreeDotsMenu /Workspace Menu, which is visible on the workspace RHS header

Fixed Issues

$ #7317

Tests

Tested keyboard navigation with arrow keys
Tested each menu trigger by clicking enter
Checked the focus border blue color shows for active menu
Tested the components mentioned in the GH body "Impacted Components" section.

Verify that no errors appear in the JS console

QA Steps

Web and Desktop

A. Report Action Composer

With the cursor in compose box Type Shift+Tab to navigate to ➕
Click on the ➕ icon to open the compose menu
With the Up and Down Arrow keys, track the movement of the selected menu item. Selected Menu item should be in grey background.
On selecting a particular menu item and pressing Enter key it should open the respective menu.
a. Request Money, it should Request Money RHS
b. Send Money, should open Send Money RHS
c. Add attachment, should open File Picker
Escape should hide the Popover

B. Payment Method List

Open the RHS by clicking the profile picture
Click on the Payments Menu
Click on the "Add Payment method"
With the Up and Down Arrow keys, track the movement of the selected menu item. Selected Menu item should be in grey background.
On selecting a particular menu item and pressing Enter key it should open the respective menu.
a. Debit Card, should open the Add Debit card page
b. Bank Account, should open the Plaid popup
Escape should hide the Popover

C. Sidebar Screen/FAB Menu

On the Home Screen, click on the Green FAB (floating action button)
With the Up and Down Arrow keys, track the movement of the selected menu item. Selected Menu item should be in grey background.
On selecting a particular menu item and pressing Enter key it should open the respective menu.
a. New Chat, should open New chat search screen
b. New Group, should open Search Member selection screen
c. Send Money, should open IOU Amount screen, with title "Send Money"
d. Request Money, should open IOU Amount screen, with title "Request Money"
c. Split Bill, should open IOU Amount screen, with title "Split Bill"
Escape should hide the Popover

D. Button with Menu (IOU Payments Settlement options)

Find any chat with outstanding IOU
Click on the amount in the LHS, it should open up the IOU Transactions screen
At the bottom you should see Settlement Button, click on the down arrow button on the right
With the Up and Down Arrow keys, track the movement of the selected menu item. Selected Menu item should be in grey background.
Selecting the option from the menu, should set the title of the green settlement button to the selected menu item text
Escape should hide the Popover

E. Avatar Picker / Profile Picture

Open the Settings menu by clicking Profile Picture
Click on the Avatar on the RHS
Click on the camera icon (edit icon) on the Avatar
With the Up and Down Arrow keys, track the movement of the selected menu item. Selected Menu item should be in grey background.
If you don't have a profile picture then only one menu option will be available to upload the picture, clicking should open the File Manager
If you have a profile picture (upload one if you don't), then you should be able to navigate with arrow keys between "upload photo" and "remove photo"
Escape should hide the Popover

F. Workspace Menu/Three Dots Menu

Open the Settings Menu clicking the Profile Picture
Select any workspace on the RHS
Open the Three Dots Menu ()
With the Up and Down Arrow keys, track the movement of the selected menu item. Selected Menu item should be in grey background.
On selecting a particular menu item and pressing Enter key it should do the following:
a. "New Workspace", should create a new Workspace
b. "Delete Workspace", should open the confirm delete popup.
Escape should hide the Popover

Mobile Web, iOS and Android App

A. Report Action Composer

Keyboard shortcuts won't work here, so we click the FAB (➕) button
For this we just need to check that clicking each menu item should open its respective menu
No crashes or exceptions on these items.
Tapping outside the popover should close it.

B. Payment Method List

Open the RHS by clicking the profile picture
Click on the Payments Menu
Click on the "Add Payment method"
For this we just need to check that clicking each menu item should open its respective menu
No crashes or exceptions on these items.
Tapping outside the popover should close it.

C. Sidebar Screen/FAB Menu

On the Home Screen/Chat List screen, click on the Green FAB (floating action button)
For this we just need to check that clicking each menu item should open its respective menu
No crashes or exceptions on these items.
Tapping outside the popover should close it.

D. Button with Menu (IOU Payments Settlement options)

Find any chat with outstanding IOU
Click on the amount in the LHS, it should open up the IOU Transactions screen
At the bottom you should see Settlement Button, click on the down arrow button on the right
Selecting the option from the menu, should set the title of the green settlement button to the selected menu item text
Tapping outside the popover should close it.

E. Avatar Picker / Profile Picture

Open the Settings menu by clicking Profile Picture
Click on the Avatar on the RHS
Click on the camera icon (edit icon) on the Avatar
If you don't have a profile picture then only one menu option will be available to upload the picture, clicking should open the File Manager
If you have a profile picture (upload one if you don't), then you should be able to navigate with arrow keys between "upload photo" and "remove photo"
Tapping outside the popover should close it.

F. Workspace Menu/Three Dots Menu

Open the Settings Menu clicking the Profile Picture
Select any workspace on the RHS
Open the Three Dots Menu ()
On selecting a particular menu item and pressing Enter key it should do the following:
a. "New Workspace", should create a new Workspace
b. "Delete Workspace", should open the confirm delete popup.
Tapping outside the popover should close it.

Verify that no errors appear in the JS console

PR Review Checklist

Contributor (PR Author) Checklist

Screenshots

Web

Composer Menu

web-compose-menu-keyboard-nav.mp4

Sidebar Screen

web-keyboard-nav-sidebar-screen_WtH8rIlj.mp4

Avatar Image Picker

web-keyboard-nav-avatar-picker_xOlxmbxf.mp4

Button with Menu

web-keyboard-nav-button-with-menu_TRtqcUdP.mp4

Payments Menu

web-keyboard-nav-payments-menu_hVMmGCdR.mp4

Workspace Menu/Three Dots Menu

web-keyboard-nav-threedots-menu.mp4

Mobile Web

mweb-compose-menu-keyboard-nav.mp4

Desktop

Composer Menu

desktop-compose-menu-keyboard-nav.mp4

All Components (mentioned in the Web individually)

desktop-keyboard-nav-all-components_W1LqyYy5.mp4

Workspace/ThreeDots Menu (revised)

desktop-keyboard-nav-threedots-menu.mp4

iOS

ios-compose-menu-keyboard-nav.mp4

Android

android-compose-menu-keyboard-nav.mp4

mananjadhav · 2022-02-20T12:32:51Z

@parasharrajat @puneetlath PR Raised.

Questions:

The QA steps in the linked issue says "Cmd+Tab", I am guessing they mean "Shift+Tab" and not Command.
I've kept the border radius on focus as 0 for the blue border.
For a single menu item, it doesn't do anything, just shows a blue border

parasharrajat

Tab focus has this UI

And when we hover the blue border hides.

src/components/PopoverMenu/BasePopoverMenu.js

mananjadhav · 2022-02-20T14:53:53Z

Tab focus has this UI

Hmm. I checked Arrow keys, not Tab. So should we also change activeMenuIndex based on Tab movement?

parasharrajat · 2022-02-20T14:57:18Z

Tab movement automatically works. You just need to adjust the Border UI>

Shift+tab.
Tab.
Arrow keys

All should focus on the item. Which it does but UI needs to be adjusted. @mananjadhav could you please record a video for all in the above list. So that we can assess UI. cc: @Expensify/design

mananjadhav · 2022-02-20T16:05:22Z

You just need to adjust the Border UI

Done

Tab movement automatically works.

It works but is not in sync with Arrow keys. If I am at the second menu item, pressing the Tab should take me to the third menu item, it doesn't. What I'll have to do is update activeMenuIndex with Tab and Shift+Tab as well. Here's the video of the problem.

screen-recording-2022-02-20-at-92930-pm_NZ1mw0Ef.mp4

parasharrajat · 2022-02-20T16:16:20Z

Yeah, That as well. Thanks for bringing this up. You can use the OnFocus event. That should suffice.

src/components/PopoverMenu/BasePopoverMenu.js

src/components/PopoverMenu/index.native.js

shawnborton · 2022-02-21T09:20:07Z

It looks like tabbing between menu items causes the items to slightly jump around. Could you please take a look at that? Perhaps it's due to the outline style that's being applied, but it looks like we're getting small 1-2px movements. I think the menu should stay perfectly in place and not move around, and you should only see outline styles being applied to the focused item.

parasharrajat · 2022-02-21T13:35:20Z

I agree with @shawnborton 's comment. This is happening as the not-focused item does not have any border but focused has which takes 1px on each edge.

To fix this, I think we should use a transparent border for not-focused state so it does not cause a layout shift.

…eyboard-navigation-actions-menu

parasharrajat · 2022-02-27T15:42:19Z

cc: @mananjadhav ⬆️

parasharrajat · 2022-02-27T15:46:10Z

@mananjadhav Do you think we can reuse code from #7702? I was hoping to create a generic utility to manage arrow navigation as this is common to a few components but It seems Rory already created it in the linked PR. We can reuse that in this PR. Let's hold it till that PR is merged.

mananjadhav · 2022-02-27T16:05:29Z

Was reviewing. Yeah looks like we can reuse. Lets wait for it to get merged.

parasharrajat · 2022-02-27T16:06:29Z

Please use HOLD in the title for clear indication.

…navigation-actions-menu

mananjadhav · 2022-09-03T19:32:14Z

@roryabraham @parasharrajat PR is updated by making the keyboard navigation available by default. Also updated the screencasts and QA steps for the additional components. Please take a look.

I found one issue, which isn't related to my change afaik, when clicking the menu items in the ThreeDotsMenu, the popover doesn't close. What do you think of putting it outside the scope of this PR?

roryabraham · 2022-09-05T08:05:07Z

Thanks for adding screenshots and QA steps! However, I'm not able to reproduce the ThreeDotsMenu issue on staging, so I think we need to address it here

mananjadhav · 2022-09-05T08:10:07Z

Thanks for adding screenshots and QA steps! However, I'm not able to reproduce the ThreeDotsMenu issue on staging, so I think we need to address it here

In the current PR, it works fine for all the other components, except for ThreeDotsMenu. Let me check once again. Thanks for pointing it out.

roryabraham · 2022-09-05T08:10:21Z

It looks like what's happening is:

ThreeDots icon is focused
When you open the PopoverMenu, the focus shifts to that
You use the arrow keys to select an option from the PopoverMenu.
Then you press enter to select the highlighted option from the PopoverMenu
This executes the callback and closes the PopoverMenu, and the focus shifts back to the ThreeDots icon. The same Enter event fires on the ThreeDots menu and it reopens.

Something like that

…navigation-actions-menu

mananjadhav · 2022-09-05T11:28:12Z

@roryabraham @parasharrajat Fix added for ThreeDotsMenu. Ready for review.

parasharrajat · 2022-09-05T14:15:18Z

Reviewing now.

roryabraham

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- iOS / native
- Android / native
- iOS / Safari
- Android / Chrome
- MacOS / Chrome
- MacOS / Desktop
I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product was added in all src/languages/* files
- I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- Any functional components have the displayName property
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

roryabraham · 2022-09-06T07:39:53Z

LGTM and tests well

mountiny

Code lgtm! Great job @mananjadhav being persistent with this issue!

roryabraham · 2022-09-06T11:41:56Z

Merging this because I think the checklist PR checks are not working as expected

melvin-bot · 2022-09-06T11:42:18Z

@roryabraham looks like this was merged without passing tests. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

roryabraham · 2022-09-06T11:42:51Z

Not an emergency, see above comment

roryabraham · 2022-09-06T11:43:39Z

Echoing @mountiny's sentiment above, thanks so much for your patience and persistence with this issue. I love how we really applied this solution in a generalized way across the app

AndrewGable · 2022-09-06T11:44:07Z

This was using an old checklist, please make sure to use the latest one from main on older PRs 👍

roryabraham · 2022-09-06T11:44:34Z

Ah, my mistake! Thanks @AndrewGable

parasharrajat

Lol, this is merged by my testing is still not completed. The List is very big. But code is looking good.

parasharrajat · 2022-09-06T11:57:38Z

src/components/ThreeDotsMenu/index.js

        this.state = {
            isPopupMenuVisible: false,
        };
+        this.button = null;


NAB: Not needed.

mananjadhav · 2022-09-06T13:47:24Z

Lol, this is merged by my testing is still not completed

Do ping me if you find anything and I'll try to quickly raise another PR to address any issue/bug.

OSBotify · 2022-09-08T01:21:39Z

🚀 Deployed to staging by @roryabraham in version: 1.1.98-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

parasharrajat · 2022-09-09T10:05:30Z

I forgot to leave the note here. Everything is looking good. I didn't find any issues caused by this PR.

Just for Automation's sake...

PR Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- iOS / native
- Android / native
- iOS / Safari
- Android / Chrome
- MacOS / Chrome
- MacOS / Desktop
I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product was added in all src/languages/* files
- I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- Any functional components have the displayName property
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

🎀 👀 🎀 C+ reviewed

mananjadhav added 7 commits February 20, 2022 10:08

feat: Add keyboard nav prop

7442217

feat: MenuItem focused handling

7b4f2c4

feat: Added keyboard nav handling to BasePopover

04c7aa6

feat: Force disabled keyboard nav to native popover

0fff2ee

feat: Added border color focus and nav to compose actions

22c2ec4

feat: Added separate styles for menu Item

8e56bab

feat: Reset activeMenuIndex on Popver close

375193f

mananjadhav requested a review from a team as a code owner February 20, 2022 12:29

MelvinBot requested review from parasharrajat and puneetlath and removed request for a team February 20, 2022 12:29

parasharrajat suggested changes Feb 20, 2022

View reviewed changes

src/components/PopoverMenu/BasePopoverMenu.js Outdated Show resolved Hide resolved

feat: Removed side borders

0832d6b

parasharrajat reviewed Feb 20, 2022

View reviewed changes

src/components/PopoverMenu/BasePopoverMenu.js Outdated Show resolved Hide resolved

parasharrajat suggested changes Feb 20, 2022

View reviewed changes

src/components/PopoverMenu/index.native.js Outdated Show resolved Hide resolved

Merge branch 'main' of https://github.com/mananjadhav/App into feat/k…

88e3d61

…eyboard-navigation-actions-menu

mananjadhav changed the title ~~feat: Added keyboard navigation to Compose Actions Menu~~ [Hold for PR 7702] feat: Added keyboard navigation to Compose Actions Menu Feb 27, 2022

puneetlath requested review from mountiny and removed request for puneetlath March 4, 2022 01:54

mananjadhav added 2 commits September 3, 2022 22:48

Merge branch 'main' of github.com:mananjadhav/App into feat/keyboard-…

2d5d8d2

…navigation-actions-menu

refactor: make keyboard actions available by default

8a227c4

mananjadhav added 2 commits September 5, 2022 15:53

Merge branch 'main' of github.com:mananjadhav/App into feat/keyboard-…

eb15a01

…navigation-actions-menu

fix: update threedots menu popover visibility logic

c446f9d

mountiny requested a review from roryabraham September 5, 2022 11:47

roryabraham approved these changes Sep 6, 2022

View reviewed changes

AndrewGable mentioned this pull request Sep 6, 2022

New Contributor Checklist is running on issue comments #10802

Closed

mountiny approved these changes Sep 6, 2022

View reviewed changes

roryabraham merged commit 14643ff into Expensify:main Sep 6, 2022

melvin-bot bot added the Emergency label Sep 6, 2022

roryabraham removed the Emergency label Sep 6, 2022

parasharrajat reviewed Sep 6, 2022

View reviewed changes

OSBotify mentioned this pull request Sep 8, 2022

Deploy Checklist: New Expensify 2022-09-08 #10883

Closed

25 tasks

mananjadhav mentioned this pull request Feb 16, 2023

fix/14954: "Email" title is displayed on the detail page instead of "Phone number" after creating a chat with an invalid number #15122

Merged

54 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Added keyboard navigation to Compose Actions Menu #7846

feat: Added keyboard navigation to Compose Actions Menu #7846

mananjadhav commented Feb 20, 2022 •

edited

Loading

mananjadhav commented Feb 20, 2022

parasharrajat left a comment

mananjadhav commented Feb 20, 2022

parasharrajat commented Feb 20, 2022

mananjadhav commented Feb 20, 2022

parasharrajat commented Feb 20, 2022

shawnborton commented Feb 21, 2022

parasharrajat commented Feb 21, 2022

parasharrajat commented Feb 27, 2022

parasharrajat commented Feb 27, 2022

mananjadhav commented Feb 27, 2022

parasharrajat commented Feb 27, 2022 •

edited

Loading

mananjadhav commented Sep 3, 2022

roryabraham commented Sep 5, 2022

mananjadhav commented Sep 5, 2022

roryabraham commented Sep 5, 2022

mananjadhav commented Sep 5, 2022

parasharrajat commented Sep 5, 2022

roryabraham left a comment

roryabraham commented Sep 6, 2022

mountiny left a comment •

edited

Loading

roryabraham commented Sep 6, 2022

melvin-bot bot commented Sep 6, 2022

roryabraham commented Sep 6, 2022

roryabraham commented Sep 6, 2022

AndrewGable commented Sep 6, 2022

roryabraham commented Sep 6, 2022

parasharrajat left a comment •

edited

Loading

parasharrajat Sep 6, 2022 •

edited

Loading

mananjadhav commented Sep 6, 2022

OSBotify commented Sep 8, 2022

parasharrajat commented Sep 9, 2022

feat: Added keyboard navigation to Compose Actions Menu #7846

feat: Added keyboard navigation to Compose Actions Menu #7846

Conversation

mananjadhav commented Feb 20, 2022 • edited Loading

Details

Fixed Issues

Tests

QA Steps

PR Review Checklist

Contributor (PR Author) Checklist

Screenshots

Web

Mobile Web

Desktop

iOS

Android

mananjadhav commented Feb 20, 2022

parasharrajat left a comment

Choose a reason for hiding this comment

mananjadhav commented Feb 20, 2022

parasharrajat commented Feb 20, 2022

mananjadhav commented Feb 20, 2022

parasharrajat commented Feb 20, 2022

shawnborton commented Feb 21, 2022

parasharrajat commented Feb 21, 2022

parasharrajat commented Feb 27, 2022

parasharrajat commented Feb 27, 2022

mananjadhav commented Feb 27, 2022

parasharrajat commented Feb 27, 2022 • edited Loading

mananjadhav commented Sep 3, 2022

roryabraham commented Sep 5, 2022

mananjadhav commented Sep 5, 2022

roryabraham commented Sep 5, 2022

mananjadhav commented Sep 5, 2022

parasharrajat commented Sep 5, 2022

roryabraham left a comment

Choose a reason for hiding this comment

roryabraham commented Sep 6, 2022

mountiny left a comment • edited Loading

Choose a reason for hiding this comment

roryabraham commented Sep 6, 2022

melvin-bot bot commented Sep 6, 2022

roryabraham commented Sep 6, 2022

roryabraham commented Sep 6, 2022

AndrewGable commented Sep 6, 2022

roryabraham commented Sep 6, 2022

parasharrajat left a comment • edited Loading

Choose a reason for hiding this comment

parasharrajat Sep 6, 2022 • edited Loading

Choose a reason for hiding this comment

mananjadhav commented Sep 6, 2022

OSBotify commented Sep 8, 2022

parasharrajat commented Sep 9, 2022

PR Reviewer Checklist

mananjadhav commented Feb 20, 2022 •

edited

Loading

parasharrajat commented Feb 27, 2022 •

edited

Loading

mountiny left a comment •

edited

Loading

parasharrajat left a comment •

edited

Loading

parasharrajat Sep 6, 2022 •

edited

Loading