opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): use focus-visible instead of focus for keyboard-only outlines (#23581)

Browse Source
This commit is contained in:
Danielle Maywood
2026-03-25 13:31:50 +00:00
committed by GitHub
parent a8757d603a
commit 8bfc5e0868
6 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
+2 -2
View File
@@ -512,7 +512,7 @@ export const MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({
data-testid="clear-option-button"
className={cn(
`ml-1 pr-0 rounded-sm bg-transparent border-none outline-none
focus:ring-2 focus:ring-content-link focus:ml-2.5 focus:pl-0 cursor-pointer`,
focus-visible:ring-2 focus-visible:ring-content-link focus-visible:ml-2.5 focus-visible:pl-0 cursor-pointer`,
(disabled || option.fixed) && "hidden",
)}
onKeyDown={(e) => {
@@ -585,7 +585,7 @@ export const MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({
className={cn(
"bg-transparent mt-1 border-none rounded-sm",
"cursor-pointer text-content-secondary hover:text-content-primary",
"outline-none focus:ring-2 focus:ring-content-link [&>svg]:p-0.5",
"outline-none focus-visible:ring-2 focus-visible:ring-content-link [&>svg]:p-0.5",
(hideClearAllButton ||
disabled ||
selected.length < 1 ||
site/src/components/Select/Select.tsx
+2 -2
View File
@@ -30,8 +30,8 @@ export const SelectTrigger: React.FC<SelectTriggerProps> = ({
className={cn(
`flex h-10 w-full font-medium items-center justify-between whitespace-nowrap rounded-md
border border-border border-solid bg-transparent px-3 py-2 text-sm shadow-sm
ring-offset-background text-content-secondary placeholder:text-content-secondary focus:outline-none,
focus:ring-2 focus:ring-content-link disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1
ring-offset-background text-content-secondary placeholder:text-content-secondary
disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link group`,
className,
)}
site/src/components/Table/Table.tsx
+1 -1
View File
@@ -72,7 +72,7 @@ const tableRowVariants = cva(
hover: {
false: null,
true: cn(
"cursor-pointer hover:outline focus:outline outline-1 -outline-offset-1 outline-border-hover",
"cursor-pointer hover:outline focus-visible:outline outline-1 -outline-offset-1 outline-border-hover",
"first:rounded-t-md last:rounded-b-md",
),
},
site/src/components/Timeline/TimelineEntry.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export const TimelineEntry: React.FC<TimelineEntryProps> = ({
return (
<TableRow
className={cn(
"focus:outline focus:-outline-offset-1 focus:outline-2 focus:outline-content-primary ",
"focus-visible:outline focus-visible:-outline-offset-1 focus-visible:outline-2 focus-visible:outline-content-primary ",
"[&_td]:relative [&_td]:overflow-hidden",
"[&_td:before]:absolute [&_td:before]:block [&_td:before]:h-full [&_td:before]:content-[''] [&_td:before]:bg-border [&_td:before]:w-0.5 [&_td:before]:left-[calc((32px+(var(--avatar-default)/2))-1px)]",
clickable && "cursor-pointer hover:bg-surface-secondary",
site/src/hooks/useClickableTableRow.ts
+1 -1
View File
@@ -58,7 +58,7 @@ export const useClickableTableRow = <
return {
...clickableProps,
className: cn([
"cursor-pointer hover:outline focus:outline outline-1 -outline-offset-1 outline-border-hover",
"cursor-pointer hover:outline focus-visible:outline outline-1 -outline-offset-1 outline-border-hover",
"first:rounded-t-md last:rounded-b-md",
]),
hover: true,
site/src/modules/dashboard/DashboardLayout.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const DashboardLayout: FC = () => {
const main = document.getElementById("main-content");
main?.focus();
}}
className="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-surface-primary focus:text-content-primary"
className="sr-only focus-visible:not-sr-only focus-visible:absolute focus-visible:z-50 focus-visible:p-4 focus-visible:bg-surface-primary focus-visible:text-content-primary"
>
Skip to main content
</a>