diff --git a/.eslintrc.yml b/.eslintrc.yml index f0a9c93..c98f60c 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -4,14 +4,16 @@ parserOptions: project: tsconfig.json sourceType: module +plugins: + - simple-import-sort + - jsx-a11y + extends: - 'plugin:@typescript-eslint/recommended' - 'prettier' - prettier/@typescript-eslint - react-app - -plugins: - - simple-import-sort + - 'plugin:jsx-a11y/recommended' env: node: true diff --git a/src/components/APIConfig.js b/src/components/APIConfig.js index 282da42..bcda06e 100644 --- a/src/components/APIConfig.js +++ b/src/components/APIConfig.js @@ -78,6 +78,7 @@ function APIConfig({ apiConfig, dispatch }) { ); return ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions
diff --git a/src/components/proxies/Proxy.module.css b/src/components/proxies/Proxy.module.css index f233193..03c4df8 100644 --- a/src/components/proxies/Proxy.module.css +++ b/src/components/proxies/Proxy.module.css @@ -9,6 +9,12 @@ flex-direction: column; justify-content: space-between; + outline: none; + border: 1px solid transparent; + &:focus { + border: 1px solid var(--color-focus-blue); + } + max-width: 280px; @media (--breakpoint-not-small) { min-width: 200px; diff --git a/src/components/proxies/Proxy.tsx b/src/components/proxies/Proxy.tsx index d456da5..0cbf561 100644 --- a/src/components/proxies/Proxy.tsx +++ b/src/components/proxies/Proxy.tsx @@ -1,5 +1,6 @@ import cx from 'clsx'; import * as React from 'react'; +import { keyCodes } from 'src/misc/keycode'; import { getDelay, getProxies, NonProxyTypes } from '../../store/proxies'; import { connect } from '../StateProvider'; @@ -76,17 +77,35 @@ function ProxySmallImpl({ } return ret; }, [name, latency]); + + const doSelect = React.useCallback(() => { + isSelectable && onClick && onClick(name); + }, [name, onClick, isSelectable]); + + const className = useMemo(() => { + return cx(s0.proxySmall, { + [s0.now]: now, + [s0.selectable]: isSelectable, + }); + }, [isSelectable, now]); + + const handleKeyDown = React.useCallback( + (e: React.KeyboardEvent) => { + if (e.keyCode === keyCodes.Enter) { + doSelect(); + } + }, + [doSelect] + ); + return (