CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 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 = {
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:
"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 = {
@@ -48,9 +48,10 @@ export default function Button({
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;
if (disabled) {
@@ -61,8 +62,11 @@ export default function Button({
const accessibilityProps = {
...(ariaLabel && { "aria-label": ariaLabel }),
...(disabled && { "aria-disabled": "true" }),
...(target && { target }),
...(rel && { rel }),
tabIndex: disabled ? -1 : 0,
...props,
};
if (href && !disabled) {
@@ -72,7 +76,6 @@ export default function Button({
className={combinedStyles}
onClick={onClick}
{...accessibilityProps}
{...props}
>
{children}
</a>
@@ -86,7 +89,6 @@ export default function Button({
disabled={disabled}
onClick={onClick}
{...accessibilityProps}
{...props}
>
{children}
</button>
app/components/Header.js
+64 -42
View File
@@ -41,6 +41,7 @@ export default function Header({ onToggle }) {
href={item.href}
size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
onClick={onToggle}
ariaLabel={`Navigate to ${item.text} page`}
>
{item.text}
</MenuBarItem>
@@ -62,22 +63,20 @@ export default function Header({ onToggle }) {
);
};
const renderLoginButton = (size, marginRight) => {
const renderLoginButton = (size) => {
return (
<MenuBarItem href="#" size={size} className={marginRight}>
<MenuBarItem href="#" size={size} ariaLabel="Log in to your account">
Log in
</MenuBarItem>
);
};
const renderCreateRuleButton = (
buttonSize,
containerSize,
avatarSize,
marginLeft
) => {
const renderCreateRuleButton = (buttonSize, containerSize, avatarSize) => {
return (
<Button size={buttonSize} className={marginLeft}>
<Button
size={buttonSize}
ariaLabel="Create a new rule with avatar decoration"
>
{renderAvatarGroup(containerSize, avatarSize)}
<span>Create rule</span>
</Button>
@@ -89,9 +88,18 @@ export default function Header({ onToggle }) {
};
return (
<header className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]">
<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)]">
<div>
<header
className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]"
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) => (
<div key={index} className={config.breakpoint}>
{renderLogo(config.size, config.showText)}
@@ -99,57 +107,71 @@ export default function Header({ onToggle }) {
))}
</div>
{/* Navigation Links - Consistent center positioning */}
<div className="flex items-center">
<div className="block sm:hidden">
<MenuBar className="gap-[var(--spacing-scale-001)]">
{renderNavigationItems("xsmall")}
{renderLoginButton("xsmall")}
</MenuBar>
<div className="block sm:hidden -me-[2px]">
<MenuBar size="default">{renderNavigationItems("xsmall")}</MenuBar>
</div>
<div className="hidden sm:block md:hidden absolute left-1/2 transform -translate-x-1/2">
<MenuBar className="gap-[var(--spacing-scale-001)]">
{renderNavigationItems("xsmall")}
{renderLoginButton("xsmall")}
</MenuBar>
<div className="hidden sm:block md:hidden">
<MenuBar size="default">{renderNavigationItems("xsmall")}</MenuBar>
</div>
<div className="hidden md:block lg:hidden absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-024)]">
<MenuBar className="gap-[var(--spacing-scale-001)]">
{renderNavigationItems("xsmall")}
</MenuBar>
<div className="hidden md:block lg:hidden">
<MenuBar size="default">{renderNavigationItems("xsmall")}</MenuBar>
</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>
</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>
</div>
</div>
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
<div className="flex items-center">
{renderLoginButton("xsmall", "mr-[var(--spacing-scale-010)]")}
{/* Authentication Elements - Consistent right alignment across all breakpoints */}
<div className="flex items-center">
{/* 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")}
</div>
</div>
<div className="hidden lg:flex xl:hidden items-center">
{renderLoginButton("large", "mr-[var(--spacing-scale-012)]")}
{renderCreateRuleButton("large", "xlarge", "xlarge")}
{/* Large breakpoint */}
<div className="hidden lg:block xl:hidden">
<div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
{renderLoginButton("large")}
{renderCreateRuleButton("large", "xlarge", "xlarge")}
</div>
</div>
<div className="hidden xl:flex items-center">
{renderLoginButton("xlarge", "mr-[var(--spacing-scale-012)]")}
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
</div>
<div className="block md:hidden">
{renderCreateRuleButton("xsmall", "small", "small")}
{/* XLarge breakpoint */}
<div className="hidden xl:block">
<div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
{renderLoginButton("xlarge")}
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
</div>
</div>
</div>
</div>
</nav>
</header>
);
}
app/components/HeaderTab.js
+1 -1
View File
@@ -1,7 +1,7 @@
export default function HeaderTab({ children, className = "", ...props }) {
return (
<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}
>
{children}
app/components/HomeHeader.js
+51 -28
View File
@@ -82,6 +82,7 @@ export default function HomeHeader() {
: "default"
}
onClick={() => setShowRegularHeader(!showRegularHeader)}
ariaLabel={`Navigate to ${item.text} page`}
>
{item.text}
</MenuBarItem>
@@ -103,27 +104,26 @@ export default function HomeHeader() {
);
};
const renderLoginButton = (size, marginRight) => {
const renderLoginButton = (size) => {
return (
<MenuBarItem
href="#"
size={size}
variant={size === "xsmall" || size === "default" ? "home" : "default"}
className={marginRight}
ariaLabel="Log in to your account"
>
Log in
</MenuBarItem>
);
};
const renderCreateRuleButton = (
buttonSize,
containerSize,
avatarSize,
marginLeft
) => {
const renderCreateRuleButton = (buttonSize, containerSize, avatarSize) => {
return (
<Button size={buttonSize} className={marginLeft} variant="secondary">
<Button
size={buttonSize}
variant="secondary"
ariaLabel="Create a new rule with avatar decoration"
>
{renderAvatarGroup(containerSize, avatarSize)}
<span>Create rule</span>
</Button>
@@ -139,9 +139,18 @@ export default function HomeHeader() {
}
return (
<header className="w-full bg-transparent overflow-hidden">
<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)]">
<header
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">
{/* Logo - Consistent left positioning within HeaderTab */}
<div>
{logoConfig.map((config, index) => (
<div key={index} className={config.breakpoint}>
@@ -150,6 +159,7 @@ export default function HomeHeader() {
))}
</div>
{/* Navigation Links - Consistent center positioning within HeaderTab */}
<div className="flex items-center">
<div className="block sm:hidden -me-[2px]">
<MenuBar size="default">
@@ -181,25 +191,38 @@ export default function HomeHeader() {
</div>
</HeaderTab>
{/* Create rule button positioned outside HeaderTab */}
<div className="block md:hidden">
{renderCreateRuleButton("xsmall", "small", "small")}
</div>
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
<div className="flex items-center">
{renderLoginButton("homeMd", "mr-[var(--spacing-scale-010)]")}
{renderCreateRuleButton("small", "medium", "medium")}
{/* Authentication Elements - Consistent right alignment outside HeaderTab */}
<div className="flex items-center">
{/* XSmall and Small breakpoints - create rule button outside HeaderTab */}
<div className="block md:hidden">
{renderCreateRuleButton("xsmall", "small", "small")}
</div>
{/* 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 className="hidden lg:flex xl:hidden items-center">
{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>
</nav>
</header>
);
}
app/components/Logo.js
+11 -3
View File
@@ -116,7 +116,9 @@ export default function Logo({ size = "default", showText = true }) {
<div
className={`flex items-center ${config.containerHeight} ${
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 */}
{showText && (
@@ -129,7 +131,10 @@ export default function Logo({ size = "default", showText = true }) {
size === "homeHeaderXl"
? "text-[var(--color-content-inverse-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
</div>
@@ -141,7 +146,9 @@ export default function Logo({ size = "default", showText = true }) {
alt="CommunityRule Logo Icon"
width={27.05}
height={27.05}
className={`flex-shrink-0 ${config.iconSize} ${
className={`flex-shrink-0 ${
config.iconSize
} transition-all duration-200 ${
size === "homeHeaderXsmall" ||
size === "homeHeaderSm" ||
size === "homeHeaderMd" ||
@@ -150,6 +157,7 @@ export default function Logo({ size = "default", showText = true }) {
? "filter brightness-0"
: ""
}`}
aria-hidden="true"
/>
</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}`;
return (
<nav className={baseStyles} {...props}>
<nav
className={baseStyles}
role="menubar"
aria-label="Main navigation menu"
{...props}
>
{children}
</nav>
);
app/components/MenuBarItem.js
+38 -20
View File
@@ -5,48 +5,55 @@ export default function MenuBarItem({
size = "default",
className = "",
disabled = false,
ariaLabel,
...props
}) {
const variantStyles = {
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",
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",
"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)] 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 = {
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:
"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:
"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:
"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:
"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:
"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 = {
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)]",
"active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",
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:
"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:
"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:
"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:
"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:
"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:
"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 = {
@@ -62,6 +69,8 @@ export default function MenuBarItem({
"px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",
large:
"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:
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)] h-[44px]",
xlarge:
@@ -85,11 +94,12 @@ export default function MenuBarItem({
homeMd: mediumTextStyle,
homeUseCases: mediumTextStyle,
large: largeTextStyle,
largeUseCases: largeTextStyle,
homeXlarge: 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;
if (disabled) {
@@ -102,16 +112,24 @@ export default function MenuBarItem({
: activeOutlineStyles[size]
} ${className}`;
const accessibilityProps = {
...(ariaLabel && { "aria-label": ariaLabel }),
...(disabled && { "aria-disabled": "true" }),
role: "menuitem",
tabIndex: disabled ? -1 : 0,
...props,
};
if (disabled) {
return (
<span className={combinedStyles} {...props}>
<span className={combinedStyles} {...accessibilityProps}>
{children}
</span>
);
}
return (
<a href={href} className={combinedStyles} {...props}>
<a href={href} className={combinedStyles} {...accessibilityProps}>
{children}
</a>
);