From 0433377051f8a58ad6d2031a64e35a9677148ab2 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Wed, 29 May 2024 14:41:35 -0500 Subject: [PATCH 1/6] chore(SidePanel): fix a11y contrast issue --- .../side-panel/stories/index.stories.tsx | 168 ++++++++++++++++++ 1 file changed, 168 insertions(+) diff --git a/packages/paste-core/components/side-panel/stories/index.stories.tsx b/packages/paste-core/components/side-panel/stories/index.stories.tsx index abfe67d2a9..52b2cd1ad6 100644 --- a/packages/paste-core/components/side-panel/stories/index.stories.tsx +++ b/packages/paste-core/components/side-panel/stories/index.stories.tsx @@ -14,11 +14,19 @@ import { Topbar } from "@twilio-paste/topbar"; import { useUID } from "@twilio-paste/uid-library"; import * as React from "react"; +import { Anchor } from "@twilio-paste/anchor"; +import { Avatar } from "@twilio-paste/avatar"; +import { ChatComposer } from "@twilio-paste/chat-composer"; +import { ChatBubble, ChatLog, ChatMessage, ChatMessageMeta, ChatMessageMetaItem } from "@twilio-paste/chat-log"; +import { DetailText } from "@twilio-paste/detail-text"; +import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIntelligenceIcon"; +import { Separator } from "@twilio-paste/separator"; import { SidePanel, SidePanelBody, SidePanelButton, SidePanelContainer, + SidePanelContext, SidePanelHeader, SidePanelHeaderActions, SidePanelPushContentWrapper, @@ -52,6 +60,18 @@ export const Default = (): React.ReactNode => { }; Default.parameters = { padding: false, + a11y: { + config: { + rules: [ + { + id: "color-contrast", + // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks + // VRT tests below enable this rule + enabled: false, + }, + ], + }, + }, }; export const Basic = (): React.ReactNode => { @@ -78,6 +98,18 @@ export const Basic = (): React.ReactNode => { }; Basic.parameters = { padding: false, + a11y: { + config: { + rules: [ + { + id: "color-contrast", + // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks + // VRT tests below enable this rule + enabled: false, + }, + ], + }, + }, }; export const I18n = (): React.ReactNode => { @@ -127,6 +159,18 @@ export const I18n = (): React.ReactNode => { I18n.parameters = { padding: false, + a11y: { + config: { + rules: [ + { + id: "color-contrast", + // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks + // VRT tests below enable this rule + enabled: false, + }, + ], + }, + }, }; export const ContentDemo = (): React.ReactNode => { @@ -195,6 +239,18 @@ export const ContentDemo = (): React.ReactNode => { ContentDemo.parameters = { padding: false, + a11y: { + config: { + rules: [ + { + id: "color-contrast", + // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks + // VRT tests below enable this rule + enabled: false, + }, + ], + }, + }, }; export const Composed = (): React.ReactNode => { @@ -223,6 +279,18 @@ export const Composed = (): React.ReactNode => { Composed.parameters = { padding: false, + a11y: { + config: { + rules: [ + { + id: "color-contrast", + // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks + // VRT tests below enable this rule + enabled: false, + }, + ], + }, + }, }; export const Customized = (): React.ReactNode => { @@ -279,4 +347,104 @@ export const Customized = (): React.ReactNode => { Customized.parameters = { padding: false, + a11y: { + config: { + rules: [ + { + id: "color-contrast", + // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks + // VRT tests below enable this rule + enabled: false, + }, + ], + }, + }, +}; + +export const DefaultVRT = (): React.ReactNode => { + const sidePanelId = useUID(); + + return ( + {}, + sidePanelId, + }} + > + {/* close button in header needs an element to control */} + + + + + Assistant + + + + + + + + + + + Hello, what can I help you with? + + + + Gibby Radki ・ 3:35 PM + + + + + Hi! What is your return policy? + + 3:35 PM + + + + Hello, what can I help you with? + + + + Gibby Radki ・ 3:35 PM + + + + + Hi! What is your return policy? + + 3:35 PM + + + + { + throw e; + }, + }} + initialValue="Are switch labels required in the context of a data grid? I'm exploring a UI that allows users to make the same configuration to every row in that data grid, and i'm wondering if there are any accessibility issues with having the column header in the top row with just the switch component in each of the row cells? the label gets pretty repetitive and we're expecting the table to have 20+ rows in this table, so trying to find ways to make it less visually crowded" + placeholder="Chat text" + ariaLabel="A basic chat composer" + /> + + + This chatbot is powered by OpenAI. For more information, see the{" "} + Customer AI Trust Principles and{" "} + Twilio Privacy Notice. + + + + + + ); +}; +Default.parameters = { + padding: false, }; From 13620fad564b20d096280079e95fd2e9f17bfb90 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Wed, 29 May 2024 15:22:19 -0500 Subject: [PATCH 2/6] chore: lint fix --- .../side-panel/stories/index.stories.tsx | 44 ++++++++----------- 1 file changed, 19 insertions(+), 25 deletions(-) diff --git a/packages/paste-core/components/side-panel/stories/index.stories.tsx b/packages/paste-core/components/side-panel/stories/index.stories.tsx index 52b2cd1ad6..4b007b574a 100644 --- a/packages/paste-core/components/side-panel/stories/index.stories.tsx +++ b/packages/paste-core/components/side-panel/stories/index.stories.tsx @@ -1,25 +1,19 @@ +import { Anchor } from "@twilio-paste/anchor"; +import { Avatar } from "@twilio-paste/avatar"; /* eslint-disable eslint-comments/disable-enable-pair */ /* eslint-disable react/jsx-max-depth */ /* eslint-disable import/no-extraneous-dependencies */ import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; +import { ChatComposer } from "@twilio-paste/chat-composer"; +import { ChatBubble, ChatLog, ChatMessage, ChatMessageMeta, ChatMessageMetaItem } from "@twilio-paste/chat-log"; import { CustomizationProvider } from "@twilio-paste/customization"; +import { DetailText } from "@twilio-paste/detail-text"; import { Heading } from "@twilio-paste/heading"; +import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIntelligenceIcon"; import { ChevronDoubleLeftIcon } from "@twilio-paste/icons/esm/ChevronDoubleLeftIcon"; import { ChevronDoubleRightIcon } from "@twilio-paste/icons/esm/ChevronDoubleRightIcon"; import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon"; -import { SidebarPushContentWrapper } from "@twilio-paste/sidebar"; -import { useTheme } from "@twilio-paste/theme"; -import { Topbar } from "@twilio-paste/topbar"; -import { useUID } from "@twilio-paste/uid-library"; -import * as React from "react"; - -import { Anchor } from "@twilio-paste/anchor"; -import { Avatar } from "@twilio-paste/avatar"; -import { ChatComposer } from "@twilio-paste/chat-composer"; -import { ChatBubble, ChatLog, ChatMessage, ChatMessageMeta, ChatMessageMetaItem } from "@twilio-paste/chat-log"; -import { DetailText } from "@twilio-paste/detail-text"; -import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIntelligenceIcon"; import { Separator } from "@twilio-paste/separator"; import { SidePanel, @@ -30,7 +24,13 @@ import { SidePanelHeader, SidePanelHeaderActions, SidePanelPushContentWrapper, -} from "../src"; +} from "@twilio-paste/side-panel"; +import { SidebarPushContentWrapper } from "@twilio-paste/sidebar"; +import { useTheme } from "@twilio-paste/theme"; +import { Topbar } from "@twilio-paste/topbar"; +import { useUID } from "@twilio-paste/uid-library"; +import * as React from "react"; + import { MessagingInsightsContent } from "./components/MessagingInsightsContent"; import { SidePanelWithContent } from "./components/SidePanelWithContent"; import { SidebarWithContent } from "./components/SidebarWithContent"; @@ -65,8 +65,7 @@ Default.parameters = { rules: [ { id: "color-contrast", - // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks - // VRT tests below enable this rule + // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks VRT tests below enable this rule enabled: false, }, ], @@ -103,8 +102,7 @@ Basic.parameters = { rules: [ { id: "color-contrast", - // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks - // VRT tests below enable this rule + // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks VRT tests below enable this rule enabled: false, }, ], @@ -164,8 +162,7 @@ I18n.parameters = { rules: [ { id: "color-contrast", - // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks - // VRT tests below enable this rule + // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks VRT tests below enable this rule enabled: false, }, ], @@ -244,8 +241,7 @@ ContentDemo.parameters = { rules: [ { id: "color-contrast", - // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks - // VRT tests below enable this rule + // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks VRT tests below enable this rule enabled: false, }, ], @@ -284,8 +280,7 @@ Composed.parameters = { rules: [ { id: "color-contrast", - // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks - // VRT tests below enable this rule + // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks VRT tests below enable this rule enabled: false, }, ], @@ -352,8 +347,7 @@ Customized.parameters = { rules: [ { id: "color-contrast", - // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks - // VRT tests below enable this rule + // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks VRT tests below enable this rule enabled: false, }, ], From e60fe9225fe987b12e595707eebb33e4499294e8 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Thu, 30 May 2024 09:06:47 -0500 Subject: [PATCH 3/6] chore: resolve PR comments --- .../side-panel/stories/index.stories.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/paste-core/components/side-panel/stories/index.stories.tsx b/packages/paste-core/components/side-panel/stories/index.stories.tsx index 4b007b574a..9dbb0a7e8f 100644 --- a/packages/paste-core/components/side-panel/stories/index.stories.tsx +++ b/packages/paste-core/components/side-panel/stories/index.stories.tsx @@ -1,8 +1,8 @@ -import { Anchor } from "@twilio-paste/anchor"; -import { Avatar } from "@twilio-paste/avatar"; /* eslint-disable eslint-comments/disable-enable-pair */ /* eslint-disable react/jsx-max-depth */ /* eslint-disable import/no-extraneous-dependencies */ +import { Anchor } from "@twilio-paste/anchor"; +import { Avatar } from "@twilio-paste/avatar"; import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; import { ChatComposer } from "@twilio-paste/chat-composer"; @@ -15,6 +15,12 @@ import { ChevronDoubleLeftIcon } from "@twilio-paste/icons/esm/ChevronDoubleLeft import { ChevronDoubleRightIcon } from "@twilio-paste/icons/esm/ChevronDoubleRightIcon"; import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon"; import { Separator } from "@twilio-paste/separator"; +import { SidebarPushContentWrapper } from "@twilio-paste/sidebar"; +import { useTheme } from "@twilio-paste/theme"; +import { Topbar } from "@twilio-paste/topbar"; +import { useUID } from "@twilio-paste/uid-library"; +import * as React from "react"; + import { SidePanel, SidePanelBody, @@ -24,13 +30,7 @@ import { SidePanelHeader, SidePanelHeaderActions, SidePanelPushContentWrapper, -} from "@twilio-paste/side-panel"; -import { SidebarPushContentWrapper } from "@twilio-paste/sidebar"; -import { useTheme } from "@twilio-paste/theme"; -import { Topbar } from "@twilio-paste/topbar"; -import { useUID } from "@twilio-paste/uid-library"; -import * as React from "react"; - +} from "../src"; import { MessagingInsightsContent } from "./components/MessagingInsightsContent"; import { SidePanelWithContent } from "./components/SidePanelWithContent"; import { SidebarWithContent } from "./components/SidebarWithContent"; From 262ff93b571e05debc11c489bc2d36680a3284c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Fri, 31 May 2024 14:18:22 -0400 Subject: [PATCH 4/6] chore: use selector instead of disabling test --- .../side-panel/stories/index.stories.tsx | 126 ++++++------------ 1 file changed, 38 insertions(+), 88 deletions(-) diff --git a/packages/paste-core/components/side-panel/stories/index.stories.tsx b/packages/paste-core/components/side-panel/stories/index.stories.tsx index 9dbb0a7e8f..1d92beb44d 100644 --- a/packages/paste-core/components/side-panel/stories/index.stories.tsx +++ b/packages/paste-core/components/side-panel/stories/index.stories.tsx @@ -1,14 +1,10 @@ /* eslint-disable eslint-comments/disable-enable-pair */ /* eslint-disable react/jsx-max-depth */ /* eslint-disable import/no-extraneous-dependencies */ -import { Anchor } from "@twilio-paste/anchor"; -import { Avatar } from "@twilio-paste/avatar"; +import type { StoryFn } from "@storybook/react"; import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; -import { ChatComposer } from "@twilio-paste/chat-composer"; -import { ChatBubble, ChatLog, ChatMessage, ChatMessageMeta, ChatMessageMetaItem } from "@twilio-paste/chat-log"; import { CustomizationProvider } from "@twilio-paste/customization"; -import { DetailText } from "@twilio-paste/detail-text"; import { Heading } from "@twilio-paste/heading"; import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIntelligenceIcon"; import { ChevronDoubleLeftIcon } from "@twilio-paste/icons/esm/ChevronDoubleLeftIcon"; @@ -41,7 +37,7 @@ export default { component: SidePanel, }; -export const Default = (): React.ReactNode => { +export const Default: StoryFn = () => { const [isOpen, setIsOpen] = React.useState(true); return ( @@ -64,16 +60,19 @@ Default.parameters = { config: { rules: [ { + /* + * Using position="relative" on SidePanel causes it to overflow other themes in stacked and side-by-side views, and therefore fail color contrast checks based on SidePanelBody's content. + * The DefaultVRT test below serves to test color contrast on the Side Panel component without this issue causing false failures. + */ id: "color-contrast", - // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks VRT tests below enable this rule - enabled: false, + selector: "*:not(*)", }, ], }, }, }; -export const Basic = (): React.ReactNode => { +export const Basic: StoryFn = () => { const [isOpen, setIsOpen] = React.useState(true); const sidePanelId = useUID(); const topbarSkipLinkID = useUID(); @@ -101,16 +100,19 @@ Basic.parameters = { config: { rules: [ { + /* + * Using position="relative" on SidePanel causes it to overflow other themes in stacked and side-by-side views, and therefore fail color contrast checks based on SidePanelBody's content. + * The DefaultVRT test below serves to test color contrast on the Side Panel component without this issue causing false failures. + */ id: "color-contrast", - // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks VRT tests below enable this rule - enabled: false, + selector: "*:not(*)", }, ], }, }, }; -export const I18n = (): React.ReactNode => { +export const I18n: StoryFn = () => { const [isOpen, setIsOpen] = React.useState(true); const topbarSkipLinkID = useUID(); @@ -161,25 +163,28 @@ I18n.parameters = { config: { rules: [ { + /* + * Using position="relative" on SidePanel causes it to overflow other themes in stacked and side-by-side views, and therefore fail color contrast checks based on SidePanelBody's content. + * The DefaultVRT test below serves to test color contrast on the Side Panel component without this issue causing false failures. + */ id: "color-contrast", - // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks VRT tests below enable this rule - enabled: false, + selector: "*:not(*)", }, ], }, }, }; -export const ContentDemo = (): React.ReactNode => { +export const ContentDemo: StoryFn = () => { const [isOpen, setIsOpen] = React.useState(true); const topbarSkipLinkID = useUID(); const mainContentSkipLinkID = useUID(); const sidePanelId = useUID(); return ( - + - + @@ -240,16 +245,19 @@ ContentDemo.parameters = { config: { rules: [ { + /* + * Using position="relative" on SidePanel causes it to overflow other themes in stacked and side-by-side views, and therefore fail color contrast checks based on SidePanelBody's content. + * The DefaultVRT test below serves to test color contrast on the Side Panel component without this issue causing false failures. + */ id: "color-contrast", - // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks VRT tests below enable this rule - enabled: false, + selector: "*:not(*)", }, ], }, }, }; -export const Composed = (): React.ReactNode => { +export const Composed: StoryFn = () => { const [isOpen, setIsOpen] = React.useState(true); const topbarSkipLinkID = useUID(); @@ -279,16 +287,19 @@ Composed.parameters = { config: { rules: [ { + /* + * Using position="relative" on SidePanel causes it to overflow other themes in stacked and side-by-side views, and therefore fail color contrast checks based on SidePanelBody's content. + * The DefaultVRT test below serves to test color contrast on the Side Panel component without this issue causing false failures. + */ id: "color-contrast", - // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks VRT tests below enable this rule - enabled: false, + selector: "*:not(*)", }, ], }, }, }; -export const Customized = (): React.ReactNode => { +export const Customized: StoryFn = () => { const [isOpen, setIsOpen] = React.useState(true); const label = useUID(); const theme = useTheme(); @@ -343,19 +354,12 @@ export const Customized = (): React.ReactNode => { Customized.parameters = { padding: false, a11y: { - config: { - rules: [ - { - id: "color-contrast", - // Using position relative on SidePanel causes it to overflow other themes and fails color contrast checks VRT tests below enable this rule - enabled: false, - }, - ], - }, + // no need to a11y check customization + disable: true, }, }; -export const DefaultVRT = (): React.ReactNode => { +export const DefaultVRT: StoryFn = () => { const sidePanelId = useUID(); return ( @@ -383,62 +387,8 @@ export const DefaultVRT = (): React.ReactNode => { - - - - Hello, what can I help you with? - - - - Gibby Radki ・ 3:35 PM - - - - - Hi! What is your return policy? - - 3:35 PM - - - - Hello, what can I help you with? - - - - Gibby Radki ・ 3:35 PM - - - - - Hi! What is your return policy? - - 3:35 PM - - - - { - throw e; - }, - }} - initialValue="Are switch labels required in the context of a data grid? I'm exploring a UI that allows users to make the same configuration to every row in that data grid, and i'm wondering if there are any accessibility issues with having the column header in the top row with just the switch component in each of the row cells? the label gets pretty repetitive and we're expecting the table to have 20+ rows in this table, so trying to find ways to make it less visually crowded" - placeholder="Chat text" - ariaLabel="A basic chat composer" - /> - - - This chatbot is powered by OpenAI. For more information, see the{" "} - Customer AI Trust Principles and{" "} - Twilio Privacy Notice. - - - + ); }; -Default.parameters = { - padding: false, -}; From 94b8b619df1f6797169ca02da824ddf85980b2b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Fri, 31 May 2024 15:56:35 -0400 Subject: [PATCH 5/6] chore: oops forgot to remove background color --- .../paste-core/components/side-panel/stories/index.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/paste-core/components/side-panel/stories/index.stories.tsx b/packages/paste-core/components/side-panel/stories/index.stories.tsx index 1d92beb44d..95097f961a 100644 --- a/packages/paste-core/components/side-panel/stories/index.stories.tsx +++ b/packages/paste-core/components/side-panel/stories/index.stories.tsx @@ -227,7 +227,6 @@ export const ContentDemo: StoryFn = () => { From be833b5a6a030302a351ee68dbf68639a628a564 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Fri, 31 May 2024 16:33:22 -0400 Subject: [PATCH 6/6] chore: thiiiis is the one i wanted to remove --- .../paste-core/components/side-panel/stories/index.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/paste-core/components/side-panel/stories/index.stories.tsx b/packages/paste-core/components/side-panel/stories/index.stories.tsx index 95097f961a..fa7aff5237 100644 --- a/packages/paste-core/components/side-panel/stories/index.stories.tsx +++ b/packages/paste-core/components/side-panel/stories/index.stories.tsx @@ -182,7 +182,7 @@ export const ContentDemo: StoryFn = () => { const mainContentSkipLinkID = useUID(); const sidePanelId = useUID(); return ( - + @@ -227,6 +227,7 @@ export const ContentDemo: StoryFn = () => {