Improve styles

Author: hasparus

src/app/conf/2025/components/call-for-proposals.tsx

@@ -70,7 +70,7 @@ function DefinitionListItem({
 }
 function TopicsTab() {
   return (
-    <>
+    <div>
       <TabHeading className="mt-6">Suggested Topics</TabHeading>
       <ul className="list-disc space-y-2 pl-6">
         <li>GraphQL Working Group</li>
@@ -104,13 +104,13 @@ function TopicsTab() {
           <li>Documentation</li>
         </ul>
       </ul>
-    </>
+    </div>
   )
 }
 
 function NotesTab() {
   return (
-    <>
+    <div>
       <TabHeading className="mt-6">Important Notes</TabHeading>
       <ul className="list-disc space-y-2 pl-6">
         <li>
@@ -199,13 +199,13 @@ function NotesTab() {
         <a href="mailto:[email protected]">reach out to us</a> and we will
         be more than happy to work with you on your proposal.
       </p>
-    </>
+    </div>
   )
 }
 
 function TypesTab() {
   return (
-    <>
+    <div>
       <TabHeading className="mt-6">Submission Types</TabHeading>
       <ul className="list-disc space-y-2 pl-6">
         <li>
@@ -220,13 +220,13 @@ function TypesTab() {
         <li>Lightning Talk: Typically 5-10 minutes in length</li>
         <li>Workshop: Typically 1-2 hours in length</li>
       </ul>
-    </>
+    </div>
   )
 }
 
 function ProcessTab() {
   return (
-    <>
+    <div>
       <TabHeading className="mt-6">The Talk Selection Process</TabHeading>
       <p className="mb-4">
         The GraphQL Foundation strives to select conference talks based on fair
@@ -287,7 +287,7 @@ function ProcessTab() {
         In the instance that you aren't sure about your abstract, reach out to
         us and we will be more than happy to work with you on your proposal.
       </p>
-    </>
+    </div>
   )
 }
 
@@ -386,20 +386,7 @@ export function CallForProposals() {
                 aria-selected={activeTab === tab}
                 className="gql-focus-visible flex items-center justify-between px-3 py-4 typography-body-lg hover:bg-sec-light focus:outline-none aria-selected:bg-sec-light"
                 onFocus={() => setActiveTab(tab)}
-                onKeyDown={event => {
-                  if (event.key === "ArrowLeft") {
-                    const previousElement =
-                      event.currentTarget.previousElementSibling
-                    if (previousElement) {
-                      ;(previousElement as HTMLElement).focus()
-                    }
-                  } else if (event.key === "ArrowRight") {
-                    const nextElement = event.currentTarget.nextElementSibling
-                    if (nextElement) {
-                      ;(nextElement as HTMLElement).focus()
-                    }
-                  }
-                }}
+                onKeyDown={arrowsMoveSideways}
               >
                 {tab.charAt(0).toUpperCase() + tab.slice(1)}
                 <ArrowDownIcon className="ml-2 size-6 text-sec-darker opacity-0 [[aria-selected=true]>&]:opacity-100" />
@@ -414,3 +401,17 @@ export function CallForProposals() {
     </section>
   )
 }
+
+function arrowsMoveSideways(event: React.KeyboardEvent<HTMLButtonElement>) {
+  if (event.key === "ArrowLeft") {
+    const previousElement = event.currentTarget.previousElementSibling
+    if (previousElement) {
+      ;(previousElement as HTMLElement).focus()
+    }
+  } else if (event.key === "ArrowRight") {
+    const nextElement = event.currentTarget.nextElementSibling
+    if (nextElement) {
+      ;(nextElement as HTMLElement).focus()
+    }
+  }
+}

src/app/conf/2025/components/register-section/index.tsx

@@ -36,7 +36,7 @@ export function RegisterSection({ className, ...props }: RegisterSectionProps) {
             email. If you did not, please contact us for more details:{" "}
             <a
               href="mailto:[email protected]"
-              className="text-neu-800 underline hover:no-underline"
+              className="gql-focus-visible text-neu-800 underline hover:no-underline"
             >
               [email protected]
             </a>
@@ -57,7 +57,7 @@ export function RegisterSection({ className, ...props }: RegisterSectionProps) {
             register as a Sponsor. For further questions, please email us:{" "}
             <a
               href="mailto:[email protected]"
-              className="text-neu-800 underline hover:no-underline"
+              className="gql-focus-visible text-neu-800 underline hover:no-underline"
             >
               [email protected]
             </a>

src/app/conf/2025/page.tsx

@@ -20,7 +20,7 @@ export const metadata: Metadata = {
 
 export default function Page() {
   return (
-    <main className="antialiased">
+    <main className="gql-all-anchors-focusable antialiased">
       <Hero />
       <div className="gql-conf-container text-neu-900">
         <RegisterToday className="md:mb-8 md:mt-24" />

src/app/conf/_design-system/button.tsx

@@ -57,7 +57,7 @@ export type ButtonProps =
 
 export function Button(props: ButtonProps) {
   const className = clsx(
-    "relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 data-[variant=secondary]:text-neu-900 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 gql-focus-visible [aria-disabled]:bg-neu-800",
+    "relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 data-[variant=secondary]:text-neu-900 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 gql-focus-visible [aria-disabled]:bg-neu-800 aria-disabled:pointer-events-none",
     props.className,
   )
 
@@ -66,6 +66,8 @@ export function Button(props: ButtonProps) {
   if ("href" in props && typeof props.href === "string") {
     const { className: _1, size: _2, disabled, children, ...rest } = props
 
+    if (disabled) (rest as { href?: string }).href = undefined
+
     return (
       <Anchor
         className={className}

src/globals.css

@@ -504,7 +504,8 @@ div[id^="headlessui-menu-items"] {
   @apply dark:border-neutral-700/80;
 }
 
-.gql-focus-visible {
+.gql-focus-visible,
+.gql-all-anchors-focusable a {
   @apply focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-[5px] focus-visible:outline-neu-900;
 }