sendnrw/netbird
2
0
Fork 0
mirror of https://github.com/netbirdio/netbird.git synced 2026-10-06 21:49:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

make main screen accessible

Browse Source
This commit is contained in:
Eduard Gert
2026-06-18 13:56:41 +02:00
parent 9cdc6e3013
commit 77fe022351
13 changed files with 392 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/ui/frontend/src/components/CopyToClipboard.tsx
+5 -1
View File
@@ -20,6 +20,7 @@ type CopyToClipboardProps = {
alwaysShowIcon?: boolean;
variant?: CopyToClipboardVariant;
"aria-label"?: string;
tabIndex?: number;
};
export const CopyToClipboard = ({
@@ -32,6 +33,7 @@ export const CopyToClipboard = ({
alwaysShowIcon = false,
variant = "default",
"aria-label": ariaLabel,
tabIndex = 0,
}: CopyToClipboardProps) => {
const { t } = useTranslation();
const wrapperRef = useRef<HTMLButtonElement>(null);
@@ -67,10 +69,12 @@ export const CopyToClipboard = ({
type="button"
ref={wrapperRef}
onClick={handleClick}
tabIndex={tabIndex}
aria-label={resolvedLabel}
aria-live="polite"
className={cn(
"inline-flex gap-2 items-center group/copy cursor-default wails-no-draggable text-left pointer-events-auto",
"inline-flex gap-2 items-center group/copy cursor-default wails-no-draggable text-left pointer-events-auto rounded-sm outline-none",
"focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
className,
)}
>
client/ui/frontend/src/components/buttons/IconButton.tsx
+4 -1
View File
@@ -9,16 +9,19 @@ type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
};
export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
{ icon: Icon, iconSize = 17, iconClassName, className, type = "button", ...props },
{ icon: Icon, iconSize = 17, iconClassName, className, type = "button", disabled, ...props },
ref,
) {
return (
<button
ref={ref}
type={type}
disabled={disabled}
tabIndex={disabled ? -1 : 0}
className={cn(
"h-10 w-10 flex items-center justify-center rounded-lg cursor-default outline-none",
"text-nb-gray-400 hover:text-nb-gray-300 hover:bg-nb-gray-900",
"focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940",
"transition-colors duration-150 wails-no-draggable",
className,
)}
client/ui/frontend/src/components/switches/ToggleSwitch.tsx
+4 -2
View File
@@ -47,10 +47,12 @@ const ToggleSwitch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> &
SwitchVariants & { dataCy?: string }
>(({ className, size = "default", variant = "default", dataCy, ...props }, ref) => (
>(({ className, size = "default", variant = "default", dataCy, disabled, ...props }, ref) => (
<SwitchPrimitives.Root
disabled={disabled}
tabIndex={disabled ? -1 : 0}
className={cn(
"wails-no-draggable peer inline-flex shrink-0 cursor-default items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950",
"wails-no-draggable peer inline-flex shrink-0 cursor-default items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-nb-gray-940 disabled:cursor-not-allowed disabled:opacity-50",
className,
switchVariants({ size, variant }),
)}