diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx index b16a36784..e1df669ac 100644 --- a/app/soapbox/components/list.tsx +++ b/app/soapbox/components/list.tsx @@ -21,9 +21,15 @@ const ListItem: React.FC = ({ label, hint, children, onClick }) => { const id = uuidv4(); const domId = `list-group-${id}`; + const onKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + onClick!(); + } + }; + const Comp = onClick ? 'a' : 'div'; const LabelComp = onClick ? 'span' : 'label'; - const linkProps = onClick ? { onClick } : {}; + const linkProps = onClick ? { onClick, onKeyDown, tabIndex: 0, role: 'link' } : {}; const renderChildren = React.useCallback(() => { return React.Children.map(children, (child) => { diff --git a/app/soapbox/components/sidebar-menu.tsx b/app/soapbox/components/sidebar-menu.tsx index 0e0ae7f6f..f4186f22b 100644 --- a/app/soapbox/components/sidebar-menu.tsx +++ b/app/soapbox/components/sidebar-menu.tsx @@ -134,9 +134,11 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { if (!account) return null; return ( -
= ({ status, hoverable if (to.size > 2) { accounts.push( - + , ); diff --git a/app/soapbox/features/aliases/components/search.tsx b/app/soapbox/features/aliases/components/search.tsx index b84d90aa4..f64c4a332 100644 --- a/app/soapbox/features/aliases/components/search.tsx +++ b/app/soapbox/features/aliases/components/search.tsx @@ -53,7 +53,7 @@ const Search: React.FC = () => { placeholder={intl.formatMessage(messages.search)} /> -
+
diff --git a/app/styles/components/react-toggle.scss b/app/styles/components/react-toggle.scss index 726e52731..1f5cb0fc5 100644 --- a/app/styles/components/react-toggle.scss +++ b/app/styles/components/react-toggle.scss @@ -8,6 +8,10 @@ user-select: none; -webkit-tap-highlight-color: rgba($base-overlay-background, 0); -webkit-tap-highlight-color: transparent; + + &:focus-within .react-toggle-track { + @apply ring-2 ring-offset-2 ring-primary-500; + } } .react-toggle-screenreader-only {