diff --git a/src/Anchor.tsx b/src/Anchor.tsx index fb434e0..aaf5f42 100644 --- a/src/Anchor.tsx +++ b/src/Anchor.tsx @@ -32,7 +32,7 @@ const Anchor = React.forwardRef( }, ); - if ((isTrivialHref(props.href) && !props.role) || props.role === 'button') { + if (isTrivialHref(props.href) || props.role === 'button') { return ( ); diff --git a/src/Button.tsx b/src/Button.tsx index a7c357e..324a3c8 100644 --- a/src/Button.tsx +++ b/src/Button.tsx @@ -14,6 +14,7 @@ export interface UseButtonPropsOptions extends AnchorOptions { onClick?: React.EventHandler; tabIndex?: number; tagName?: keyof JSX.IntrinsicElements; + role?: React.AriaRole | undefined; } export function isTrivialHref(href?: string) { @@ -23,7 +24,7 @@ export function isTrivialHref(href?: string) { export interface AriaButtonProps { type?: ButtonType | undefined; disabled: boolean | undefined; - role?: 'button'; + role?: React.AriaRole; tabIndex?: number | undefined; href?: string | undefined; target?: string | undefined; @@ -43,6 +44,7 @@ export function useButtonProps({ href, target, rel, + role, onClick, tabIndex = 0, type, @@ -90,7 +92,7 @@ export function useButtonProps({ return [ { - role: 'button', + role: role ?? 'button', // explicitly undefined so that it overrides the props disabled in a spread // e.g. disabled: undefined,