Add keyboard controls & better focus UI for Send tabs

pimterry · pimterry · commit 3af22026aa21 · 2024-03-21T17:02:14.000+01:00
diff --git a/src/components/common/icon-button.tsx b/src/components/common/icon-button.tsx
@@ -11,14 +11,17 @@ export const IconButton = styled((p: {
     icon: IconProp,
     disabled?: boolean,
     fixedWidth?: boolean,
-    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void
+    tabIndex?: number,
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void,
+    onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void
 }) =>
     <UnstyledButton
         className={p.className}
         title={p.title}
-        tabIndex={p.disabled ? -1 : 0}
+        tabIndex={p.tabIndex ?? (p.disabled ? -1 : 0)}
         disabled={p.disabled}
         onClick={p.onClick}
+        onKeyDown={p.onKeyDown}
     >
         <Icon
             icon={p.icon}
diff --git a/src/components/send/send-page.tsx b/src/components/send/send-page.tsx
@@ -3,6 +3,7 @@ import { inject, observer } from 'mobx-react';
 import * as portals from 'react-reverse-portal';
 
 import { styled } from '../../styles';
+import { useHotkeys } from '../../util/ui';
 
 import { SendStore } from '../../model/send/send-store';
 
@@ -25,6 +26,20 @@ const TabContentContainer = styled.div`
     box-shadow: 0 0 10px 0 rgba(0,0,0,${p => p.theme.boxShadowAlpha});
 `;
 
+const SendPageKeyboardShortcuts = (props: {
+    onMoveSelection: (distance: number) => void
+}) => {
+    useHotkeys('Ctrl+Tab, Cmd+Tab', (event) => {
+        props.onMoveSelection(1);
+    }, [props.onMoveSelection]);
+
+    useHotkeys('Ctrl+Shift+Tab, Cmd+Shift+Tab', (event) => {
+        props.onMoveSelection(-1);
+    }, [props.onMoveSelection]);
+
+    return null;
+};
+
 @inject('sendStore')
 @observer
 export class SendPage extends React.Component<{
@@ -42,6 +57,7 @@ export class SendPage extends React.Component<{
         const {
             sendRequests,
             selectRequest,
+            moveSelection,
             deleteRequest,
             sendRequest,
             selectedRequest,
@@ -53,10 +69,15 @@ export class SendPage extends React.Component<{
                 sendRequests={sendRequests}
                 selectedTab={selectedRequest}
                 onSelectTab={selectRequest}
+                onMoveSelection={moveSelection}
                 onCloseTab={deleteRequest}
                 onAddTab={addRequestInput}
             />
 
+            <SendPageKeyboardShortcuts
+                onMoveSelection={moveSelection}
+            />
+
             <TabContentContainer
                 id='send-tabpanel'
                 role='tabpanel'
diff --git a/src/components/send/send-request-line.tsx b/src/components/send/send-request-line.tsx
@@ -65,9 +65,15 @@ const MethodSelectContainer = styled.div`
     flex-grow: 0;
     flex-basis: 105px;
 
-    &:focus-within > svg {
-        color: ${p => p.theme.popColor};
-        opacity: 1;
+    &:focus-within {
+        > svg {
+            color: ${p => p.theme.popColor};
+            opacity: 1;
+        }
+
+        > select {
+            font-weight: bold;
+        }
     }
 `;
 
@@ -96,6 +102,11 @@ const SendButton = styled(Button)`
     > svg {
         padding: 0;
     }
+
+    &:focus {
+        outline: none;
+        background-color: ${p => p.theme.popColor};
+    }
 `;
 
 export const SendRequestLine = (props: {
diff --git a/src/components/send/send-tabs.tsx b/src/components/send/send-tabs.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
+import { observer } from 'mobx-react-lite';
 
 import { css, styled } from '../../styles';
-import { UnstyledButton } from '../common/inputs';
+
 import { SendRequest } from '../../model/send/send-request-model';
 import { getMethodColor } from '../../model/events/categorization';
-import { observer } from 'mobx-react';
+
+import { UnstyledButton } from '../common/inputs';
 import { IconButton } from '../common/icon-button';
-import { noPropagation } from '../component-utils';
 
 export const TAB_BAR_HEIGHT = '38px';
 
@@ -62,23 +63,6 @@ const TabContainer = styled.div<{ selected: boolean }>`
     }
 `;
 
-const TabButton = styled(UnstyledButton).attrs((p: { selected: boolean }) => ({
-    role: 'tab',
-    'aria-selected': p.selected.toString(),
-    'tabindex': p.selected ? '0' : '-1'
-}))`
-    flex-basis: 100%;
-    flex-grow: 1;
-    flex-shrink: 1;
-
-    text-align: left;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-
-    padding: 0 10px;
-`;
-
 const TabMethodMarker = styled.span<{ method: string }>`
     color: ${p => getMethodColor(p.method)};
     font-size: ${p => p.theme.textInputFontSize};
@@ -101,51 +85,148 @@ const AddTabButton = styled(IconButton)`
     align-self: center;
 `;
 
+const TabButton = styled(UnstyledButton).attrs((p: { selected: boolean }) => ({
+    role: 'tab',
+    'aria-selected': p.selected.toString(),
+    'tabindex': p.selected ? '0' : '-1'
+}))`
+    flex-basis: 100%;
+    flex-grow: 1;
+    flex-shrink: 1;
+
+    text-align: left;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    padding: 0 10px;
+
+    :focus-visible {
+        outline: none;
+        font-weight: bold;
+
+        & + ${CloseTabButton} {
+            color: ${p => p.theme.popColor};
+        }
+    }
+`;
+
+const SendTab = observer((props: {
+    sendRequest: SendRequest,
+    isSelectedTab: boolean,
+    onSelectTab: (request: SendRequest) => void,
+    onCloseTab: (request: SendRequest) => void
+}) => {
+    const { id, request } = props.sendRequest;
+
+    const onTabClick = React.useCallback(() => {
+        props.onSelectTab(props.sendRequest)
+    }, [props.onSelectTab, props.sendRequest]);
+
+    const onTaxAuxClick = React.useCallback((event) => {
+        if (event.button === 1) { // Middle mouse click
+            props.onCloseTab(props.sendRequest);
+        }
+    }, [props.onCloseTab, props.sendRequest]);
+
+    const onCloseClick = React.useCallback((event: React.SyntheticEvent) => {
+        props.onCloseTab(props.sendRequest);
+        event.stopPropagation();
+    }, [props.onCloseTab, props.sendRequest]);
+
+    return <TabContainer
+        key={id}
+        selected={props.isSelectedTab}
+        onClick={onTabClick}
+        onAuxClick={onTaxAuxClick}
+    >
+        <TabButton
+            selected={props.isSelectedTab}
+            tabIndex={props.isSelectedTab ? 0 : -1}
+        >
+            <TabMethodMarker method={request.method}>
+                { request.method }
+            </TabMethodMarker>
+
+            <TabName>{
+                request.url.replace(/^https?:\/\//, '') || ''
+            }</TabName>
+        </TabButton>
+
+        {
+            props.isSelectedTab && <CloseTabButton
+                title='Close this tab'
+                icon={['fas', 'times']}
+                onClick={onCloseClick}
+                tabIndex={-1} // No focus - keyboard closes via 'Delete' instead
+            />
+        }
+    </TabContainer>;
+});
+
 export const SendTabs = observer((props: {
     sendRequests: Array<SendRequest>;
     selectedTab: SendRequest;
     onSelectTab: (sendRequest: SendRequest) => void;
+    onMoveSelection: (distance: number) => void;
     onCloseTab: (sendRequest: SendRequest) => void;
     onAddTab: () => void;
 }) => {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    const focusSelectedEvent = React.useCallback(() => {
+        const container = containerRef.current;
+        if (!container) return;
+
+        const selectedTab = container.querySelector('[role=tab][aria-selected=true]') as HTMLButtonElement;
+        if (!selectedTab) return;
+        selectedTab.focus();
+    }, [containerRef]);
+
+    const onKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLElement>) => {
+        // Note that selected tab === focused tab so no worries differentiating the two
+        if (event.key === 'Delete') {
+            props.onCloseTab(props.selectedTab);
+        } else if (event.key === 'ArrowRight') {
+            props.onMoveSelection(1);
+        } else if (event.key === 'ArrowLeft') {
+            props.onMoveSelection(-1);
+        } else if (event.key === 'Home') {
+            props.onMoveSelection(-Infinity);
+        } else if (event.key === 'End') {
+            props.onMoveSelection(Infinity);
+        } else {
+            return;
+        }
+
+        // In all the above cases, we want to update the focus to match:
+        requestAnimationFrame(() => focusSelectedEvent());
+    }, [props.onCloseTab, props.selectedTab, props.onMoveSelection, focusSelectedEvent]);
 
+    const onAddButtonKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLElement>) => {
+        event.stopPropagation();
+    }, []);
 
-    return <TabsContainer>
+    return <TabsContainer
+        ref={containerRef}
+        onKeyDown={onKeyDown}
+    >
         {
             props.sendRequests.map((sendRequest) => {
-                const { id, request } = sendRequest;
-
-                const isSelected = props.selectedTab === sendRequest;
-
-                return <TabContainer
-                    key={id}
-                    selected={isSelected}
-                    onClick={() => props.onSelectTab(sendRequest)}
-                >
-                    <TabButton selected={isSelected}>
-                        <TabMethodMarker method={request.method}>
-                            { request.method }
-                        </TabMethodMarker>
-
-                        <TabName>{
-                            request.url.replace(/^https?:\/\//, '') || ''
-                        }</TabName>
-                    </TabButton>
-
-                    {
-                        isSelected && <CloseTabButton
-                            title='Close this tab'
-                            icon={['fas', 'times']}
-                            onClick={noPropagation(() => props.onCloseTab(sendRequest))}
-                        />
-                    }
-                </TabContainer>;
+                const isSelectedTab = props.selectedTab === sendRequest;
+                return <SendTab
+                    sendRequest={sendRequest}
+                    isSelectedTab={isSelectedTab}
+                    onSelectTab={props.onSelectTab}
+                    onCloseTab={props.onCloseTab}
+                />
             })
         }
 
         <AddTabButton
             title='Add another tab to send a new request'
             icon={['fas', 'plus']}
+            onKeyDown={onAddButtonKeyDown}
             onClick={() => props.onAddTab()}
         />
     </TabsContainer>
diff --git a/src/model/send/send-store.ts b/src/model/send/send-store.ts
@@ -94,6 +94,15 @@ export class SendStore {
         this.selectedRequest = sendRequest;
     }
 
+    @action.bound
+    moveSelection(distance: number) {
+        const currentIndex = this.sendRequests.indexOf(this.selectedRequest);
+        if (currentIndex === -1) throw new Error("Selected request is somehow not in Send requests list");
+
+        const newIndex = _.clamp(currentIndex + distance, 0, this.sendRequests.length - 1);
+        this.selectRequest(this.sendRequests[newIndex]);
+    }
+
     @action.bound
     deleteRequest(sendRequest: SendRequest) {
         const index = this.sendRequests.indexOf(sendRequest);
