CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accessibility pass

Browse Source
This commit is contained in:
adilallo
2025-08-07 10:53:50 -06:00
parent 6bfcaf2aa0
commit a1fb1a1c7c
7 changed files with 179 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Button.js
+8 -6
View File
@@ -36,9 +36,9 @@ export default function Button({
const variantStyles = { const variantStyles = {
default: default:
"bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50", "bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset hover:scale-[1.02] hover:shadow-lg active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100 disabled:hover:shadow-none",
secondary: secondary:
"bg-transparent text-[var(--color-content-default-brand-primary)] hover:text-[var(--color-content-default-primary)] focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_#FFFDD2] focus:blur-[0px] active:outline-[1.5px] active:outline-inset active:outline-[var(--color-content-default-brand-primary)] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50", "bg-transparent text-[var(--color-content-default-brand-primary)] hover:text-[var(--color-content-default-primary)] hover:scale-[1.02] hover:bg-[var(--color-surface-default-tertiary)] focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_#FFFDD2] focus:blur-[0px] active:outline-[1.5px] active:outline-inset active:outline-[var(--color-content-default-brand-primary)] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
}; };
const hoverOutlineStyles = { const hoverOutlineStyles = {
@@ -48,9 +48,10 @@ export default function Button({
xlarge: "hover:outline-[2.5px]", xlarge: "hover:outline-[2.5px]",
}; };
const focusStyles = "focus:shadow-[0_0_10px_1px_#FFFDD2] focus:outline-none"; const focusStyles =
"focus:shadow-[0_0_10px_1px_#FFFDD2] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:scale-[1.02]";
const baseStyles = `inline-flex items-center justify-start box-border ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-200 cursor-pointer ${variantStyles[variant]} ${hoverOutlineStyles[size]} ${focusStyles}`; const baseStyles = `inline-flex items-center justify-start box-border ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-200 ease-in-out cursor-pointer ${variantStyles[variant]} ${hoverOutlineStyles[size]} ${focusStyles}`;
let finalVariant = variant; let finalVariant = variant;
if (disabled) { if (disabled) {
@@ -61,8 +62,11 @@ export default function Button({
const accessibilityProps = { const accessibilityProps = {
...(ariaLabel && { "aria-label": ariaLabel }), ...(ariaLabel && { "aria-label": ariaLabel }),
...(disabled && { "aria-disabled": "true" }),
...(target && { target }), ...(target && { target }),
...(rel && { rel }), ...(rel && { rel }),
tabIndex: disabled ? -1 : 0,
...props,
}; };
if (href && !disabled) { if (href && !disabled) {
@@ -72,7 +76,6 @@ export default function Button({
className={combinedStyles} className={combinedStyles}
onClick={onClick} onClick={onClick}
{...accessibilityProps} {...accessibilityProps}
{...props}
> >
{children} {children}
</a> </a>
@@ -86,7 +89,6 @@ export default function Button({
disabled={disabled} disabled={disabled}
onClick={onClick} onClick={onClick}
{...accessibilityProps} {...accessibilityProps}
{...props}
> >
{children} {children}
</button> </button>
app/components/Header.js
+64 -42
View File
@@ -41,6 +41,7 @@ export default function Header({ onToggle }) {
href={item.href} href={item.href}
size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size} size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
onClick={onToggle} onClick={onToggle}
ariaLabel={`Navigate to ${item.text} page`}
> >
{item.text} {item.text}
</MenuBarItem> </MenuBarItem>
@@ -62,22 +63,20 @@ export default function Header({ onToggle }) {
); );
}; };
const renderLoginButton = (size, marginRight) => { const renderLoginButton = (size) => {
return ( return (
<MenuBarItem href="#" size={size} className={marginRight}> <MenuBarItem href="#" size={size} ariaLabel="Log in to your account">
Log in Log in
</MenuBarItem> </MenuBarItem>
); );
}; };
const renderCreateRuleButton = ( const renderCreateRuleButton = (buttonSize, containerSize, avatarSize) => {
buttonSize,
containerSize,
avatarSize,
marginLeft
) => {
return ( return (
<Button size={buttonSize} className={marginLeft}> <Button
size={buttonSize}
ariaLabel="Create a new rule with avatar decoration"
>
{renderAvatarGroup(containerSize, avatarSize)} {renderAvatarGroup(containerSize, avatarSize)}
<span>Create rule</span> <span>Create rule</span>
</Button> </Button>
@@ -89,9 +88,18 @@ export default function Header({ onToggle }) {
}; };
return ( return (
<header className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]"> <header
<div className="flex items-center justify-between mx-auto max-w-[1920px] h-[40px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]"> className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]"
<div> role="banner"
aria-label="Main navigation header"
>
<nav
className="flex items-center justify-between mx-auto max-w-[1920px] h-[40px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]"
role="navigation"
aria-label="Main navigation"
>
{/* Logo - Consistent left positioning across all breakpoints */}
<div className="flex items-center">
{logoConfig.map((config, index) => ( {logoConfig.map((config, index) => (
<div key={index} className={config.breakpoint}> <div key={index} className={config.breakpoint}>
{renderLogo(config.size, config.showText)} {renderLogo(config.size, config.showText)}
@@ -99,57 +107,71 @@ export default function Header({ onToggle }) {
))} ))}
</div> </div>
{/* Navigation Links - Consistent center positioning */}
<div className="flex items-center"> <div className="flex items-center">
<div className="block sm:hidden"> <div className="block sm:hidden -me-[2px]">
<MenuBar className="gap-[var(--spacing-scale-001)]"> <MenuBar size="default">{renderNavigationItems("xsmall")}</MenuBar>
{renderNavigationItems("xsmall")}
{renderLoginButton("xsmall")}
</MenuBar>
</div> </div>
<div className="hidden sm:block md:hidden absolute left-1/2 transform -translate-x-1/2"> <div className="hidden sm:block md:hidden">
<MenuBar className="gap-[var(--spacing-scale-001)]"> <MenuBar size="default">{renderNavigationItems("xsmall")}</MenuBar>
{renderNavigationItems("xsmall")}
{renderLoginButton("xsmall")}
</MenuBar>
</div> </div>
<div className="hidden md:block lg:hidden absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-024)]"> <div className="hidden md:block lg:hidden">
<MenuBar className="gap-[var(--spacing-scale-001)]"> <MenuBar size="default">{renderNavigationItems("xsmall")}</MenuBar>
{renderNavigationItems("xsmall")}
</MenuBar>
</div> </div>
<div className="hidden lg:block xl:hidden absolute left-1/2 transform -translate-x-1/2 -ml-[var(--spacing-scale-024)]"> <div className="hidden lg:block xl:hidden">
<MenuBar size="large">{renderNavigationItems("large")}</MenuBar> <MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
</div> </div>
<div className="hidden xl:block absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-032)]"> <div className="hidden xl:block">
<MenuBar size="large">{renderNavigationItems("xlarge")}</MenuBar> <MenuBar size="large">{renderNavigationItems("xlarge")}</MenuBar>
</div> </div>
</div>
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]"> {/* Authentication Elements - Consistent right alignment across all breakpoints */}
<div className="flex items-center"> <div className="flex items-center">
{renderLoginButton("xsmall", "mr-[var(--spacing-scale-010)]")} {/* XSmall and Small breakpoints */}
<div className="block sm:hidden">
<div className="flex items-center gap-[var(--spacing-scale-004)]">
{renderLoginButton("xsmall")}
{renderCreateRuleButton("xsmall", "small", "small")}
</div>
</div>
<div className="hidden sm:block md:hidden">
<div className="flex items-center gap-[var(--spacing-scale-004)]">
{renderLoginButton("xsmall")}
{renderCreateRuleButton("xsmall", "small", "small")}
</div>
</div>
{/* Medium breakpoint */}
<div className="hidden md:block lg:hidden">
<div className="flex items-center gap-[var(--spacing-measures-spacing-010)]">
{renderLoginButton("xsmall")}
{renderCreateRuleButton("xsmall", "medium", "medium")} {renderCreateRuleButton("xsmall", "medium", "medium")}
</div> </div>
</div> </div>
<div className="hidden lg:flex xl:hidden items-center"> {/* Large breakpoint */}
{renderLoginButton("large", "mr-[var(--spacing-scale-012)]")} <div className="hidden lg:block xl:hidden">
{renderCreateRuleButton("large", "xlarge", "xlarge")} <div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
{renderLoginButton("large")}
{renderCreateRuleButton("large", "xlarge", "xlarge")}
</div>
</div> </div>
<div className="hidden xl:flex items-center"> {/* XLarge breakpoint */}
{renderLoginButton("xlarge", "mr-[var(--spacing-scale-012)]")} <div className="hidden xl:block">
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")} <div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
</div> {renderLoginButton("xlarge")}
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
<div className="block md:hidden"> </div>
{renderCreateRuleButton("xsmall", "small", "small")}
</div> </div>
</div> </div>
</div> </nav>
</header> </header>
); );
} }
app/components/HeaderTab.js
+1 -1
View File
@@ -1,7 +1,7 @@
export default function HeaderTab({ children, className = "", ...props }) { export default function HeaderTab({ children, className = "", ...props }) {
return ( return (
<div <div
className={`relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${className}`} className={`HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${className}`}
{...props} {...props}
> >
{children} {children}
app/components/HomeHeader.js
+51 -28
View File
@@ -82,6 +82,7 @@ export default function HomeHeader() {
: "default" : "default"
} }
onClick={() => setShowRegularHeader(!showRegularHeader)} onClick={() => setShowRegularHeader(!showRegularHeader)}
ariaLabel={`Navigate to ${item.text} page`}
> >
{item.text} {item.text}
</MenuBarItem> </MenuBarItem>
@@ -103,27 +104,26 @@ export default function HomeHeader() {
); );
}; };
const renderLoginButton = (size, marginRight) => { const renderLoginButton = (size) => {
return ( return (
<MenuBarItem <MenuBarItem
href="#" href="#"
size={size} size={size}
variant={size === "xsmall" || size === "default" ? "home" : "default"} variant={size === "xsmall" || size === "default" ? "home" : "default"}
className={marginRight} ariaLabel="Log in to your account"
> >
Log in Log in
</MenuBarItem> </MenuBarItem>
); );
}; };
const renderCreateRuleButton = ( const renderCreateRuleButton = (buttonSize, containerSize, avatarSize) => {
buttonSize,
containerSize,
avatarSize,
marginLeft
) => {
return ( return (
<Button size={buttonSize} className={marginLeft} variant="secondary"> <Button
size={buttonSize}
variant="secondary"
ariaLabel="Create a new rule with avatar decoration"
>
{renderAvatarGroup(containerSize, avatarSize)} {renderAvatarGroup(containerSize, avatarSize)}
<span>Create rule</span> <span>Create rule</span>
</Button> </Button>
@@ -139,9 +139,18 @@ export default function HomeHeader() {
} }
return ( return (
<header className="w-full bg-transparent overflow-hidden"> <header
<div className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]"> className="w-full bg-transparent overflow-hidden"
role="banner"
aria-label="Home page navigation header"
>
<nav
className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]"
role="navigation"
aria-label="Main navigation"
>
<HeaderTab className="flex items-center justify-between lg:gap-[var(--spacing-scale-120)] self-end"> <HeaderTab className="flex items-center justify-between lg:gap-[var(--spacing-scale-120)] self-end">
{/* Logo - Consistent left positioning within HeaderTab */}
<div> <div>
{logoConfig.map((config, index) => ( {logoConfig.map((config, index) => (
<div key={index} className={config.breakpoint}> <div key={index} className={config.breakpoint}>
@@ -150,6 +159,7 @@ export default function HomeHeader() {
))} ))}
</div> </div>
{/* Navigation Links - Consistent center positioning within HeaderTab */}
<div className="flex items-center"> <div className="flex items-center">
<div className="block sm:hidden -me-[2px]"> <div className="block sm:hidden -me-[2px]">
<MenuBar size="default"> <MenuBar size="default">
@@ -181,25 +191,38 @@ export default function HomeHeader() {
</div> </div>
</HeaderTab> </HeaderTab>
{/* Create rule button positioned outside HeaderTab */} {/* Authentication Elements - Consistent right alignment outside HeaderTab */}
<div className="block md:hidden"> <div className="flex items-center">
{renderCreateRuleButton("xsmall", "small", "small")} {/* XSmall and Small breakpoints - create rule button outside HeaderTab */}
</div> <div className="block md:hidden">
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]"> {renderCreateRuleButton("xsmall", "small", "small")}
<div className="flex items-center"> </div>
{renderLoginButton("homeMd", "mr-[var(--spacing-scale-010)]")}
{renderCreateRuleButton("small", "medium", "medium")} {/* Medium breakpoint - login outside HeaderTab, create rule outside */}
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
<div className="flex items-center gap-[var(--spacing-scale-010)]">
{renderLoginButton("homeMd")}
{renderCreateRuleButton("small", "medium", "medium")}
</div>
</div>
{/* Large breakpoint */}
<div className="hidden lg:flex xl:hidden items-center">
<div className="flex items-center gap-[var(--spacing-scale-004)]">
{renderLoginButton("large")}
{renderCreateRuleButton("large", "large", "large")}
</div>
</div>
{/* XLarge breakpoint */}
<div className="hidden xl:flex items-center">
<div className="flex items-center gap-[var(--spacing-scale-004)]">
{renderLoginButton("homeXlarge")}
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
</div>
</div> </div>
</div> </div>
<div className="hidden lg:flex xl:hidden items-center"> </nav>
{renderLoginButton("large", "mr-[var(--spacing-scale-004)]")}
{renderCreateRuleButton("large", "large", "large")}
</div>
<div className="hidden xl:flex items-center">
{renderLoginButton("homeXlarge", "mr-[var(--spacing-scale-004)]")}
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
</div>
</div>
</header> </header>
); );
} }
app/components/Logo.js
+11 -3
View File
@@ -116,7 +116,9 @@ export default function Logo({ size = "default", showText = true }) {
<div <div
className={`flex items-center ${config.containerHeight} ${ className={`flex items-center ${config.containerHeight} ${
showText ? config.gap : "" showText ? config.gap : ""
}`} } transition-all duration-200 ease-in-out hover:scale-[1.02] cursor-pointer`}
role="banner"
aria-label="CommunityRule Logo"
> >
{/* Logo Text - only show if showText is true */} {/* Logo Text - only show if showText is true */}
{showText && ( {showText && (
@@ -129,7 +131,10 @@ export default function Logo({ size = "default", showText = true }) {
size === "homeHeaderXl" size === "homeHeaderXl"
? "text-[var(--color-content-inverse-primary)]" ? "text-[var(--color-content-inverse-primary)]"
: "text-[var(--color-content-default-primary)]" : "text-[var(--color-content-default-primary)]"
} ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`} } ${config.textSize} ${
config.lineHeight
} font-normal tracking-[0px] transition-colors duration-200`}
aria-label="CommunityRule"
> >
CommunityRule CommunityRule
</div> </div>
@@ -141,7 +146,9 @@ export default function Logo({ size = "default", showText = true }) {
alt="CommunityRule Logo Icon" alt="CommunityRule Logo Icon"
width={27.05} width={27.05}
height={27.05} height={27.05}
className={`flex-shrink-0 ${config.iconSize} ${ className={`flex-shrink-0 ${
config.iconSize
} transition-all duration-200 ${
size === "homeHeaderXsmall" || size === "homeHeaderXsmall" ||
size === "homeHeaderSm" || size === "homeHeaderSm" ||
size === "homeHeaderMd" || size === "homeHeaderMd" ||
@@ -150,6 +157,7 @@ export default function Logo({ size = "default", showText = true }) {
? "filter brightness-0" ? "filter brightness-0"
: "" : ""
}`} }`}
aria-hidden="true"
/> />
</div> </div>
); );
app/components/MenuBar.js
+6 -1
View File
@@ -18,7 +18,12 @@ export default function MenuBar({
const baseStyles = `flex items-center ${sizeStyles[size]} ${className}`; const baseStyles = `flex items-center ${sizeStyles[size]} ${className}`;
return ( return (
<nav className={baseStyles} {...props}> <nav
className={baseStyles}
role="menubar"
aria-label="Main navigation menu"
{...props}
>
{children} {children}
</nav> </nav>
); );
app/components/MenuBarItem.js
+38 -20
View File
@@ -5,48 +5,55 @@ export default function MenuBarItem({
size = "default", size = "default",
className = "", className = "",
disabled = false, disabled = false,
ariaLabel,
...props ...props
}) { }) {
const variantStyles = { const variantStyles = {
default: default:
"bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-brand-primary)] active:bg-transparent active:text-[var(--color-content-default-brand-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed", "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-brand-primary)] active:scale-[0.98] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100",
home: "bg-transparent text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-content-default-brand-accent)] hover:text-[var(--color-content-inverse-primary)] active:bg-transparent active:text-[var(--color-content-inverse-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed", home: "bg-transparent text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-content-default-brand-accent)] hover:text-[var(--color-content-inverse-primary)] hover:scale-[1.02] active:bg-transparent active:text-[var(--color-content-inverse-primary)] active:scale-[0.98] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100",
}; };
const activeOutlineStyles = { const activeOutlineStyles = {
xsmall: xsmall:
"active:outline-1 active:outline-[var(--color-content-default-primary)]", "active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",
xsmallUseCases:
"active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",
default: default:
"active:outline-1 active:outline-[var(--color-content-default-brand-primary)]", "active:outline-1 active:outline-[var(--color-content-default-brand-primary)] focus:outline-1 focus:outline-[var(--color-content-default-brand-primary)]",
homeMd: homeMd:
"active:outline-[1.5px] active:outline-[var(--color-content-default-brand-primary)]", "active:outline-[1.5px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-brand-primary)]",
homeUseCases:
"active:outline-[1.5px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-brand-primary)]",
large: large:
"active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)]", "active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-brand-primary)]",
largeUseCases:
"active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-brand-primary)]",
homeXlarge: homeXlarge:
"active:outline-[2px] active:outline-[var(--color-content-default-brand-primary)]", "active:outline-[2px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[2px] focus:outline-[var(--color-content-default-brand-primary)]",
xlarge: xlarge:
"active:outline-2 active:outline-[var(--color-content-default-brand-primary)]", "active:outline-2 active:outline-[var(--color-content-default-brand-primary)] focus:outline-2 focus:outline-[var(--color-content-default-brand-primary)]",
}; };
const homeOutlineStyles = { const homeOutlineStyles = {
xsmall: xsmall:
"active:outline-1 active:outline-[var(--color-content-default-primary)]", "active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",
xsmallUseCases: xsmallUseCases:
"active:outline-1 active:outline-[var(--color-content-default-primary)]", "active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",
default: default:
"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]", "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]",
homeMd: homeMd:
"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]", "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]",
homeUseCases: homeUseCases:
"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]", "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]",
largeUseCases: largeUseCases:
"active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]", "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-primary)]",
large: large:
"active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]", "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-primary)]",
homeXlarge: homeXlarge:
"active:outline-[2px] active:outline-[var(--color-content-default-primary)]", "active:outline-[2px] active:outline-[var(--color-content-default-primary)] focus:outline-[2px] focus:outline-[var(--color-content-default-primary)]",
xlarge: xlarge:
"active:outline-2 active:outline-[var(--color-content-default-primary)]", "active:outline-2 active:outline-[var(--color-content-default-primary)] focus:outline-2 focus:outline-[var(--color-content-default-primary)]",
}; };
const sizeStyles = { const sizeStyles = {
@@ -62,6 +69,8 @@ export default function MenuBarItem({
"px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]", "px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",
large: large:
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)] h-[44px]", "px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)] h-[44px]",
largeUseCases:
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)] h-[44px]",
homeXlarge: homeXlarge:
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)] h-[44px]", "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)] h-[44px]",
xlarge: xlarge:
@@ -85,11 +94,12 @@ export default function MenuBarItem({
homeMd: mediumTextStyle, homeMd: mediumTextStyle,
homeUseCases: mediumTextStyle, homeUseCases: mediumTextStyle,
large: largeTextStyle, large: largeTextStyle,
largeUseCases: largeTextStyle,
homeXlarge: xlargeTextStyle, homeXlarge: xlargeTextStyle,
xlarge: xlargeTextStyle, xlarge: xlargeTextStyle,
}; };
const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`; const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 ease-in-out cursor-pointer focus:scale-[1.02]`;
let finalVariant = variant; let finalVariant = variant;
if (disabled) { if (disabled) {
@@ -102,16 +112,24 @@ export default function MenuBarItem({
: activeOutlineStyles[size] : activeOutlineStyles[size]
} ${className}`; } ${className}`;
const accessibilityProps = {
...(ariaLabel && { "aria-label": ariaLabel }),
...(disabled && { "aria-disabled": "true" }),
role: "menuitem",
tabIndex: disabled ? -1 : 0,
...props,
};
if (disabled) { if (disabled) {
return ( return (
<span className={combinedStyles} {...props}> <span className={combinedStyles} {...accessibilityProps}>
{children} {children}
</span> </span>
); );
} }
return ( return (
<a href={href} className={combinedStyles} {...props}> <a href={href} className={combinedStyles} {...accessibilityProps}>
{children} {children}
</a> </a>
); );