Skip to content

Remote video tile keyboard accessible to open menu#2651

Merged
mgamis-msft merged 8 commits intomainfrom
mgamis/remote-video-tile-menu-accessible
Jan 14, 2023
Merged

Remote video tile keyboard accessible to open menu#2651
mgamis-msft merged 8 commits intomainfrom
mgamis/remote-video-tile-menu-accessible

Conversation

@mgamis-msft
Copy link
Copy Markdown
Contributor

What

Make RemoteVideoTile menu keyboard accessible to open menu

Why

https://skype.visualstudio.com/SPOOL/_workitems/edit/3091719

How Tested

Local sample testing
Desktop: https://user-images.githubusercontent.com/79475487/212334291-aa21dea2-2f03-4371-bf71-0faac8b367eb.mp4
Emulated mobile on browser: https://user-images.githubusercontent.com/79475487/212334405-209467be-5593-42d8-b9bd-e368b3e1ea22.mp4

Process & policy checklist

  • I have updated the project documentation to reflect my changes if necessary.
  • I have read the CONTRIBUTING documentation.

Is this a breaking change?

  • This change causes current functionality to break.

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 13, 2023

Calling bundle size is increased❗.

  • Current size: 5502057
  • Base size: 5501923
  • Diff size: 134

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 13, 2023

Chat bundle size is increased❗.

  • Current size: 5586373
  • Base size: 5586238
  • Diff size: 135

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 13, 2023

CallWithChat bundle size is increased❗.

  • Current size: 5886549
  • Base size: 5886415
  • Diff size: 134

@github-actions
Copy link
Copy Markdown
Contributor

@mgamis-msft mgamis-msft force-pushed the mgamis/remote-video-tile-menu-accessible branch from 0c53b35 to 8d1c291 Compare January 13, 2023 14:02
@github-actions
Copy link
Copy Markdown
Contributor

<Stack style={remoteVideoTileWrapperStyle}>
<Stack
/* @conditional-compile-remove(pinned-participants) */
tabIndex={remoteVideoTileMenuKind === 'drawer' ? 0 : undefined}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

why are we setting the tab order of the video tile to 0 when it will show a drawer? it shouldn't be any different for mobile incase the user uses a bluetooth keyboard.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

My assumption here is that when menuKind is contextmenu it has the three dots that can be focused and clicked instead?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yes James is right. When the menuKind is 'contextual' then ellipses button will be present and keyboard accessible so we don't need to focus on the remote video tile. I don't think we want the keyboard user to tab on a remote video tile and then have to tab again to focus on the ellipses button to open the contextual menu:

2023-01-13.10-52-32.mp4

But let me know if this is desired.

/* @conditional-compile-remove(pinned-participants) */
tabIndex={remoteVideoTileMenuKind === 'drawer' ? 0 : undefined}
/* @conditional-compile-remove(pinned-participants) */
onKeyDown={remoteVideoTileMenuKind === 'drawer' ? onKeyDown : undefined}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

should this handler only be used when its a drawer over a context menu? the handler you wrote will work for desktop no?

Copy link
Copy Markdown
Contributor Author

@mgamis-msft mgamis-msft Jan 13, 2023

Choose a reason for hiding this comment

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

Yes, the handler should only be assigned when menuKind = 'drawer'. The RemoteVideoTile will be assigned menuKind = 'drawer' when the VGL is on mobile and menuKind = 'contextual' when the VGL is on desktop. We don't want the handler to be active on Desktop like so:

2023-01-13.10-55-15.mp4

@github-actions
Copy link
Copy Markdown
Contributor

@github-actions
Copy link
Copy Markdown
Contributor

@mgamis-msft mgamis-msft enabled auto-merge (squash) January 14, 2023 12:55
@github-actions
Copy link
Copy Markdown
Contributor

@mgamis-msft mgamis-msft merged commit 533e2e6 into main Jan 14, 2023
@mgamis-msft mgamis-msft deleted the mgamis/remote-video-tile-menu-accessible branch January 14, 2023 13:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants