Skip to content

Commit eb189f1

Browse files
SiTaggartSiTaggart
authored
feat: new home a11y section (#3790)
1 parent 67c25a7 commit eb189f1

File tree

4 files changed

+48
-75
lines changed

4 files changed

+48
-75
lines changed

‎.changeset/light-hornets-nail.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/menu": patch
3+
"@twilio-paste/core": patch
4+
---
5+
6+
[Menu] Fix a regression in sub-menu items that was introduced whilst preventing very long, non-scrolling menus

‎packages/paste-core/components/menu/src/Menu.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,22 @@ const StyledMenu = React.forwardRef<HTMLDivElement, BoxElementProps>(({ style, .
1515
borderColor="colorBorderWeaker"
1616
borderRadius="borderRadius30"
1717
boxShadow="shadow"
18-
// scroll at roughly 10 items
19-
maxHeight="size40"
2018
maxWidth="size30"
2119
minWidth="size20"
22-
overflowY="auto"
2320
zIndex="zIndex20"
2421
paddingY="space30"
2522
_focus={{ outline: "none" }}
2623
style={style}
2724
ref={ref}
28-
/>
25+
>
26+
<Box
27+
// scroll at roughly 10 items
28+
maxHeight="size50"
29+
overflowY="auto"
30+
>
31+
{props.children}
32+
</Box>
33+
</Box>
2934
);
3035
});
3136

‎packages/paste-core/components/menu/stories/index.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ const AutoplacedMenu = (): JSX.Element => {
7474
};
7575

7676
const PreferencesMenu = React.forwardRef<HTMLButtonElement>((props, ref) => {
77-
const menu = useMenuState();
77+
const menu = useMenuState({ visible: true });
7878
return (
7979
<>
8080
<SubMenuButton ref={ref} {...menu} {...props}>
@@ -95,7 +95,7 @@ const PreferencesMenu = React.forwardRef<HTMLButtonElement>((props, ref) => {
9595
PreferencesMenu.displayName = "PreferencesMenu";
9696

9797
const SubMenu = (): JSX.Element => {
98-
const menu = useMenuState();
98+
const menu = useMenuState({ visible: true });
9999
return (
100100
<>
101101
<MenuButton {...menu} variant="secondary">

‎packages/paste-website/src/components/homepage/Accessibility.tsx

Lines changed: 31 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,9 @@
11
// eslint-disable-next-line eslint-comments/disable-enable-pair
22
/* eslint-disable react/jsx-max-depth */
3+
import { AspectRatio } from "@twilio-paste/aspect-ratio";
34
import { Box } from "@twilio-paste/box";
4-
import { Button } from "@twilio-paste/button";
55
import { Heading } from "@twilio-paste/heading";
6-
import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon";
76
import { ListItem, UnorderedList } from "@twilio-paste/list";
8-
import {
9-
ModalBody,
10-
ModalContext,
11-
ModalDialogContent,
12-
ModalFooter,
13-
ModalFooterActions,
14-
ModalHeader,
15-
ModalHeading,
16-
} from "@twilio-paste/modal";
177
import { Paragraph } from "@twilio-paste/paragraph";
188
import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@twilio-paste/tabs";
199
import { useUID } from "@twilio-paste/uid-library";
@@ -28,10 +18,6 @@ import { SectionSeparator } from "./SectionSeparator";
2818

2919
const Accessibility: React.FC = (): React.ReactElement => {
3020
const selectedTabId = useUID();
31-
const [modalIsOpen, setModalIsOpen] = React.useState(true);
32-
const onDismiss = (): void => setModalIsOpen(false);
33-
const onOpenModal = (): void => setModalIsOpen(!modalIsOpen);
34-
const modalHeadingID = useUID();
3521

3622
return (
3723
<SectionContainer>
@@ -84,62 +70,38 @@ const Accessibility: React.FC = (): React.ReactElement => {
8470
<Tab>Keyboard support</Tab>
8571
</TabList>
8672
<TabPanels>
87-
<TabPanel paddingTop="space0">
88-
<Box
89-
paddingX="space150"
90-
paddingY="space100"
91-
backgroundColor="colorBackgroundOverlay"
92-
borderBottomLeftRadius="borderRadius30"
93-
borderBottomRightRadius="borderRadius30"
94-
>
95-
<ModalContext.Provider value={{ onDismiss }}>
96-
<ModalDialogContent aria-labelledby={modalHeadingID}>
97-
<ModalHeader>
98-
<ModalHeading as="h3" id={modalHeadingID}>
99-
Focus management
100-
</ModalHeading>
101-
</ModalHeader>
102-
<ModalBody>
103-
All elements required to interact with the modal, including closing or acknowledging it, are
104-
contained in the modal since they trap focus, and users can&apos;t interact with the underlying
105-
page.
106-
</ModalBody>
107-
<ModalFooter>
108-
<ModalFooterActions>
109-
<Button variant="secondary" onClick={onDismiss}>
110-
Cancel
111-
</Button>
112-
<Button variant="primary" onClick={onOpenModal}>
113-
Next
114-
<ArrowForwardIcon decorative />
115-
</Button>
116-
</ModalFooterActions>
117-
</ModalFooter>
118-
</ModalDialogContent>
119-
</ModalContext.Provider>
120-
</Box>
73+
<TabPanel>
74+
<AspectRatio ratio="16:9">
75+
<iframe
76+
title="Remix silent demo video"
77+
src="https://www.loom.com/embed/4c584f749e414326b83fed3321132186?sid=42b642cb-3377-4a76-b926-fe0f9f274df7"
78+
frameBorder="0"
79+
allowFullScreen
80+
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
81+
/>
82+
</AspectRatio>
12183
</TabPanel>
122-
<TabPanel paddingTop="space0">
123-
<Box
124-
paddingX="space150"
125-
paddingY="space100"
126-
backgroundColor="colorBackgroundOverlay"
127-
borderBottomLeftRadius="borderRadius30"
128-
borderBottomRightRadius="borderRadius30"
129-
>
130-
screen reader support
131-
</Box>
84+
<TabPanel>
85+
<AspectRatio ratio="16:9">
86+
<iframe
87+
title="Remix silent demo video"
88+
src="https://www.loom.com/embed/5328cf9bec074512917180df829250e9?sid=a0a3a1a1-e521-4a86-8ccc-02b45344d97d"
89+
frameBorder="0"
90+
allowFullScreen
91+
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
92+
/>
93+
</AspectRatio>
13294
</TabPanel>
133-
<TabPanel paddingTop="space0">
134-
<Box
135-
paddingX="space150"
136-
paddingY="space100"
137-
backgroundColor="colorBackgroundOverlay"
138-
borderBottomLeftRadius="borderRadius30"
139-
borderBottomRightRadius="borderRadius30"
140-
>
141-
keyboard support
142-
</Box>
95+
<TabPanel>
96+
<AspectRatio ratio="16:9">
97+
<iframe
98+
title="Remix silent demo video"
99+
src="https://www.loom.com/embed/7a98f9ded7b24371bd6888fa80f52b19?sid=e9b9fd19-4bbd-4692-aa67-6e8ec72eb617"
100+
frameBorder="0"
101+
allowFullScreen
102+
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
103+
/>
104+
</AspectRatio>
143105
</TabPanel>
144106
</TabPanels>
145107
</Tabs>

0 commit comments

Comments
 (0)