🤲 a11y: Keyboard Accessibility for Account Settings (#3666)

* refactor(NavLinks -> AccountSettings): add theming, fix minor type issues, and rename component

* fix: closes #3499 - Account settings menu is not keyboard accessible

* fix(DataTable): type issue causing application crash, update contextMap key for storage
This commit is contained in:
Danny Avila 2024-08-16 15:09:03 -04:00 committed by GitHub
parent 6ad65ff065
commit 3826af5909
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 85 additions and 70 deletions

View file

@ -9,14 +9,14 @@ interface Props {
disabled?: boolean;
}
const NavLink: FC<Props> = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
const NavLink: FC<Props> = forwardRef<HTMLButtonElement, Props>((props, ref) => {
const { svg, text, clickHandler, disabled, className = '' } = props;
const defaultProps: {
className: string;
onClick?: () => void;
} = {
className: cn(
'flex gap-2 rounded p-2.5 text-sm cursor-pointer focus:ring-0 group items-center transition-colors duration-200 hover:bg-gray-500/10 dark:text-white dark:hover:bg-gray-600',
'w-full flex gap-2 rounded p-2.5 text-sm cursor-pointer group items-center transition-colors duration-200 text-text-primary hover:bg-surface-hover',
className,
{
'opacity-50 pointer-events-none': disabled,
@ -29,10 +29,10 @@ const NavLink: FC<Props> = forwardRef<HTMLAnchorElement, Props>((props, ref) =>
}
return (
<a {...defaultProps} ref={ref}>
<button {...defaultProps} ref={ref}>
{svg()}
{text}
</a>
</button>
);
});