Skip to content

Commit 259fee3

Browse files
Added keyboard navigation to ActivityPub search (#25669)
ref https://linear.app/ghost/issue/BER-3119/add-keyboard-navigation-for-search-results-list Users can now navigate search results using arrow keys and Enter: - ArrowUp/ArrowDown to move between results with visual highlight - Enter to navigate to selected profile - Selection wraps around from last to first result and vice versa --------- Co-authored-by: Michael Barrett <mike@ghost.org>
1 parent c4fdc04 commit 259fee3

File tree

3 files changed

+177
-157
lines changed

3 files changed

+177
-157
lines changed

apps/activitypub/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@tryghost/activitypub",
3-
"version": "3.0.5",
3+
"version": "3.0.6",
44
"license": "MIT",
55
"repository": {
66
"type": "git",

apps/activitypub/src/components/activities/activity-item.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@ interface ActivityItemProps {
55
url?: string | null;
66
onClick?: () => void;
77
'data-testid'?: string;
8+
isSelected?: boolean;
89
}
910

10-
const ActivityItem: React.FC<ActivityItemProps> = ({children, url = null, onClick, 'data-testid': testId}) => {
11+
const ActivityItem: React.FC<ActivityItemProps> = ({children, url = null, onClick, 'data-testid': testId, isSelected = false}) => {
1112
const childrenArray = React.Children.toArray(children);
1213

1314
const Item = (
14-
<div className='relative flex w-full max-w-[620px] cursor-pointer flex-col before:absolute before:inset-x-[-16px] before:inset-y-[-1px] before:rounded-md before:bg-gray-50 before:opacity-0 before:transition-opacity hover:z-10 hover:cursor-pointer hover:border-b-transparent hover:before:opacity-100 dark:before:bg-gray-950' data-testid={testId} onClick={() => {
15+
<div className={`relative flex w-full max-w-[620px] cursor-pointer flex-col before:absolute before:inset-x-[-16px] before:inset-y-[-1px] before:rounded-md before:bg-gray-50 before:transition-opacity hover:z-10 hover:cursor-pointer hover:border-b-transparent hover:before:opacity-100 dark:before:bg-gray-950 ${isSelected ? 'z-10 before:opacity-100' : 'before:opacity-0'}`} data-testid={testId} onClick={() => {
1516
if (!url && onClick) {
1617
onClick();
1718
}

0 commit comments

Comments
 (0)