Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-14 00:19:16 +01:00
Code Issues Projects Releases Wiki Activity

refactor: use buttons for sortable <th>s (#898)

Browse Source 
* refactor: use buttons for sortable <th>s

* refactor: announce sorting to screen readers

* refactor: fix MenuItem padding override
This commit is contained in:
olav 2022-04-22 14:03:58 +02:00 committed by GitHub
parent 629df7ee26
commit 5288438c9f
11 changed files with 191 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/component/common/Announcer/AnnouncerContext/AnnouncerContext.test.tsx Normal file
View File

@ -0,0 +1,27 @@
import { render } from 'utils/testRenderer';
import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider';
import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext';
import { useContext, useEffect } from 'react';
import { screen } from '@testing-library/react';
test('AnnouncerContext', async () => {
const TestComponent = () => {
const { setAnnouncement } = useContext(AnnouncerContext);
useEffect(() => {
setAnnouncement('Foo');
setAnnouncement('Bar');
}, [setAnnouncement]);
return null;
};
render(
<AnnouncerProvider>
<TestComponent />
</AnnouncerProvider>
);
expect(screen.getByRole('status')).not.toHaveTextContent('Foo');
expect(screen.getByRole('status')).toHaveTextContent('Bar');
});

15
frontend/src/component/common/Announcer/AnnouncerContext/AnnouncerContext.tsx Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
export interface IAnnouncerContext {
setAnnouncement: React.Dispatch<React.SetStateAction<string | undefined>>;
}
const setAnnouncementPlaceholder = () => {
throw new Error('setAnnouncement called outside AnnouncerContext');
};
// AnnouncerContext announces messages to screen readers through a live region.
// Call setAnnouncement to broadcast a new message to the screen reader.
export const AnnouncerContext = React.createContext<IAnnouncerContext>({
setAnnouncement: setAnnouncementPlaceholder,
});

13
frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.styles.ts Normal file
View File

@ -0,0 +1,13 @@
import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles({
container: {
clip: 'rect(0 0 0 0)',
clipPath: 'inset(50%)',
zIndex: -1,
width: 1,
height: 1,
margin: -1,
padding: 0,
},
});

23
frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.tsx Normal file
View File

@ -0,0 +1,23 @@
import React, { ReactElement } from 'react';
import { useStyles } from 'component/common/Announcer/AnnouncerElement/AnnouncerElement.styles';
interface IAnnouncerElementProps {
announcement?: string;
}
export const AnnouncerElement = ({
announcement,
}: IAnnouncerElementProps): ReactElement => {
const styles = useStyles();
return (
<div
role="status"
aria-live="polite"
aria-atomic
className={styles.container}
>
{announcement}
</div>
);
};

27
frontend/src/component/common/Announcer/AnnouncerProvider/AnnouncerProvider.tsx Normal file
View File

@ -0,0 +1,27 @@
import React, { ReactElement, useMemo, useState, ReactNode } from 'react';
import { AnnouncerContext } from '../AnnouncerContext/AnnouncerContext';
import { AnnouncerElement } from 'component/common/Announcer/AnnouncerElement/AnnouncerElement';
interface IAnnouncerProviderProps {
children: ReactNode;
}
export const AnnouncerProvider = ({
children,
}: IAnnouncerProviderProps): ReactElement => {
const [announcement, setAnnouncement] = useState<string>();
const value = useMemo(
() => ({
setAnnouncement,
}),
[setAnnouncement]
);
return (
<AnnouncerContext.Provider value={value}>
{children}
<AnnouncerElement announcement={announcement} />
</AnnouncerContext.Provider>
);
};

6
frontend/src/component/common/Table/TableCellSortable/TableCellSortable.styles.ts
View File

@ -22,4 +22,10 @@ export const useStyles = makeStyles(theme => ({
},
},
},
sortButton: {
all: 'unset',
'&:focus-visible, &:active': {
outline: 'revert',
},
},
}));

45
frontend/src/component/common/Table/TableCellSortable/TableCellSortable.tsx
View File

@ -1,4 +1,4 @@
import React, { ReactNode } from 'react';
import React, { ReactNode, useContext } from 'react';
import { TableCell } from '@material-ui/core';
import classnames from 'classnames';
import {
@ -9,6 +9,7 @@ import {
import { IUsersSort, UsersSortType } from 'hooks/useUsersSort';
import ConditionallyRender from 'component/common/ConditionallyRender';
import { useStyles } from 'component/common/Table/TableCellSortable/TableCellSortable.styles';
import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext';
// Add others as needed, e.g. UsersSortType | FeaturesSortType
type SortType = UsersSortType;
@ -29,23 +30,37 @@ export const TableCellSortable = ({
setSort,
children,
}: ITableCellSortableProps) => {
const { setAnnouncement } = useContext(AnnouncerContext);
const styles = useStyles();
const ariaSort =
sort.type === name
? sort.desc
? 'descending'
: 'ascending'
: undefined;
const cellClassName = classnames(
className,
styles.tableCellHeaderSortable,
sort.type === name && 'sorted'
);
const onSortClick = () => {
setSort(prev => ({
desc: !Boolean(prev.desc),
type: name,
}));
setAnnouncement(
`Sorted table by ${name}, ${sort.desc ? 'ascending' : 'descending'}`
);
};
return (
<TableCell
className={classnames(
className,
styles.tableCellHeaderSortable,
sort.type === name && 'sorted'
)}
onClick={() =>
setSort(prev => ({
desc: !Boolean(prev.desc),
type: name,
}))
}
>
{children}
<TableCell aria-sort={ariaSort} className={cellClassName}>
<button className={styles.sortButton} onClick={onSortClick}>
{children}
</button>
<ConditionallyRender
condition={sort.type === name}
show={

6
frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
View File

@ -48,4 +48,10 @@ export const useStyles = makeStyles(theme => ({
color: theme.palette.primary.main,
fontWeight: theme.fontWeight.bold,
},
sortButton: {
all: 'unset',
'&:focus-visible, &:active': {
outline: 'revert',
},
},
}));

42
frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
View File

@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, useContext } from 'react';
import {
Table,
TableBody,
@ -18,6 +18,7 @@ import {
import PaginateUI from 'component/common/PaginateUI/PaginateUI';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { createGlobalStateHook } from 'hooks/useGlobalState';
import { AnnouncerContext } from 'component/common/Announcer/AnnouncerContext/AnnouncerContext';
interface IFeatureToggleListNewProps {
features: IFeatureToggleListItem[];
loading: boolean;
@ -83,6 +84,7 @@ const FeatureToggleListNew = ({
projectId,
}: IFeatureToggleListNewProps) => {
const styles = useStyles();
const { setAnnouncement } = useContext(AnnouncerContext);
const [sortOpt, setSortOpt] = useFeatureToggLeProjectSort();
const [sortedFeatures, setSortedFeatures] = useState(
sortList([...features], sortOpt)
@ -116,6 +118,12 @@ const FeatureToggleListNew = ({
setSortOpt(newSortOpt);
setSortedFeatures(sortList([...features], newSortOpt));
setPageIndex(0);
setAnnouncement(
`Sorted table by ${field}, ${
sortOpt.direction ? 'ascending' : 'descending'
}`
);
};
const getEnvironments = () => {
@ -163,6 +171,14 @@ const FeatureToggleListNew = ({
});
};
const ariaSort = (field: string) => {
return field === sortOpt.field
? sortOpt.direction
? 'ascending'
: 'descending'
: undefined;
};
return (
<>
<Table>
@ -176,13 +192,15 @@ const FeatureToggleListNew = ({
styles.tableCellHeaderSortable
)}
align="left"
aria-sort={ariaSort('lastSeenAt')}
>
<span
<button
data-loading
onClick={() => updateSort('lastSeenAt')}
className={styles.sortButton}
>
Last use
</span>
</button>
</TableCell>
<TableCell
className={classnames(
@ -192,13 +210,15 @@ const FeatureToggleListNew = ({
styles.tableCellHeaderSortable
)}
align="center"
aria-sort={ariaSort('type')}
>
<span
<button
data-loading
onClick={() => updateSort('type')}
className={styles.sortButton}
>
Type
</span>
</button>
</TableCell>
<TableCell
className={classnames(
@ -208,13 +228,15 @@ const FeatureToggleListNew = ({
styles.tableCellHeaderSortable
)}
align="left"
aria-sort={ariaSort('name')}
>
<span
<button
data-loading
onClick={() => updateSort('name')}
className={styles.sortButton}
>
Name
</span>
</button>
</TableCell>
<TableCell
className={classnames(
@ -224,13 +246,15 @@ const FeatureToggleListNew = ({
styles.tableCellHeaderSortable
)}
align="left"
aria-sort={ariaSort('createdAt')}
>
<span
<button
data-loading
onClick={() => updateSort('createdAt')}
className={styles.sortButton}
>
Created
</span>
</button>
</TableCell>
{getEnvironments().map((env: any) => {
return (

5
frontend/src/component/menu/Header/NavigationLink/NavigationLink.styles.ts
View File

@ -23,6 +23,9 @@ export const useStyles = makeStyles(theme => ({
color: '#000',
height: '100%',
width: '100%',
padding: '0.5rem 1rem',
'&&': {
// Override MenuItem's built-in padding.
padding: '0.5rem 1rem',
},
},
}));

11
frontend/src/index.tsx
View File

@ -12,6 +12,7 @@ import AccessProvider from 'component/providers/AccessProvider/AccessProvider';
import { getBasePath } from 'utils/formatPath';
import { FeedbackCESProvider } from 'component/feedback/FeedbackCESContext/FeedbackCESProvider';
import UIProvider from 'component/providers/UIProvider/UIProvider';
import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider';
ReactDOM.render(
<DndProvider backend={HTML5Backend}>
@ -19,10 +20,12 @@ ReactDOM.render(
<AccessProvider>
<Router basename={`${getBasePath()}`}>
<MainThemeProvider>
<FeedbackCESProvider>
<ScrollTop />
<Route path="/" component={App} />
</FeedbackCESProvider>
<AnnouncerProvider>
<FeedbackCESProvider>
<ScrollTop />
<Route path="/" component={App} />
</FeedbackCESProvider>
</AnnouncerProvider>
</MainThemeProvider>
</Router>
</AccessProvider>