chore: improve Tag a11y link (#30636)

RocketChat · Oct 15, 2023 · 169da3a · 169da3a
1 parent 5da4636
commit 169da3a
Show file tree

Hide file tree

Showing 13 changed files with 48 additions and 50 deletions.
diff --git a/apps/meteor/client/views/room/body/RoomForeword/RoomForewordUsernameList.tsx b/apps/meteor/client/views/room/body/RoomForeword/RoomForewordUsernameList.tsx
@@ -1,4 +1,5 @@
 import type { IUser } from '@rocket.chat/core-typings';
+import { Margins } from '@rocket.chat/fuselage';
 import { useSetting } from '@rocket.chat/ui-contexts';
 import type { VFC } from 'react';
 import React from 'react';
@@ -11,7 +12,7 @@ type RoomForewordUsernameListProps = { usernames: Array<NonNullable<IUser['usern
 const RoomForewordUsernameList: VFC<RoomForewordUsernameListProps> = ({ usernames }) => {
 	const useRealName = Boolean(useSetting('UI_Use_Real_Name'));
 	return (
-		<>
+		<Margins inline={4}>
 			{usernames.map((username) => (
 				<RoomForewordUsernameListItem
 					username={username}
@@ -20,7 +21,7 @@ const RoomForewordUsernameList: VFC<RoomForewordUsernameListProps> = ({ username
 					useRealName={useRealName}
 				/>
 			))}
-		</>
+		</Margins>
 	);
 };
 

diff --git a/apps/meteor/client/views/room/body/RoomForeword/RoomForewordUsernameListItem.tsx b/apps/meteor/client/views/room/body/RoomForeword/RoomForewordUsernameListItem.tsx
@@ -1,5 +1,5 @@
 import type { IUser } from '@rocket.chat/core-typings';
-import { Box, Icon, Tag, Skeleton } from '@rocket.chat/fuselage';
+import { Icon, Tag, Skeleton } from '@rocket.chat/fuselage';
 import type { VFC } from 'react';
 import React from 'react';
 
@@ -12,18 +12,15 @@ type RoomForewordUsernameListItemProps = {
 	useRealName: boolean;
 };
 
-// TODO: Improve `Tag` a11y to be used as a link
 const RoomForewordUsernameListItem: VFC<RoomForewordUsernameListItemProps> = ({ username, href, useRealName }) => {
 	const { data, isLoading, isError } = useUserInfoQuery({ username });
 
 	return (
-		<Box mi={4} is='a' href={href} style={{ textDecoration: 'none' }}>
-			<Tag icon={<Icon name='user' size='x20' />} className='mention-link' data-username={username} large>
-				{isLoading && <Skeleton variant='rect' />}
-				{!isLoading && isError && username}
-				{!isLoading && !isError && getUserDisplayName(data?.user?.name, username, useRealName)}
-			</Tag>
-		</Box>
+		<Tag icon={<Icon name='user' size='x20' />} data-username={username} large href={href}>
+			{isLoading && <Skeleton variant='rect' />}
+			{!isLoading && isError && username}
+			{!isLoading && !isError && getUserDisplayName(data?.user?.name, username, useRealName)}
+		</Tag>
 	);
 };
 

diff --git a/apps/meteor/package.json b/apps/meteor/package.json
@@ -236,7 +236,7 @@
 		"@rocket.chat/favicon": "workspace:^",
 		"@rocket.chat/forked-matrix-appservice-bridge": "^4.0.1",
 		"@rocket.chat/forked-matrix-bot-sdk": "^0.6.0-beta.2",
-		"@rocket.chat/fuselage": "^0.32.2",
+		"@rocket.chat/fuselage": "^0.34.0",
 		"@rocket.chat/fuselage-hooks": "^0.32.1",
 		"@rocket.chat/fuselage-polyfills": "next",
 		"@rocket.chat/fuselage-toastbar": "next",

diff --git 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": "next",
-		"@rocket.chat/fuselage": "^0.32.2",
+		"@rocket.chat/fuselage": "^0.34.0",
 		"@rocket.chat/fuselage-hooks": "^0.32.1",
 		"@rocket.chat/icons": "^0.32.0",
 		"@rocket.chat/ui-contexts": "workspace:~",

diff --git a/ee/packages/ui-theming/src/palette.ts b/ee/packages/ui-theming/src/palette.ts
@@ -46,8 +46,8 @@ export const palette = [
 			{ name: 'font-white', token: 'white', color: '#FFFFFF' },
 			{ name: 'font-disabled', token: 'N500', color: '#CBCED1' },
 			{ name: 'font-annotation', token: 'N600', color: '#9EA2A8' },
-			{ name: 'font-hint', token: 'N700', color: '#6C727A' },
-			{ name: 'font-secondary-info', token: 'N700', color: '#6C727A' },
+			{ name: 'font-hint', token: 'N700', color: '#6C737A' },
+			{ name: 'font-secondary-info', token: 'N700', color: '#6C737A' },
 			{ name: 'font-default', token: 'N800', color: '#2F343D' },
 			{ name: 'font-titles-labels', token: 'N900', color: '#1F2329' },
 			{ name: 'font-info', token: 'P600', color: '#095AD2' },
@@ -76,7 +76,7 @@ export const palette = [
 			{ name: 'status-font-on-info', token: 'P600', color: '#095AD2' },
 			{ name: 'status-font-on-success', token: 'S800', color: '#148660' },
 			{ name: 'status-font-on-danger', token: 'D800', color: '#9B1325' },
-			{ name: 'status-font-on-warning', token: 'W900', color: '#B88D00' },
+			{ name: 'status-font-on-warning', token: 'W900', color: '#8E6300' },
 			{ name: 'status-font-on-warning-2', token: 'N800', color: '#2F343D' },
 			{ name: 'status-font-on-service-1', token: 'S1-800', color: '#974809' },
 			{ name: 'status-font-on-service-2 ', token: 'S2-600', color: '#7F1B9F' },
@@ -88,22 +88,22 @@ export const palette = [
 		description: 'Badge Background',
 		list: [
 			{ name: 'badge-background-level-0', token: '', color: '#E4E7EA' },
-			{ name: 'badge-background-level-1', token: 'N700', color: '#6C727A' },
-			{ name: 'badge-background-level-2', token: '', color: '#1D74F5' },
+			{ name: 'badge-background-level-1', token: 'N700', color: '#6C737A' },
+			{ name: 'badge-background-level-2', token: '', color: '#156FF5' },
 			{ name: 'badge-background-level-3', token: '', color: '#F38C39' },
-			{ name: 'badge-background-level-4', token: '', color: '#F5455C' },
+			{ name: 'badge-background-level-4', token: '', color: '#EC0D2A' },
 		],
 	},
 	{
 		category: 'Status Bullet',
 		description: 'Used to show user status',
 		list: [
-			{ name: 'status-bullet-online', token: '', color: '#158D65' },
+			{ name: 'status-bullet-online', token: '', color: '#148660' },
 			{ name: 'status-bullet-away', token: '', color: '#AC892F' },
-			{ name: 'status-bullet-busy', token: '', color: '#DA1F37' },
+			{ name: 'status-bullet-busy', token: '', color: '#D40C26' },
 			{ name: 'status-bullet-disabled', token: '', color: '#F38C39' },
-			{ name: 'status-bullet-offline', token: '', color: '#AC892F' },
-			{ name: 'status-bullet-loading', token: '', color: '#9ea2a8' },
+			{ name: 'status-bullet-offline', token: '', color: '#6C737A' },
+			{ name: 'status-bullet-loading', token: '', color: '#6C737A' },
 		],
 	},
 	{
@@ -122,7 +122,7 @@ export const palette = [
 		list: [
 			{ name: 'button-background-primary-default', token: 'P500', color: '#156FF5' },
 			{ name: 'button-background-primary-hover', token: 'P600', color: '#095AD2' },
-			{ name: 'button-background-primary-press', token: 'P700', color: '#095AD2' },
+			{ name: 'button-background-primary-press', token: 'P700', color: '#10529E' },
 			{ name: 'button-background-primary-focus', token: 'P500', color: '#156FF5' },
 			{ name: 'button-background-primary-keyfocus', token: 'P500', color: '#156FF5' },
 			{ name: 'button-background-primary-disabled', token: 'P200', color: '#D1EBFE' },
@@ -133,7 +133,7 @@ export const palette = [
 		list: [
 			{ name: 'button-background-secondary-default', token: 'N400', color: '#E4E7EA' },
 			{ name: 'button-background-secondary-hover', token: 'N500', color: '#CBCED1' },
-			{ name: 'button-background-secondary-press', token: 'N600', color: '#CBCED1' },
+			{ name: 'button-background-secondary-press', token: 'N600', color: '#9EA2A8' },
 			{ name: 'button-background-secondary-focus', token: 'N400', color: '#E4E7EA' },
 			{ name: 'button-background-secondary-keyfocus', token: 'N400', color: '#E4E7EA' },
 			{ name: 'button-background-secondary-disabled', token: 'N300', color: '#EEEFF1' },
@@ -144,7 +144,7 @@ export const palette = [
 		list: [
 			{ name: 'button-background-secondary-danger-default', token: 'N400', color: '#E4E7EA' },
 			{ name: 'button-background-secondary-danger-hover', token: 'N500', color: '#CBCED1' },
-			{ name: 'button-background-secondary-danger-press', token: 'N600', color: '#CBCED1' },
+			{ name: 'button-background-secondary-danger-press', token: 'N600', color: '#9EA2A8' },
 			{ name: 'button-background-secondary-danger-focus', token: 'N400', color: '#E4E7EA' },
 			{ name: 'button-background-secondary-danger-keyfocus', token: 'N400', color: '#E4E7EA' },
 			{ name: 'button-background-secondary-danger-disabled', token: 'N300', color: '#EEEFF1' },
@@ -164,11 +164,11 @@ export const palette = [
 	{
 		description: 'Success Background',
 		list: [
-			{ name: 'button-background-success-default', token: '', color: '#158D65' },
+			{ name: 'button-background-success-default', token: '', color: '#148660' },
 			{ name: 'button-background-success-hover', token: 'S900', color: '#106D4F' },
 			{ name: 'button-background-success-press', token: 'S1000', color: '#0D5940' },
-			{ name: 'button-background-success-focus', token: '', color: '#158D65' },
-			{ name: 'button-background-success-keyfocus', token: '', color: '#158D65' },
+			{ name: 'button-background-success-focus', token: '', color: '#148660' },
+			{ name: 'button-background-success-keyfocus', token: '', color: '#148660' },
 			{ name: 'button-background-success-disabled', token: 'S200', color: '#C0F6E4' },
 		],
 	},
@@ -179,15 +179,15 @@ export const palette = [
 			{ name: 'button-font-on-primary-disabled', token: 'white', color: '#FFFFFF' },
 			{ name: 'button-font-on-secondary', token: 'N900', color: '#1F2329' },
 			{ name: 'button-font-on-secondary-disabled', token: 'N600', color: '#CBCED1' },
-			{ name: 'button-font-on-secondary-danger', token: 'D900', color: '#BB0B21' },
+			{ name: 'button-font-on-secondary-danger', token: '', color: '#BB0B21' },
 			{
 				name: 'button-font-on-secondary-danger-disabled',
 				token: 'D300',
 				color: '#F98F9D',
 			},
 			{ name: 'button-font-on-danger', token: 'white', color: '#FFFFFF' },
 			{ name: 'button-font-on-danger-disabled', token: 'white', color: '#FFFFFF' },
-			{ name: 'button-font-on-success', token: '', color: '#EBECEF' },
+			{ name: 'button-font-on-success', token: '', color: '#FFFFFF' },
 			{ name: 'button-font-on-success-disabled', token: 'white', color: '#FFFFFF' },
 		],
 	},

diff --git a/ee/packages/ui-theming/src/paletteDark.ts b/ee/packages/ui-theming/src/paletteDark.ts
@@ -9,7 +9,7 @@ export const palette = [
 			{ name: 'stroke-dark', token: 'N600', color: '#9EA2A8' },
 			{ name: 'stroke-extra-dark', token: 'N400', color: '#CBCED1' },
 			{ name: 'stroke-extra-light-highlight', token: '', color: '#87CBFC' },
-			{ name: 'stroke-highlight', token: '', color: '#3976D1' },
+			{ name: 'stroke-highlight', token: '', color: '#6292DA' },
 			{ name: 'stroke-extra-light-error', token: '', color: '#F49AA6' },
 			{ name: 'stroke-error', token: '', color: '#BB3E4E' },
 		],

diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json
@@ -56,7 +56,7 @@
   "devDependencies": {
     "@rocket.chat/apps-engine": "1.41.0-alpha.290",
     "@rocket.chat/eslint-config": "workspace:^",
-    "@rocket.chat/fuselage": "^0.32.2",
+    "@rocket.chat/fuselage": "^0.34.0",
     "@rocket.chat/fuselage-hooks": "^0.32.1",
     "@rocket.chat/fuselage-polyfills": "next",
     "@rocket.chat/icons": "^0.32.0",

diff --git a/packages/gazzodown/package.json b/packages/gazzodown/package.json
@@ -6,7 +6,7 @@
 		"@babel/core": "~7.22.9",
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/css-in-js": "next",
-		"@rocket.chat/fuselage": "^0.32.2",
+		"@rocket.chat/fuselage": "^0.34.0",
 		"@rocket.chat/fuselage-tokens": "next",
 		"@rocket.chat/message-parser": "next",
 		"@rocket.chat/styled": "next",

diff --git a/packages/ui-client/package.json b/packages/ui-client/package.json
@@ -5,7 +5,7 @@
 	"devDependencies": {
 		"@babel/core": "~7.22.9",
 		"@rocket.chat/css-in-js": "next",
-		"@rocket.chat/fuselage": "^0.32.2",
+		"@rocket.chat/fuselage": "^0.34.0",
 		"@rocket.chat/fuselage-hooks": "^0.32.1",
 		"@rocket.chat/icons": "^0.32.0",
 		"@rocket.chat/mock-providers": "workspace:^",

diff --git a/packages/ui-composer/package.json b/packages/ui-composer/package.json
@@ -5,7 +5,7 @@
   "devDependencies": {
     "@babel/core": "~7.22.9",
     "@rocket.chat/eslint-config": "workspace:^",
-    "@rocket.chat/fuselage": "^0.32.2",
+    "@rocket.chat/fuselage": "^0.34.0",
     "@rocket.chat/icons": "^0.32.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
@@ -6,7 +6,7 @@
 		"@babel/core": "~7.22.9",
 		"@rocket.chat/css-in-js": "next",
 		"@rocket.chat/eslint-config": "workspace:^",
-		"@rocket.chat/fuselage": "^0.32.2",
+		"@rocket.chat/fuselage": "^0.34.0",
 		"@rocket.chat/fuselage-hooks": "^0.32.1",
 		"@rocket.chat/icons": "^0.32.0",
 		"@rocket.chat/styled": "next",

diff --git 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": "next",
-    "@rocket.chat/fuselage": "^0.32.2",
+    "@rocket.chat/fuselage": "^0.34.0",
     "@rocket.chat/fuselage-hooks": "^0.32.1",
     "@rocket.chat/fuselage-polyfills": "next",
     "@rocket.chat/fuselage-tokens": "next",

diff --git a/yarn.lock b/yarn.lock
@@ -8273,7 +8273,7 @@ __metadata:
   dependencies:
     "@rocket.chat/apps-engine": 1.41.0-alpha.290
     "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/fuselage": ^0.32.2
+    "@rocket.chat/fuselage": ^0.34.0
     "@rocket.chat/fuselage-hooks": ^0.32.1
     "@rocket.chat/fuselage-polyfills": next
     "@rocket.chat/gazzodown": "workspace:^"
@@ -8322,9 +8322,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@rocket.chat/fuselage@npm:^0.32.2":
-  version: 0.32.2
-  resolution: "@rocket.chat/fuselage@npm:0.32.2"
+"@rocket.chat/fuselage@npm:^0.34.0":
+  version: 0.34.0
+  resolution: "@rocket.chat/fuselage@npm:0.34.0"
   dependencies:
     "@rocket.chat/css-in-js": ^0.31.25
     "@rocket.chat/css-supports": ^0.31.25
@@ -8342,7 +8342,7 @@ __metadata:
     react: ^17.0.2
     react-dom: ^17.0.2
     react-virtuoso: 1.2.4
-  checksum: 28e80385961b090c71d0897c22c3c799ca05d30285456d96d3ca5ff2a1a4ba02362644084e611bd3f2a376acdf4c2e75180b8aee196a63969a7d6559abd73d79
+  checksum: 72cd1dd7ef13cc3b69fadac5c064a45cd2b65b8a221cde2e8149fa873ac6de89648c677caedb10979e5cf08d39b79f1d7a30caa6378bdeeb873414c7fbac5e6e
   languageName: node
   linkType: hard
 
@@ -8353,7 +8353,7 @@ __metadata:
     "@babel/core": ~7.22.9
     "@rocket.chat/core-typings": "workspace:^"
     "@rocket.chat/css-in-js": next
-    "@rocket.chat/fuselage": ^0.32.2
+    "@rocket.chat/fuselage": ^0.34.0
     "@rocket.chat/fuselage-tokens": next
     "@rocket.chat/message-parser": next
     "@rocket.chat/styled": next
@@ -8706,7 +8706,7 @@ __metadata:
     "@rocket.chat/favicon": "workspace:^"
     "@rocket.chat/forked-matrix-appservice-bridge": ^4.0.1
     "@rocket.chat/forked-matrix-bot-sdk": ^0.6.0-beta.2
-    "@rocket.chat/fuselage": ^0.32.2
+    "@rocket.chat/fuselage": ^0.34.0
     "@rocket.chat/fuselage-hooks": ^0.32.1
     "@rocket.chat/fuselage-polyfills": next
     "@rocket.chat/fuselage-toastbar": next
@@ -9569,7 +9569,7 @@ __metadata:
   dependencies:
     "@babel/core": ~7.22.9
     "@rocket.chat/css-in-js": next
-    "@rocket.chat/fuselage": ^0.32.2
+    "@rocket.chat/fuselage": ^0.34.0
     "@rocket.chat/fuselage-hooks": ^0.32.1
     "@rocket.chat/icons": ^0.32.0
     "@rocket.chat/mock-providers": "workspace:^"
@@ -9620,7 +9620,7 @@ __metadata:
   dependencies:
     "@babel/core": ~7.22.9
     "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/fuselage": ^0.32.2
+    "@rocket.chat/fuselage": ^0.34.0
     "@rocket.chat/icons": ^0.32.0
     "@storybook/addon-actions": ~6.5.16
     "@storybook/addon-docs": ~6.5.16
@@ -9691,7 +9691,7 @@ __metadata:
   resolution: "@rocket.chat/ui-theming@workspace:ee/packages/ui-theming"
   dependencies:
     "@rocket.chat/css-in-js": next
-    "@rocket.chat/fuselage": ^0.32.2
+    "@rocket.chat/fuselage": ^0.34.0
     "@rocket.chat/fuselage-hooks": ^0.32.1
     "@rocket.chat/icons": ^0.32.0
     "@rocket.chat/ui-contexts": "workspace:~"
@@ -9734,7 +9734,7 @@ __metadata:
     "@rocket.chat/css-in-js": next
     "@rocket.chat/emitter": next
     "@rocket.chat/eslint-config": "workspace:^"
-    "@rocket.chat/fuselage": ^0.32.2
+    "@rocket.chat/fuselage": ^0.34.0
     "@rocket.chat/fuselage-hooks": ^0.32.1
     "@rocket.chat/icons": ^0.32.0
     "@rocket.chat/styled": next
@@ -9777,7 +9777,7 @@ __metadata:
     "@codemirror/tooltip": ^0.19.16
     "@lezer/highlight": ^1.1.6
     "@rocket.chat/css-in-js": next
-    "@rocket.chat/fuselage": ^0.32.2
+    "@rocket.chat/fuselage": ^0.34.0
     "@rocket.chat/fuselage-hooks": ^0.32.1
     "@rocket.chat/fuselage-polyfills": next
     "@rocket.chat/fuselage-tokens": next