Skip to content

Commit ebd09c6

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 2ec903d commit ebd09c6

File tree

19 files changed

+588
-360
lines changed

19 files changed

+588
-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/ConfirmDeletionPopup/ConfirmDeletionPopup.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export const ConfirmDeletionPopup: React.FC<Props> = ({
124124
</MuiTypography>
125125
<CardList
126126
data={attributionIdsToDelete}
127-
renderItemContent={(attributionId, index) => {
127+
renderItemContent={(attributionId, { index }) => {
128128
if (!attributionId || !(attributionId in attributions)) {
129129
return null;
130130
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ export const ConfirmSavePopup: React.FC<Props> = ({
153153
</MuiTypography>
154154
<CardList
155155
data={attributionIdsToSave}
156-
renderItemContent={(attributionId, index) => {
156+
renderItemContent={(attributionId, { index }) => {
157157
if (!attributionId || !(attributionId in attributions)) {
158158
return null;
159159
}

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

+29-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,14 @@ 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 { ref, scrollerRef, focusedIndex, setIsFocused, selectedIndex } =
77+
useVirtuosoRefs<GroupedVirtuosoHandle>({
78+
data: groups?.ids,
79+
selected,
80+
});
7981

8082
return (
8183
<LoadingMask
@@ -97,10 +99,13 @@ export function GroupedList({
9799
return (
98100
<GroupedVirtuoso
99101
ref={ref}
102+
onFocus={() => setIsFocused(true)}
103+
onBlur={() => setIsFocused(false)}
100104
components={{
101105
EmptyPlaceholder:
102106
loading || groups.ids.length ? undefined : () => <NoResults />,
103107
}}
108+
scrollerRef={scrollerRef}
104109
rangeChanged={setRange}
105110
groupCounts={groups?.counts}
106111
groupContent={(index) => (
@@ -114,7 +119,13 @@ export function GroupedList({
114119
)}
115120
</GroupContainer>
116121
)}
117-
itemContent={(index) => renderItemContent(groups.ids[index], index)}
122+
itemContent={(index) =>
123+
renderItemContent(groups.ids[index], {
124+
index,
125+
selected: index === selectedIndex,
126+
focused: index === focusedIndex,
127+
})
128+
}
118129
{...props}
119130
/>
120131
);

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

+26-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,11 @@ 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 { focusedIndex, ref, scrollerRef, setIsFocused, selectedIndex } =
43+
useVirtuosoRefs<VirtuosoHandle>({
44+
data,
45+
selected,
46+
});
5447

5548
return (
5649
<LoadingMask
@@ -72,12 +65,21 @@ export function List({
7265
return (
7366
<Virtuoso
7467
ref={ref}
68+
onFocus={() => setIsFocused(true)}
69+
onBlur={() => setIsFocused(false)}
7570
components={{
7671
EmptyPlaceholder:
7772
loading || data.length ? undefined : () => <NoResults />,
7873
}}
74+
scrollerRef={scrollerRef}
7975
data={data}
80-
itemContent={(index) => renderItemContent(data[index], index)}
76+
itemContent={(index) =>
77+
renderItemContent(data[index], {
78+
index,
79+
selected: index === selectedIndex,
80+
focused: index === focusedIndex,
81+
})
82+
}
8183
{...props}
8284
/>
8385
);

0 commit comments

Comments
 (0)