Skip to content

Commit 18d42f1

Browse files
mstykowmstykow
committed
feat: add keyboard navigation to attributions and signals lists
- merge PackageCard and ListCard components - track keyboard selected item in list and grouped-list - add focus styling to package card closes #971 Signed-off-by: Maxim Stykow <maxim.stykow@tngtech.com>
1 parent 0c6d8c5 commit 18d42f1

File tree

19 files changed

+598
-360
lines changed

19 files changed

+598
-360
lines changed

‎src/Frontend/Components/AttributionPanels/AttributionsPanel/AttributionsList/AttributionsList.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { changeSelectedAttributionOrOpenUnsavedPopup } from '../../../../state/a
1010
import { useAppDispatch } from '../../../../state/hooks';
1111
import { useAttributionIdsForReplacement } from '../../../../state/variables/use-attribution-ids-for-replacement';
1212
import { isPackageInfoIncomplete } from '../../../../util/is-important-attribution-information-missing';
13-
import { List } from '../../../List/List';
13+
import { List, ListItemContentProps } from '../../../List/List';
1414
import { PackageCard } from '../../../PackageCard/PackageCard';
1515
import { PackagesPanelChildrenProps } from '../../PackagesPanel/PackagesPanel';
1616

@@ -37,7 +37,10 @@ export const AttributionsList: React.FC<PackagesPanelChildrenProps> = ({
3737
/>
3838
);
3939

40-
function renderAttributionCard(attributionId: string) {
40+
function renderAttributionCard(
41+
attributionId: string,
42+
{ selected, focused }: ListItemContentProps,
43+
) {
4144
const attribution = attributions?.[attributionId];
4245

4346
if (!attribution) {
@@ -54,7 +57,8 @@ export const AttributionsList: React.FC<PackagesPanelChildrenProps> = ({
5457
);
5558
}}
5659
cardConfig={{
57-
selected: attributionId === selectedAttributionId,
60+
selected,
61+
focused,
5862
resolved: attributionIdsForReplacement.includes(attributionId),
5963
incomplete: isPackageInfoIncomplete(attribution),
6064
}}

‎src/Frontend/Components/AttributionPanels/SignalsPanel/SignalsList/SignalsList.tsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ import {
1414
getResolvedExternalAttributions,
1515
} from '../../../../state/selectors/resource-selectors';
1616
import { useAttributionIdsForReplacement } from '../../../../state/variables/use-attribution-ids-for-replacement';
17-
import { GroupedList } from '../../../GroupedList/GroupedList';
17+
import {
18+
GroupedList,
19+
GroupedListItemContentProps,
20+
} from '../../../GroupedList/GroupedList';
1821
import { SourceIcon } from '../../../Icons/Icons';
1922
import { PackageCard } from '../../../PackageCard/PackageCard';
2023
import { PackagesPanelChildrenProps } from '../../PackagesPanel/PackagesPanel';
@@ -79,7 +82,10 @@ export const SignalsList: React.FC<PackagesPanelChildrenProps> = ({
7982
/>
8083
);
8184

82-
function renderAttributionCard(attributionId: string) {
85+
function renderAttributionCard(
86+
attributionId: string,
87+
{ focused, selected }: GroupedListItemContentProps,
88+
) {
8389
const attribution = attributions?.[attributionId];
8490

8591
if (!attribution) {
@@ -96,7 +102,8 @@ export const SignalsList: React.FC<PackagesPanelChildrenProps> = ({
96102
);
97103
}}
98104
cardConfig={{
99-
selected: attributionId === selectedAttributionId,
105+
selected,
106+
focused,
100107
resolved: resolvedExternalAttributionIds.has(attributionId),
101108
}}
102109
packageInfo={attribution}

‎src/Frontend/Components/CardList/CardList.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@ import { styled } from '@mui/material';
66

77
import { OpossumColors } from '../../shared-styles';
88
import { List } from '../List/List';
9-
import { LIST_CARD_HEIGHT } from '../ListCard/ListCard';
9+
import { PACKAGE_CARD_HEIGHT } from '../PackageCard/PackageCard';
1010

1111
const MAX_NUMBER_OF_CARDS = 4;
1212

1313
export const CardList = styled(List)(({ data }) => {
1414
const height =
15-
Math.min(MAX_NUMBER_OF_CARDS, data?.length ?? 0) * (LIST_CARD_HEIGHT + 1) +
15+
Math.min(MAX_NUMBER_OF_CARDS, data?.length ?? 0) *
16+
(PACKAGE_CARD_HEIGHT + 1) +
1617
1;
1718

1819
return {

‎src/Frontend/Components/ConfirmDeletePopup/ConfirmDeletePopup.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export const ConfirmDeletePopup: React.FC<Props> = ({
118118
</MuiTypography>
119119
<CardList
120120
data={attributionIdsToDelete}
121-
renderItemContent={(attributionId, index) => {
121+
renderItemContent={(attributionId, { index }) => {
122122
if (!attributionId || !(attributionId in attributions)) {
123123
return null;
124124
}

‎src/Frontend/Components/ConfirmReplacePopup/ConfirmReplacePopup.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export const ConfirmReplacePopup = ({
9898
<CardList
9999
data={attributionIdsForReplacement}
100100
data-testid={'removed-attributions'}
101-
renderItemContent={(attributionId, index) => {
101+
renderItemContent={(attributionId, { index }) => {
102102
if (!attributionId || !(attributionId in attributions)) {
103103
return null;
104104
}

‎src/Frontend/Components/ConfirmSavePopup/ConfirmSavePopup.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ export const ConfirmSavePopup: React.FC<Props> = ({
147147
</MuiTypography>
148148
<CardList
149149
data={attributionIdsToSave}
150-
renderItemContent={(attributionId, index) => {
150+
renderItemContent={(attributionId, { index }) => {
151151
if (!attributionId || !(attributionId in attributions)) {
152152
return null;
153153
}

‎src/Frontend/Components/GroupedList/GroupedList.tsx

+34-18
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp
99
import MuiBox from '@mui/material/Box';
1010
import MuiTooltip from '@mui/material/Tooltip';
1111
import { SxProps } from '@mui/system';
12-
import { defer } from 'lodash';
13-
import { useEffect, useMemo, useRef, useState } from 'react';
12+
import { useMemo, useState } from 'react';
1413
import {
1514
GroupedVirtuoso,
1615
GroupedVirtuosoHandle,
@@ -19,16 +18,26 @@ import {
1918

2019
import { text } from '../../../shared/text';
2120
import { OpossumColors } from '../../shared-styles';
21+
import { useVirtuosoRefs } from '../../util/use-virtuoso-refs';
2222
import { LoadingMask } from '../LoadingMask/LoadingMask';
2323
import { NoResults } from '../NoResults/NoResults';
2424
import { GroupContainer, StyledLinearProgress } from './GroupedList.style';
2525

26+
export interface GroupedListItemContentProps {
27+
index: number;
28+
selected: boolean;
29+
focused: boolean;
30+
}
31+
2632
export interface GroupedListProps {
2733
className?: string;
2834
grouped: Record<string, ReadonlyArray<string>> | null;
2935
loading?: boolean;
3036
renderGroupName?: (key: string) => React.ReactNode;
31-
renderItemContent: (datum: string, index: number) => React.ReactNode;
37+
renderItemContent: (
38+
datum: string,
39+
props: GroupedListItemContentProps,
40+
) => React.ReactNode;
3241
selected?: string;
3342
sx?: SxProps;
3443
testId?: string;
@@ -45,7 +54,6 @@ export function GroupedList({
4554
testId,
4655
...props
4756
}: GroupedListProps & Omit<GroupedVirtuosoProps<string, unknown>, 'selected'>) {
48-
const ref = useRef<GroupedVirtuosoHandle>(null);
4957
const [{ startIndex, endIndex }, setRange] = useState<{
5058
startIndex: number;
5159
endIndex: number;
@@ -62,20 +70,19 @@ export function GroupedList({
6270
ids: flattened,
6371
keys: Object.keys(grouped),
6472
counts: Object.values(grouped).map((group) => group.length),
65-
selectedIndex: flattened.findIndex((datum) => datum === selected),
6673
};
67-
}, [grouped, selected]);
68-
69-
useEffect(() => {
70-
if (groups?.selectedIndex !== undefined && groups.selectedIndex >= 0) {
71-
defer(() =>
72-
ref.current?.scrollIntoView({
73-
index: groups.selectedIndex,
74-
align: 'center',
75-
}),
76-
);
77-
}
78-
}, [groups?.selectedIndex]);
74+
}, [grouped]);
75+
76+
const {
77+
ref,
78+
scrollerRef,
79+
focusedIndex,
80+
setIsVirtuosoFocused,
81+
selectedIndex,
82+
} = useVirtuosoRefs<GroupedVirtuosoHandle>({
83+
data: groups?.ids,
84+
selected,
85+
});
7986

8087
return (
8188
<LoadingMask
@@ -97,10 +104,13 @@ export function GroupedList({
97104
return (
98105
<GroupedVirtuoso
99106
ref={ref}
107+
onFocus={() => setIsVirtuosoFocused(true)}
108+
onBlur={() => setIsVirtuosoFocused(false)}
100109
components={{
101110
EmptyPlaceholder:
102111
loading || groups.ids.length ? undefined : () => <NoResults />,
103112
}}
113+
scrollerRef={scrollerRef}
104114
rangeChanged={setRange}
105115
groupCounts={groups?.counts}
106116
groupContent={(index) => (
@@ -114,7 +124,13 @@ export function GroupedList({
114124
)}
115125
</GroupContainer>
116126
)}
117-
itemContent={(index) => renderItemContent(groups.ids[index], index)}
127+
itemContent={(index) =>
128+
renderItemContent(groups.ids[index], {
129+
index,
130+
selected: index === selectedIndex,
131+
focused: index === focusedIndex,
132+
})
133+
}
118134
{...props}
119135
/>
120136
);

‎src/Frontend/Components/List/List.tsx

+31-24
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,27 @@
33
//
44
// SPDX-License-Identifier: Apache-2.0
55
import { SxProps } from '@mui/system';
6-
import { defer } from 'lodash';
7-
import { useEffect, useMemo, useRef } from 'react';
86
import { Virtuoso, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';
97

8+
import { useVirtuosoRefs } from '../../util/use-virtuoso-refs';
109
import { LoadingMask } from '../LoadingMask/LoadingMask';
1110
import { NoResults } from '../NoResults/NoResults';
1211
import { StyledLinearProgress } from './List.style';
1312

13+
export interface ListItemContentProps {
14+
index: number;
15+
selected: boolean;
16+
focused: boolean;
17+
}
18+
1419
export interface ListProps {
1520
className?: string;
1621
data: ReadonlyArray<string> | null;
1722
loading?: boolean;
18-
renderItemContent: (datum: string, index: number) => React.ReactNode;
23+
renderItemContent: (
24+
datum: string,
25+
props: ListItemContentProps,
26+
) => React.ReactNode;
1927
selected?: string;
2028
sx?: SxProps;
2129
testId?: string;
@@ -31,26 +39,16 @@ export function List({
3139
testId,
3240
...props
3341
}: ListProps & Omit<VirtuosoProps<string, unknown>, 'data' | 'selected'>) {
34-
const ref = useRef<VirtuosoHandle>(null);
35-
36-
const selectedIndex = useMemo(() => {
37-
if (!data) {
38-
return undefined;
39-
}
40-
41-
return data.findIndex((datum) => datum === selected);
42-
}, [data, selected]);
43-
44-
useEffect(() => {
45-
if (selectedIndex !== undefined && selectedIndex >= 0) {
46-
defer(() =>
47-
ref.current?.scrollIntoView({
48-
index: selectedIndex,
49-
align: 'center',
50-
}),
51-
);
52-
}
53-
}, [selectedIndex]);
42+
const {
43+
focusedIndex,
44+
ref,
45+
scrollerRef,
46+
setIsVirtuosoFocused,
47+
selectedIndex,
48+
} = useVirtuosoRefs<VirtuosoHandle>({
49+
data,
50+
selected,
51+
});
5452

5553
return (
5654
<LoadingMask
@@ -72,12 +70,21 @@ export function List({
7270
return (
7371
<Virtuoso
7472
ref={ref}
73+
onFocus={() => setIsVirtuosoFocused(true)}
74+
onBlur={() => setIsVirtuosoFocused(false)}
7575
components={{
7676
EmptyPlaceholder:
7777
loading || data.length ? undefined : () => <NoResults />,
7878
}}
79+
scrollerRef={scrollerRef}
7980
data={data}
80-
itemContent={(index) => renderItemContent(data[index], index)}
81+
itemContent={(index) =>
82+
renderItemContent(data[index], {
83+
index,
84+
selected: index === selectedIndex,
85+
focused: index === focusedIndex,
86+
})
87+
}
8188
{...props}
8289
/>
8390
);

0 commit comments

Comments
 (0)