Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(react-tree-grid): updates LiveMeetingsList story for better navigation #263

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore(react-tree-grid): updates LiveMeetingsList story for better navigation #263

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 49 additions & 77 deletions packages/react-tree-grid/stories/LiveMeetingsList.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
TreeGridProps,
TreeGridCell,
TreeGridRow,
TreeGridRowOnOpenChangeData,
} from '@fluentui-contrib/react-tree-grid';
import {
Button,
Expand All @@ -30,43 +29,27 @@ import {
} from '@fluentui/react-icons';

const useMeetingsSectionStyles = makeStyles({
container: {
display: 'grid',
gridTemplateColumns: 'repeat(3, auto)',
gridTemplateRows: 'repeat(3, auto)',
gridAutoFlow: 'row',
gridTemplateAreas: `
"icon title tag"
"icon location location"
"icon description description"
`,
alignItems: 'center',
rowGap: '0.5rem',
columnGap: '0.5rem',
alignSelf: 'baseline',
justifySelf: 'baseline',
},
title: {
alignSelf: 'start',
justifySelf: 'start',
...shorthands.gridArea('title'),
},
icon: {
...shorthands.gridArea('icon'),
...shorthands.margin(0, '1rem', 0, '0.6rem'),
alignSelf: 'flex-start',
},
title: shorthands.gridArea('title'),
icon: shorthands.gridArea('icon'),
tag: shorthands.gridArea('tag'),
location: shorthands.gridArea('location'),
description: shorthands.gridArea('description'),
sectionItem: {
...shorthands.padding('0.5rem'),
alignItems: 'start',
tasks: shorthands.gridArea('tasks'),
attachments: shorthands.gridArea('attachments'),
chat: shorthands.gridArea('chat'),
viewRecaps: shorthands.gridArea('view'),
treeGridRow: {
...shorthands.padding(tokens.spacingHorizontalM),
display: 'grid',
gridTemplateColumns: '1fr repeat(4, auto)',
gridTemplateRows: 'repeat(2, auto)',
columnGap: '0.5rem',
rowGap: '1rem',
gridTemplateColumns: 'auto 1fr repeat(5, auto)',
gridTemplateRows: 'repeat(3, auto)',
gridTemplateAreas: `
"icon title tag tasks attachments chat view"
"icon location location location nothing thumbnail thumbnail"
"icon description description description nothing thumbnail thumbnail"
`,
columnGap: tokens.spacingHorizontalM,
rowGap: tokens.spacingVerticalS,
':hover': {
backgroundColor: tokens.colorNeutralBackground2Hover,
},
Expand All @@ -79,17 +62,10 @@ const useMeetingsSectionStyles = makeStyles({
backgroundColor: tokens.colorPaletteRedBackground1,
color: tokens.colorPaletteRedForeground1,
},
image: {
...shorthands.gridArea(2, 1, 3, 5),
justifySelf: 'end',
},
header: {
...shorthands.gridArea(1, 1, 3, 2),
},
image: {},
thumbnail: {
alignSelf: 'end',
...shorthands.gridArea('thumbnail'),
justifySelf: 'end',
...shorthands.gridArea(2, 2, 3, 6),
},
h2: {
padding: tokens.spacingVerticalM,
Expand Down Expand Up @@ -267,49 +243,45 @@ const MeetingsSectionItem = (props: MeetingsSectionItemProps) => {
aria-description={`Created by: ${props.owner}. ${
props.status ? `Meeting status: ${props.status}` : ''
}`}
className={styles.sectionItem}
className={styles.treeGridRow}
>
<TreeGridCell
aria-label={`${props.header}. ${props.location}`}
className={mergeClasses(styles.header, styles.container)}
header
>
<Avatar
className={styles.icon}
icon={<CalendarRegular />}
aria-hidden
/>
<Button
appearance="transparent"
aria-label="Go to meeting"
className={mergeClasses(styles.noPadding, styles.title)}
>
<TreeGridCell className={styles.icon}>
<Avatar icon={<CalendarRegular />} aria-hidden />
</TreeGridCell>
<TreeGridCell header className={styles.title}>
<Button className={styles.noPadding} appearance="transparent">
<Body1Stronger>{props.header}</Body1Stronger>
</Button>
{props.status === 'missed' && (
<Tag
className={mergeClasses(styles.missedTag, styles.tag)}
size="small"
shape="circular"
>
<Caption1Stronger>Missed</Caption1Stronger>
</Tag>
)}
<Caption1 className={styles.location}>
</TreeGridCell>
<TreeGridCell className={styles.location}>
<Caption1>
{props.location}, {props.owner}
</Caption1>
{props.description && (
<Caption1 className={styles.description}>
{props.description}
</Caption1>
</TreeGridCell>
<TreeGridCell className={styles.description}>
{props.description && <Caption1>{props.description}</Caption1>}
</TreeGridCell>
<TreeGridCell className={styles.tag}>
{props.status === 'missed' && (
<Tag className={styles.missedTag} size="small" shape="circular">
<Caption1Stronger aria-label="status: missed">
Missed
</Caption1Stronger>
</Tag>
)}
</TreeGridCell>
{props.tasks && <TreeGridCell>{props.tasks}</TreeGridCell>}
{props.attachments && <TreeGridCell>{props.attachments}</TreeGridCell>}
<TreeGridCell>
{props.tasks && (
<TreeGridCell className={styles.tasks}>{props.tasks}</TreeGridCell>
)}
{props.attachments && (
<TreeGridCell className={styles.attachments}>
{props.attachments}
</TreeGridCell>
)}
Comment on lines +276 to +280
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is the conclusion on assymetric rows for treegrids? should we have them or not?

Copy link
Contributor Author

@bsunderhus bsunderhus Nov 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's no conclusion, we're focusing at the moment on the proper narration when you navigate on a nested level (from row to cells). At the moment there's a long repetition of unreachable content that is narrated once on the row level and again once you go into the cells, we're trying to mitigate that at the moment.

I believe the asymmetry might be an issue when navigating between rows, on a vertical level, we still need to verify that with more screen readers.

Copy link

@kolaps33 kolaps33 Nov 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point I think would be better to render just empty gridcell.

Because when trying to navigation with NVDA in column navigation ctrl+alt+up/down arrows, then when there is asymmetry, then screen reader jump to different column automatically. What sounds to me confusing, because I want to keep column navigation...

This is good point for next discussion how to solve it properly :)
Anyway if we decide to have it symmetric still we need to figure if we should add aria-label "empty" for empty gridcell or let it handle by screen reader.

<TreeGridCell className={styles.chat}>
<Button size="small">Chat</Button>
</TreeGridCell>
<TreeGridCell>
<TreeGridCell className={styles.viewRecaps}>
<Button size="small">View recaps</Button>
</TreeGridCell>
{props.thumbnail && (
Expand Down