From c97d6a60576b1bd9d18130504bdc4d8333416624 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Sun, 16 Mar 2025 21:19:35 +0000 Subject: [PATCH 1/4] chore: dual state menu demo --- .../src/AccessibilityScenarios/Menu.stories.tsx | 2 +- .../library/src/components/MenuItem/useMenuItem.tsx | 7 ------- 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx index c7b74a0d8ab6a2..45fc1826626a1e 100644 --- a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx +++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx @@ -71,7 +71,7 @@ export const ProfileMenu: React.FunctionComponent = () => { - Profile + Profile - dual state diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx index 750a3deeda900c..d6671c0d69ab81 100644 --- a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx +++ b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx @@ -74,13 +74,6 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref { - if (event.currentTarget.ownerDocument.activeElement !== event.currentTarget) { - innerRef.current?.focus(); - } - - props.onMouseMove?.(event); - }), onClick: useEventCallback(event => { if (!hasSubmenu && !persistOnClick) { setOpen(event, { From 7b5c94aa2a36543abdf41e9b969626e1c1146127 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 24 Mar 2025 20:32:53 +0000 Subject: [PATCH 2/4] examples --- .../Combobox.stories.tsx | 77 ++++++++++ .../AccessibilityScenarios/Menu.stories.tsx | 138 +++++++----------- 2 files changed, 132 insertions(+), 83 deletions(-) create mode 100644 apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx new file mode 100644 index 00000000000000..0abed2f593d6a9 --- /dev/null +++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx @@ -0,0 +1,77 @@ +import * as React from 'react'; +import { Combobox, Option, makeStyles, useId } from '@fluentui/react-components'; +import { Scenario } from './utils'; + +const useStyles = makeStyles({ + root: { + // Stack the label above the field with a gap + display: 'grid', + gridTemplateRows: 'repeat(1fr)', + justifyItems: 'start', + gap: '2px', + maxWidth: '400px', + }, +}); + +const options = [ + 'Apple', + 'Apricot', + 'Avocado', + 'Banana', + 'Blackberry', + 'Blueberry', + 'Boysenberry', + 'Cantaloupe', + 'Coconut', + 'Currant', + 'Date', + 'Dragon fruit', + 'Fig', + 'Grape', + 'Grapefruit', + 'Honeydew', + 'Kiwi', + 'Lemon', + 'Lime', + 'Lychee', + 'Mango', + 'Mandarin orange', + 'Melon', + 'Nectarine', + 'Olive', + 'Orange', + 'Papaya', + 'Passion Fruit', + 'Peach', + 'Pear', + 'Persimmon', + 'Pineapple', + 'Plum', + 'Pomegranate', + 'Raspberry', + 'Ramnutan', + 'Strawberry', + 'Tangerine', + 'Watermelon', +]; + +export const FilteringCombobox: React.FunctionComponent = () => { + const comboId = useId(); + const styles = useStyles(); + + return ( + +
Dual state
+
+ + + {options.map(option => ( + + ))} + +
+ + ); +}; diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx index 45fc1826626a1e..da69f6a922d3b1 100644 --- a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx +++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx @@ -1,99 +1,71 @@ import * as React from 'react'; -import { - Menu, - MenuButton, - MenuGroup, - MenuGroupHeader, - MenuItem, - MenuItemCheckbox, - MenuItemRadio, - MenuList, - MenuPopover, - MenuTrigger, -} from '@fluentui/react-components'; +import { Menu, MenuButton, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-components'; import { Scenario } from './utils'; -interface StatusSubmenuProps { - checkedValues: Record; - onChange: OnCheckedValueChangeCallback; -} - -const StatusSubmenu: React.FunctionComponent = props => { - const { checkedValues, onChange } = props; - - return ( - - - Status - - - - - - Online - - - Away - - - Offline - - - - - ); -}; - -type OnCheckedValueChangeDataType = { - name: string; - checkedItems: string[]; -}; - -type OnCheckedValueChangeCallback = ( - event: React.MouseEvent | React.KeyboardEvent, - data: OnCheckedValueChangeDataType, -) => void; - -type ProfileMenuStatus = { status: Array<'online' | 'away' | 'offline'> }; - export const ProfileMenu: React.FunctionComponent = () => { - const [statusCheckedValues, setStatusCheckedValues] = React.useState({ status: ['online'] }); - const onStatusChange = ( - event: React.MouseEvent | React.KeyboardEvent, - { name, checkedItems }: OnCheckedValueChangeDataType, - ) => { - setStatusCheckedValues(state => ({ ...state, [name]: checkedItems })); - }; - return ( - +
Dual state
+ - Profile - dual state + Pick a fruit - - Information - Help - - - Settings - - Run at startup - - - Show notifications - - - - Account - - Logout - + Apple + Apricot + Avocado + Banana + + + + Berries + + + + + Blackberry + Boysenberry + Blueberry + Strawberry + Rapsberry + Barry White + + + + + Cantaloupe + Coconut + Currant + Dragon Fruit + Grape + Grapefruit + Honeydew + Kiwi + Lemon + Lime + Lychee + Mango + Mandarin Orange + Melon + Nectarine + Olive + Orange + Papaya + Passion Fruit + Peach + Pear + Persimmon + Pineapple + Plum + Pomegranate + Raspberry + Rambutan + Strawberry + Watermelon From 9b6591b8273e331efcacd838cbe931a71429baf7 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Mon, 24 Mar 2025 20:57:35 +0000 Subject: [PATCH 3/4] scenarios --- .../src/AccessibilityScenarios/ListOfScenarios.stories.mdx | 4 ++++ .../src/AccessibilityScenarios/index.stories.tsx | 1 + 2 files changed, 5 insertions(+) diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.stories.mdx index e71f4feed04269..2606da903e4789 100644 --- a/apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.stories.mdx +++ b/apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.stories.mdx @@ -38,6 +38,10 @@ Accessibility scenarios are used to validate accessibility of components and dem - - +## Component: Combobox (dual state) + +- + ## Component: Popover - diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/index.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/index.stories.tsx index 8f50cd7590c4b2..905873130395d9 100644 --- a/apps/public-docsite-v9/src/AccessibilityScenarios/index.stories.tsx +++ b/apps/public-docsite-v9/src/AccessibilityScenarios/index.stories.tsx @@ -18,6 +18,7 @@ export { MailSettingsVerticalTabList } from './TabListVertical.stories'; export { QuestionnaireAboutCustomerExperienceTextareas } from './Textarea.stories'; export { DeviceControlsToggleButtons } from './ToggleButton.stories'; export { ButtonsWithTooltip } from './Tooltip.stories'; +export { FilteringCombobox } from './Combobox.stories'; export default { title: 'Concepts/Developer/Accessibility/Stories', From dbde4b86325d30427542cdad66319c5a61c8f08b Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Thu, 27 Mar 2025 17:32:51 +0000 Subject: [PATCH 4/4] titles --- .../src/AccessibilityScenarios/Combobox.stories.tsx | 3 ++- .../src/AccessibilityScenarios/Menu.stories.tsx | 3 ++- .../src/AccessibilityScenarios/utils.tsx | 8 +------- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx index 0abed2f593d6a9..cb92653e976bc7 100644 --- a/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx +++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Combobox.stories.tsx @@ -61,7 +61,8 @@ export const FilteringCombobox: React.FunctionComponent = () => { return ( -
Dual state
+

Test 4

+
Dual State Interaction (Independent Hover + Focus)
diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx index da69f6a922d3b1..53f0c93fde2985 100644 --- a/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx +++ b/apps/public-docsite-v9/src/AccessibilityScenarios/Menu.stories.tsx @@ -7,7 +7,8 @@ import { Scenario } from './utils'; export const ProfileMenu: React.FunctionComponent = () => { return ( -
Dual state
+

Test 2

+
Dual State Interaction (Independent Hover + Focus)
Pick a fruit diff --git a/apps/public-docsite-v9/src/AccessibilityScenarios/utils.tsx b/apps/public-docsite-v9/src/AccessibilityScenarios/utils.tsx index 12c494c2dc788d..a3b0f69f538ec2 100644 --- a/apps/public-docsite-v9/src/AccessibilityScenarios/utils.tsx +++ b/apps/public-docsite-v9/src/AccessibilityScenarios/utils.tsx @@ -34,11 +34,5 @@ export const Scenario: React.FunctionComponent<{ pageTitle: string }> = ({ pageT document.title = pageTitle + APP_TITLE_SEPARATOR + APP_TITLE; }, [pageTitle]); - return ( -
- -
- {children} -
- ); + return
{children}
; };