chore: final go

twilio-labs · Jun 29, 2023 · 0167b5b · 0167b5b
1 parent d895cb6
commit 0167b5b
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 29 deletions.
diff --git a/.changeset/quiet-trees-collect.md b/.changeset/quiet-trees-collect.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/user-dialog': patch
+'@twilio-paste/core': patch
+---
+
+[User Dialog] ensure the user dialog list is correctly labelled for accessibility reasons
diff --git a/...s/paste-core/components/sidebar/stories/full-composition/components/UserDialogConsole.tsx b/...s/paste-core/components/sidebar/stories/full-composition/components/UserDialogConsole.tsx
@@ -27,7 +27,7 @@ export const UserDialogExample: React.FC = () => {
           <UserDialogUserName>Name</UserDialogUserName>
           <UserDialogUserEmail>email@email.com</UserDialogUserEmail>
         </UserDialogUserInfo>
-        <UserDialogList {...userDialogList}>
+        <UserDialogList {...userDialogList} aria-label="User menu actions">
           <UserDialogListItem {...userDialogList}>
             <UserIcon decorative />
             User settings

diff --git a/...ages/paste-core/components/sidebar/stories/full-composition/components/UserDialogFlex.tsx b/...ages/paste-core/components/sidebar/stories/full-composition/components/UserDialogFlex.tsx
@@ -13,7 +13,6 @@ import {
 import {UserIcon} from '@twilio-paste/icons/esm/UserIcon';
 import {ThemeIcon} from '@twilio-paste/icons/esm/ThemeIcon';
 import {TranslationIcon} from '@twilio-paste/icons/esm/TranslationIcon';
-import {CodeIcon} from '@twilio-paste/icons/esm/CodeIcon';
 import {LogOutIcon} from '@twilio-paste/icons/esm/LogOutIcon';
 import {Box} from '@twilio-paste/box';
 import {Badge} from '@twilio-paste/badge';
@@ -27,7 +26,7 @@ export const UserDialogExample: React.FC = () => {
           <UserDialogUserName>Name</UserDialogUserName>
           <UserDialogUserEmail>email@email.com</UserDialogUserEmail>
         </UserDialogUserInfo>
-        <UserDialogList {...userDialogList}>
+        <UserDialogList {...userDialogList} aria-label="User menu actions">
           <UserDialogListItem {...userDialogList}>
             <UserIcon decorative />
             User settings

diff --git a/...s/paste-core/components/sidebar/stories/full-composition/components/UserDialogSegment.tsx b/...s/paste-core/components/sidebar/stories/full-composition/components/UserDialogSegment.tsx
@@ -25,7 +25,7 @@ export const UserDialogExample: React.FC = () => {
           <UserDialogUserName>Name</UserDialogUserName>
           <UserDialogUserEmail>email@email.com</UserDialogUserEmail>
         </UserDialogUserInfo>
-        <UserDialogList {...userDialogList}>
+        <UserDialogList {...userDialogList} aria-label="User menu actions">
           <UserDialogListItem {...userDialogList}>
             <UserIcon decorative />
             User settings

diff --git a/packages/paste-core/components/sidebar/stories/full-composition/flex.stories.tsx b/packages/paste-core/components/sidebar/stories/full-composition/flex.stories.tsx
@@ -61,26 +61,32 @@ export const Flex: StoryFn = () => {
             </SidebarNavigationItem>
             <SidebarNavigationItem
               href="https://google.com"
-              icon={<ProductContactCenterTasksIcon decorative title="Agent dashboard" />}
+              icon={<ProductContactCenterTasksIcon decorative={false} title="Agent dashboard" />}
             >
               Agent dashboard
             </SidebarNavigationItem>
             <SidebarNavigationItem
               href="https://google.com"
-              icon={<ProductContactCenterTeamsIcon decorative title="Teams view" />}
+              icon={<ProductContactCenterTeamsIcon decorative={false} title="Teams view" />}
             >
               Teams view
             </SidebarNavigationItem>
             <SidebarNavigationItem
               href="https://google.com"
-              icon={<ProductContactCenterQueuesIcon decorative title="Queue stats" />}
+              icon={<ProductContactCenterQueuesIcon decorative={false} title="Queue stats" />}
             >
               Queue stats
             </SidebarNavigationItem>
-            <SidebarNavigationItem href="https://google.com" icon={<ProductPrivacyIcon decorative title="Privacy" />}>
+            <SidebarNavigationItem
+              href="https://google.com"
+              icon={<ProductPrivacyIcon decorative={false} title="Privacy" />}
+            >
               Privacy
             </SidebarNavigationItem>
-            <SidebarNavigationItem href="https://google.com" icon={<ProductUsageIcon decorative title="Insights" />}>
+            <SidebarNavigationItem
+              href="https://google.com"
+              icon={<ProductUsageIcon decorative={false} title="Insights" />}
+            >
               Insights
             </SidebarNavigationItem>
           </SidebarNavigation>

diff --git a/packages/paste-core/components/user-dialog/src/types.ts b/packages/paste-core/components/user-dialog/src/types.ts
@@ -56,6 +56,7 @@ export interface UserDialogContextProps {
 export interface UserDialogListProps extends ListboxPrimitiveProps {
   children: NonNullable<React.ReactNode>;
   element?: BoxProps['element'];
+  ['aria-label']: string;
 }
 
 export interface UserDialogListboxProps extends React.HTMLAttributes<HTMLDivElement> {

diff --git a/packages/paste-core/components/user-dialog/stories/index.stories.tsx b/packages/paste-core/components/user-dialog/stories/index.stories.tsx
@@ -43,7 +43,7 @@ export const BasicUserDialog: StoryFn = ({visible = true}) => {
           <UserDialogUserName>Name</UserDialogUserName>
           <UserDialogUserEmail>email@email.com</UserDialogUserEmail>
         </UserDialogUserInfo>
-        <UserDialogList {...userDialogList} data-testid="user-dialog-listbox">
+        <UserDialogList {...userDialogList} aria-label="User menu actions" data-testid="user-dialog-listbox">
           <UserDialogListItem
             {...userDialogList}
             key={id1}
@@ -110,7 +110,7 @@ export const ImageUserDialog: StoryFn = () => {
           <UserDialogUserName>Name</UserDialogUserName>
           <UserDialogUserEmail>email@email.com</UserDialogUserEmail>
         </UserDialogUserInfo>
-        <UserDialogList {...userDialogList}>
+        <UserDialogList {...userDialogList} aria-label="User menu actions">
           <UserDialogListItem
             {...userDialogList}
             key={id1}
@@ -167,7 +167,7 @@ export const StateHookUserDialog: StoryFn = ({visible = true}) => {
             <UserDialogUserName>Name</UserDialogUserName>
             <UserDialogUserEmail>email@email.com</UserDialogUserEmail>
           </UserDialogUserInfo>
-          <UserDialogList {...userDialogList}>
+          <UserDialogList {...userDialogList} aria-label="User menu actions">
             <UserDialogListItem
               {...userDialogList}
               key={id1}
@@ -249,7 +249,7 @@ export const CustomizedUserDialog: StoryFn = () => {
               <UserDialogUserName>Name</UserDialogUserName>
               <UserDialogUserEmail>email@email.com</UserDialogUserEmail>
             </UserDialogUserInfo>
-            <UserDialogList {...userDialogList}>
+            <UserDialogList {...userDialogList} aria-label="User menu actions">
               <UserDialogListItem
                 {...userDialogList}
                 key={id1a}
@@ -284,7 +284,7 @@ export const CustomizedUserDialog: StoryFn = () => {
               <UserDialogUserName element="BAR">Name</UserDialogUserName>
               <UserDialogUserEmail element="BAZ">email@email.com</UserDialogUserEmail>
             </UserDialogUserInfo>
-            <UserDialogList {...userDialogList} element="FOO">
+            <UserDialogList {...userDialogList} aria-label="User menu actions" element="FOO">
               <UserDialogListItem
                 {...userDialogList}
                 key={id1b}

diff --git a/packages/paste-website/src/component-examples/UserDialogExamples.ts b/packages/paste-website/src/component-examples/UserDialogExamples.ts
@@ -7,18 +7,17 @@ const UserDialogExample = () => {
     const id3 = useUID();
     return (
         <UserDialogContainer name="User Name" icon={UserIcon} baseId="i-am-user-dialog">
-          <UserDialog aria-label="user menu" data-testid="basic-user-dialog">
+          <UserDialog aria-label="user menu">
             <UserDialogUserInfo>
               <UserDialogUserName>Name</UserDialogUserName>
               <UserDialogUserEmail>email@email.com</UserDialogUserEmail>
             </UserDialogUserInfo>
-            <UserDialogList {...userDialogList} data-testid="user-dialog-listbox">
+            <UserDialogList {...userDialogList} aria-label="User menu actions">
               <UserDialogListItem
                 {...userDialogList}
                 key={id1}
                 selected={selected === id1}
                 onSelect={() => setSelected(id1)}
-                data-testid="FIRST_ITEM"
               >
                 <UserIcon decorative />
                 Item
@@ -29,7 +28,6 @@ const UserDialogExample = () => {
                 key={id2}
                 selected={selected === id2}
                 onSelect={() => setSelected(id2)}
-                data-testid="SECOND_ITEM"
                 href="https://www.google.com"
               >
                 <UserIcon decorative />
@@ -41,7 +39,6 @@ const UserDialogExample = () => {
                 key={id3}
                 selected={selected === id3}
                 onSelect={() => setSelected(id3)}
-                data-testid="THIRD_ITEM"
               >
                 <ThemeIcon decorative />
                 <Box width="100%" display="flex" justifyContent="space-between">
@@ -80,18 +77,17 @@ const UserDialogExample = () => {
     const id3 = useUID();
     return (
         <UserDialogContainer name="User Name" icon={UserIcon} baseId="i-am-user-dialog" src="/images/avatars/avatar3.png" >
-          <UserDialog aria-label="user menu" data-testid="basic-user-dialog">
+          <UserDialog aria-label="user menu">
             <UserDialogUserInfo>
               <UserDialogUserName>Name</UserDialogUserName>
               <UserDialogUserEmail>email@email.com</UserDialogUserEmail>
             </UserDialogUserInfo>
-            <UserDialogList {...userDialogList} data-testid="user-dialog-listbox">
+            <UserDialogList {...userDialogList} aria-label="User menu actions">
               <UserDialogListItem
                 {...userDialogList}
                 key={id1}
                 selected={selected === id1}
                 onSelect={() => setSelected(id1)}
-                data-testid="FIRST_ITEM"
               >
                 <UserIcon decorative />
                 Item
@@ -102,7 +98,6 @@ const UserDialogExample = () => {
                 key={id2}
                 selected={selected === id2}
                 onSelect={() => setSelected(id2)}
-                data-testid="SECOND_ITEM"
                 href="https://www.google.com"
               >
                 <UserIcon decorative />
@@ -114,7 +109,6 @@ const UserDialogExample = () => {
                 key={id3}
                 selected={selected === id3}
                 onSelect={() => setSelected(id3)}
-                data-testid="THIRD_ITEM"
               >
                 <ThemeIcon decorative />
                 <Box width="100%" display="flex" justifyContent="space-between">

diff --git a/packages/paste-website/src/pages/components/user-dialog/index.mdx b/packages/paste-website/src/pages/components/user-dialog/index.mdx
@@ -160,7 +160,7 @@ const UserDialog = () => {
           <UserDialogUserName>Name</UserDialogUserName>
           <UserDialogUserEmail>email@email.com</UserDialogUserEmail>
         </UserDialogUserInfo>
-        <UserDialogList {...userDialogList}>
+        <UserDialogList {...userDialogList} aria-label="User menu actions">
           <UserDialogListItem {...userDialogList} onSelect={() => {}}>One</UserDialogListItem>
           <UserDialogListItem {...userDialogList} href="www.#.com"}>Two</UserDialogListItem>
         </UserDialogList>
@@ -211,10 +211,11 @@ const UserDialog = () => {
 
 #### UserDialogList props
 
-| Prop     | Type              | Description                                                                               | Default            |
-| -------- | ----------------- | ----------------------------------------------------------------------------------------- | ------------------ |
-| children | `React.ReactNode` |                                                                                           |                    |
-| element? | `string`          | Overrides the default element name to apply unique styles with the Customization Provider | 'USER_DIALOG_LIST' |
+| Prop       | Type              | Description                                                                               | Default            |
+| ---------- | ----------------- | ----------------------------------------------------------------------------------------- | ------------------ |
+| children   | `React.ReactNode` |                                                                                           |                    |
+| element?   | `string`          | Overrides the default element name to apply unique styles with the Customization Provider | 'USER_DIALOG_LIST' |
+| aria-label | `string`          | Description of the list                                                                   |                    |
 
 #### UserDialogListItem props