From 6fe9387b258783120563d179d79d5deca968fac2 Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 28 Feb 2024 16:44:29 -0300
Subject: [PATCH] chore: Sidebar toolbar keyboard navigation (#31846)
---
apps/meteor/client/sidebar/header/Header.tsx | 7 ++---
.../client/sidebar/header/HeaderUnstable.tsx | 5 ++--
.../sidebar/header/SidebarHeaderToolbar.tsx | 13 ++++++++++
.../sidebar/sections/OmnichannelSection.tsx | 9 ++++---
apps/meteor/package.json | 2 +-
ee/packages/ui-theming/package.json | 2 +-
packages/fuselage-ui-kit/package.json | 2 +-
packages/gazzodown/package.json | 2 +-
packages/i18n/src/locales/en.i18n.json | 2 ++
packages/ui-avatar/package.json | 2 +-
packages/ui-client/package.json | 2 +-
packages/ui-composer/package.json | 2 +-
packages/ui-video-conf/package.json | 2 +-
packages/uikit-playground/package.json | 2 +-
yarn.lock | 26 +++++++++----------
15 files changed, 49 insertions(+), 31 deletions(-)
create mode 100644 apps/meteor/client/sidebar/header/SidebarHeaderToolbar.tsx
diff --git a/apps/meteor/client/sidebar/header/Header.tsx b/apps/meteor/client/sidebar/header/Header.tsx
index 8b1c838f8d6..b7f00af460a 100644
--- a/apps/meteor/client/sidebar/header/Header.tsx
+++ b/apps/meteor/client/sidebar/header/Header.tsx
@@ -1,8 +1,9 @@
import { Sidebar } from '@rocket.chat/fuselage';
-import { useUser, useTranslation } from '@rocket.chat/ui-contexts';
+import { useTranslation, useUser } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React, { memo } from 'react';
+import SidebarHeaderToolbar from './SidebarHeaderToolbar';
import UserAvatarWithStatus from './UserAvatarWithStatus';
import UserMenu from './UserMenu';
import Administration from './actions/Administration';
@@ -26,7 +27,7 @@ const Header = (): ReactElement => {
return (
<Sidebar.TopBar.Section>
{user ? <UserMenu user={user} /> : <UserAvatarWithStatus />}
- <Sidebar.TopBar.Actions>
+ <SidebarHeaderToolbar aria-label={t('Sidebar_actions')}>
<Home title={t('Home')} />
<Search title={t('Search')} />
{user && (
@@ -38,7 +39,7 @@ const Header = (): ReactElement => {
</>
)}
{!user && <Login title={t('Login')} />}
- </Sidebar.TopBar.Actions>
+ </SidebarHeaderToolbar>
</Sidebar.TopBar.Section>
);
};
diff --git a/apps/meteor/client/sidebar/header/HeaderUnstable.tsx b/apps/meteor/client/sidebar/header/HeaderUnstable.tsx
index c732b646ccc..ac6929bf2fb 100644
--- a/apps/meteor/client/sidebar/header/HeaderUnstable.tsx
+++ b/apps/meteor/client/sidebar/header/HeaderUnstable.tsx
@@ -3,6 +3,7 @@ import { useUserId, useTranslation } from '@rocket.chat/ui-contexts';
import type { ReactElement } from 'react';
import React, { memo } from 'react';
+import SidebarHeaderToolbar from './SidebarHeaderToolbar';
import CreateRoom from './actions/CreateRoom';
import Directory from './actions/Directory';
import Login from './actions/Login';
@@ -15,7 +16,7 @@ const HeaderUnstable = (): ReactElement => {
return (
<Sidebar.TopBar.Section>
- <Sidebar.TopBar.Actions align='end'>
+ <SidebarHeaderToolbar align='end' aria-label={t('Sidebar_actions')}>
<Search title={t('Search')} />
{uid && (
<>
@@ -25,7 +26,7 @@ const HeaderUnstable = (): ReactElement => {
</>
)}
{!uid && <Login title={t('Login')} />}
- </Sidebar.TopBar.Actions>
+ </SidebarHeaderToolbar>
</Sidebar.TopBar.Section>
);
};
diff --git a/apps/meteor/client/sidebar/header/SidebarHeaderToolbar.tsx b/apps/meteor/client/sidebar/header/SidebarHeaderToolbar.tsx
new file mode 100644
index 00000000000..d897c352072
--- /dev/null
+++ b/apps/meteor/client/sidebar/header/SidebarHeaderToolbar.tsx
@@ -0,0 +1,13 @@
+import { useToolbar } from '@react-aria/toolbar';
+import { TopBarActions } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import React, { useRef } from 'react';
+
+const SidebarHeaderToolbar = (props: ComponentProps<typeof TopBarActions>) => {
+ const ref = useRef(null);
+ const { toolbarProps } = useToolbar(props, ref);
+
+ return <TopBarActions small ref={ref} {...toolbarProps} {...props} />;
+};
+
+export default SidebarHeaderToolbar;
diff --git a/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx b/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx
index c4538166bba..6dd63e6a36d 100644
--- a/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx
+++ b/apps/meteor/client/sidebar/sections/OmnichannelSection.tsx
@@ -6,6 +6,7 @@ import React, { memo } from 'react';
import { useIsCallEnabled, useIsCallReady } from '../../contexts/CallContext';
import { useIsOverMacLimit } from '../../hooks/omnichannel/useIsOverMacLimit';
import { useOmnichannelShowQueueLink } from '../../hooks/omnichannel/useOmnichannelShowQueueLink';
+import SidebarHeaderToolbar from '../header/SidebarHeaderToolbar';
import { OverMacLimitSection } from './OverMacLimitSection';
import { OmniChannelCallDialPad, OmnichannelCallToggle, OmnichannelLivechatToggle } from './actions';
@@ -38,9 +39,9 @@ const OmnichannelSection = () => {
<>
{isWorkspaceOverMacLimit && <OverMacLimitSection />}
- <Sidebar.TopBar.ToolBox className='omnichannel-sidebar'>
+ <Sidebar.TopBar.Section aria-label={t('Omnichannel_actions')} className='omnichannel-sidebar'>
<Sidebar.TopBar.Title>{t('Omnichannel')}</Sidebar.TopBar.Title>
- <Sidebar.TopBar.Actions>
+ <SidebarHeaderToolbar>
{showOmnichannelQueueLink && (
<Sidebar.TopBar.Action icon='queue' data-tooltip={t('Queue')} onClick={(): void => handleRoute('queue')} />
)}
@@ -55,8 +56,8 @@ const OmnichannelSection = () => {
/>
)}
{isCallReady && <OmniChannelCallDialPad />}
- </Sidebar.TopBar.Actions>
- </Sidebar.TopBar.ToolBox>
+ </SidebarHeaderToolbar>
+ </Sidebar.TopBar.Section>
</>
);
};
diff --git a/apps/meteor/package.json b/apps/meteor/package.json
index 13a749652ce..113b9979f49 100644
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@@ -240,7 +240,7 @@
"@rocket.chat/favicon": "workspace:^",
"@rocket.chat/forked-matrix-appservice-bridge": "^4.0.2",
"@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.3",
- "@rocket.chat/fuselage": "^0.47.1",
+ "@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/fuselage-hooks": "^0.33.0",
"@rocket.chat/fuselage-polyfills": "~0.31.25",
"@rocket.chat/fuselage-toastbar": "~0.31.25",
diff --git a/ee/packages/ui-theming/package.json b/ee/packages/ui-theming/package.json
index a8945368b45..8243c3a9d66 100644
--- a/ee/packages/ui-theming/package.json
+++ b/ee/packages/ui-theming/package.json
@@ -4,7 +4,7 @@
"private": true,
"devDependencies": {
"@rocket.chat/css-in-js": "~0.31.25",
- "@rocket.chat/fuselage": "^0.47.1",
+ "@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/fuselage-hooks": "^0.33.0",
"@rocket.chat/icons": "^0.33.0",
"@rocket.chat/ui-contexts": "workspace:~",
diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json
index f4a8fb062e8..068e559f101 100644
--- a/packages/fuselage-ui-kit/package.json
+++ b/packages/fuselage-ui-kit/package.json
@@ -63,7 +63,7 @@
"@babel/preset-typescript": "~7.22.15",
"@rocket.chat/apps-engine": "1.41.0",
"@rocket.chat/eslint-config": "workspace:^",
- "@rocket.chat/fuselage": "^0.47.1",
+ "@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/fuselage-hooks": "^0.33.0",
"@rocket.chat/fuselage-polyfills": "~0.31.25",
"@rocket.chat/icons": "^0.33.0",
diff --git a/packages/gazzodown/package.json b/packages/gazzodown/package.json
index 73b164905f9..b95a374fe96 100644
--- a/packages/gazzodown/package.json
+++ b/packages/gazzodown/package.json
@@ -6,7 +6,7 @@
"@babel/core": "~7.22.20",
"@rocket.chat/core-typings": "workspace:^",
"@rocket.chat/css-in-js": "~0.31.25",
- "@rocket.chat/fuselage": "^0.47.1",
+ "@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/fuselage-tokens": "~0.32.0",
"@rocket.chat/message-parser": "workspace:^",
"@rocket.chat/styled": "~0.31.25",
diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json
index 9088b80f467..271907a68ca 100644
--- a/packages/i18n/src/locales/en.i18n.json
+++ b/packages/i18n/src/locales/en.i18n.json
@@ -3162,6 +3162,7 @@
"Livechat_offline_message_sent": "Livechat offline message sent",
"Livechat_OfflineMessageToChannel_enabled": "Send Livechat offline messages to a channel",
"Omnichannel_chat_closed_due_to_inactivity": "The chat was automatically closed because we haven't received any reply from {{guest}} in {{timeout}} seconds",
+ "Omnichannel_actions": "Omnichannel actions",
"Omnichannel_on_hold_chat_resumed": "On Hold Chat Resumed: {{comment}}",
"Omnichannel_on_hold_chat_automatically": "The chat was automatically resumed from On Hold upon receiving a new message from {{guest}}",
"Omnichannel_on_hold_chat_resumed_manually": "The chat was manually resumed from On Hold by {{user}}",
@@ -4816,6 +4817,7 @@
"Show_or_hide_the_user_roles_of_message_authors": "Show or hide the user roles of message authors.",
"Show_or_hide_the_username_of_message_authors": "Show or hide the username of message authors.",
"Sidebar": "Sidebar",
+ "Sidebar_actions": "Sidebar actions",
"Sidebar_list_mode": "Sidebar Channel List Mode",
"Sign_in_to_start_talking": "Sign in to start talking",
"Sign_in_with__provider__": "Sign in with {{provider}}",
diff --git a/packages/ui-avatar/package.json b/packages/ui-avatar/package.json
index f64c5a2383a..7bf05ddaf25 100644
--- a/packages/ui-avatar/package.json
+++ b/packages/ui-avatar/package.json
@@ -4,7 +4,7 @@
"private": true,
"devDependencies": {
"@babel/core": "~7.22.20",
- "@rocket.chat/fuselage": "^0.47.1",
+ "@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/ui-contexts": "workspace:^",
"@types/babel__core": "~7.20.3",
"@types/react": "~17.0.69",
diff --git a/packages/ui-client/package.json b/packages/ui-client/package.json
index 360e7ef8c02..29518b2febe 100644
--- a/packages/ui-client/package.json
+++ b/packages/ui-client/package.json
@@ -6,7 +6,7 @@
"@babel/core": "~7.22.20",
"@react-aria/toolbar": "^3.0.0-beta.1",
"@rocket.chat/css-in-js": "~0.31.25",
- "@rocket.chat/fuselage": "^0.47.1",
+ "@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/fuselage-hooks": "^0.33.0",
"@rocket.chat/icons": "^0.33.0",
"@rocket.chat/mock-providers": "workspace:^",
diff --git a/packages/ui-composer/package.json b/packages/ui-composer/package.json
index 468c45b1c39..bc63d18be2b 100644
--- a/packages/ui-composer/package.json
+++ b/packages/ui-composer/package.json
@@ -6,7 +6,7 @@
"@babel/core": "~7.22.20",
"@react-aria/toolbar": "^3.0.0-beta.1",
"@rocket.chat/eslint-config": "workspace:^",
- "@rocket.chat/fuselage": "^0.47.1",
+ "@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/icons": "^0.33.0",
"@storybook/addon-actions": "~6.5.16",
"@storybook/addon-docs": "~6.5.16",
diff --git a/packages/ui-video-conf/package.json b/packages/ui-video-conf/package.json
index 5fa7370d0d2..2bdc366985b 100644
--- a/packages/ui-video-conf/package.json
+++ b/packages/ui-video-conf/package.json
@@ -6,7 +6,7 @@
"@babel/core": "~7.22.20",
"@rocket.chat/css-in-js": "~0.31.25",
"@rocket.chat/eslint-config": "workspace:^",
- "@rocket.chat/fuselage": "^0.47.1",
+ "@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/fuselage-hooks": "^0.33.0",
"@rocket.chat/icons": "^0.33.0",
"@rocket.chat/styled": "~0.31.25",
diff --git a/packages/uikit-playground/package.json b/packages/uikit-playground/package.json
index f9aa9987a65..f46a2a6f634 100644
--- a/packages/uikit-playground/package.json
+++ b/packages/uikit-playground/package.json
@@ -15,7 +15,7 @@
"@codemirror/tooltip": "^0.19.16",
"@lezer/highlight": "^1.1.6",
"@rocket.chat/css-in-js": "~0.31.25",
- "@rocket.chat/fuselage": "^0.47.1",
+ "@rocket.chat/fuselage": "^0.48.0",
"@rocket.chat/fuselage-hooks": "^0.33.0",
"@rocket.chat/fuselage-polyfills": "~0.31.25",
"@rocket.chat/fuselage-toastbar": "^0.31.25",
diff --git a/yarn.lock b/yarn.lock
index c0ec55ab90f..42180b9cb17 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8717,7 +8717,7 @@ __metadata:
"@babel/preset-typescript": ~7.22.15
"@rocket.chat/apps-engine": 1.41.0
"@rocket.chat/eslint-config": "workspace:^"
- "@rocket.chat/fuselage": ^0.47.1
+ "@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/fuselage-hooks": ^0.33.0
"@rocket.chat/fuselage-polyfills": ~0.31.25
"@rocket.chat/gazzodown": "workspace:^"
@@ -8772,9 +8772,9 @@ __metadata:
languageName: unknown
linkType: soft
-"@rocket.chat/fuselage@npm:^0.47.1":
- version: 0.47.1
- resolution: "@rocket.chat/fuselage@npm:0.47.1"
+"@rocket.chat/fuselage@npm:^0.48.0":
+ version: 0.48.0
+ resolution: "@rocket.chat/fuselage@npm:0.48.0"
dependencies:
"@rocket.chat/css-in-js": ^0.31.25
"@rocket.chat/css-supports": ^0.31.25
@@ -8792,7 +8792,7 @@ __metadata:
react: ^17.0.2
react-dom: ^17.0.2
react-virtuoso: 1.2.4
- checksum: d812e4ed52b53372268b4f5d396fb8d6aeb3f46a4f7e276642edf287ca2038f88e2a6d8bc0264f95fee1772aadc849419f7695e35cc6a278111efcbc18e1472d
+ checksum: d82121b6e6d0fa6ea204d8cbd2cc32460c4ca3585c05a1a1d908250c9150ed52edfd0acc75520cb29c6bd81a8671dc7d91f427913bcc4364a14b4eacd4bd2bf4
languageName: node
linkType: hard
@@ -8803,7 +8803,7 @@ __metadata:
"@babel/core": ~7.22.20
"@rocket.chat/core-typings": "workspace:^"
"@rocket.chat/css-in-js": ~0.31.25
- "@rocket.chat/fuselage": ^0.47.1
+ "@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/fuselage-tokens": ~0.32.0
"@rocket.chat/message-parser": "workspace:^"
"@rocket.chat/styled": ~0.31.25
@@ -9158,7 +9158,7 @@ __metadata:
"@rocket.chat/favicon": "workspace:^"
"@rocket.chat/forked-matrix-appservice-bridge": ^4.0.2
"@rocket.chat/forked-matrix-bot-sdk": ^0.6.0-beta.3
- "@rocket.chat/fuselage": ^0.47.1
+ "@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/fuselage-hooks": ^0.33.0
"@rocket.chat/fuselage-polyfills": ~0.31.25
"@rocket.chat/fuselage-toastbar": ~0.31.25
@@ -10037,7 +10037,7 @@ __metadata:
resolution: "@rocket.chat/ui-avatar@workspace:packages/ui-avatar"
dependencies:
"@babel/core": ~7.22.20
- "@rocket.chat/fuselage": ^0.47.1
+ "@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/ui-contexts": "workspace:^"
"@types/babel__core": ~7.20.3
"@types/react": ~17.0.69
@@ -10063,7 +10063,7 @@ __metadata:
"@babel/core": ~7.22.20
"@react-aria/toolbar": ^3.0.0-beta.1
"@rocket.chat/css-in-js": ~0.31.25
- "@rocket.chat/fuselage": ^0.47.1
+ "@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/fuselage-hooks": ^0.33.0
"@rocket.chat/icons": ^0.33.0
"@rocket.chat/mock-providers": "workspace:^"
@@ -10116,7 +10116,7 @@ __metadata:
"@babel/core": ~7.22.20
"@react-aria/toolbar": ^3.0.0-beta.1
"@rocket.chat/eslint-config": "workspace:^"
- "@rocket.chat/fuselage": ^0.47.1
+ "@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/icons": ^0.33.0
"@storybook/addon-actions": ~6.5.16
"@storybook/addon-docs": ~6.5.16
@@ -10208,7 +10208,7 @@ __metadata:
resolution: "@rocket.chat/ui-theming@workspace:ee/packages/ui-theming"
dependencies:
"@rocket.chat/css-in-js": ~0.31.25
- "@rocket.chat/fuselage": ^0.47.1
+ "@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/fuselage-hooks": ^0.33.0
"@rocket.chat/icons": ^0.33.0
"@rocket.chat/ui-contexts": "workspace:~"
@@ -10251,7 +10251,7 @@ __metadata:
"@rocket.chat/css-in-js": ~0.31.25
"@rocket.chat/emitter": ~0.31.25
"@rocket.chat/eslint-config": "workspace:^"
- "@rocket.chat/fuselage": ^0.47.1
+ "@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/fuselage-hooks": ^0.33.0
"@rocket.chat/icons": ^0.33.0
"@rocket.chat/styled": ~0.31.25
@@ -10296,7 +10296,7 @@ __metadata:
"@codemirror/tooltip": ^0.19.16
"@lezer/highlight": ^1.1.6
"@rocket.chat/css-in-js": ~0.31.25
- "@rocket.chat/fuselage": ^0.47.1
+ "@rocket.chat/fuselage": ^0.48.0
"@rocket.chat/fuselage-hooks": ^0.33.0
"@rocket.chat/fuselage-polyfills": ~0.31.25
"@rocket.chat/fuselage-toastbar": ^0.31.25
--
GitLab