From 4feda4cf0ea6b3fa800f442aa7ff8f838450a424 Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Wed, 18 Dec 2024 12:02:01 +0300 Subject: [PATCH 01/15] Remove minimize button, open link in new tab --- .../src/ui/components/KeylessPrompt/index.tsx | 98 ++++++------------- 1 file changed, 31 insertions(+), 67 deletions(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index 5d3bef3aef..55aee8e1d3 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -1,10 +1,9 @@ -import { useClerk } from '@clerk/shared/react'; // eslint-disable-next-line no-restricted-imports import { css } from '@emotion/react'; import { useState } from 'react'; import { useEnvironment } from '../../contexts'; -import { descriptors, Flex, Link, Spinner } from '../../customizables'; +import { descriptors, Flex, Link } from '../../customizables'; import { Portal } from '../../elements/Portal'; import { InternalThemeProvider } from '../../styledSystem'; import { ClerkLogoIcon } from './ClerkLogoIcon'; @@ -17,23 +16,36 @@ type KeylessPromptProps = { const _KeylessPrompt = (_props: KeylessPromptProps) => { const [isExpanded, setIsExpanded] = useState(true); - const [isLoading, setIsLoading] = useState(false); - const handleFocus = () => setIsExpanded(true); + + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault(); + setIsExpanded(prev => !prev); + } + if (event.key === 'Escape' && isExpanded) { + setIsExpanded(false); + } + }; const claimed = Boolean(useEnvironment().authConfig.claimedAt); - const clerk = useClerk(); + // const clerk = useClerk(); return ( setIsExpanded(true)} data-expanded={isExpanded} + aria-expanded={isExpanded} + onMouseEnter={() => setIsExpanded(true)} + onMouseLeave={() => setIsExpanded(false)} + elementDescriptor={descriptors.impersonationFab} + onKeyDown={handleKeyDown} + tabIndex={0} + aria-label={claimed ? 'Missing environment keys' : 'Clerk keyless mode controls'} sx={t => ({ position: 'fixed', - bottom: '3.125rem', - right: '3.125rem', + bottom: '1.25rem', + right: '1.25rem', zIndex: t.zIndices.$fab, height: `${t.sizes.$10}`, minWidth: '18.5625rem', @@ -45,7 +57,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { boxShadow: '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)', - transition: 'all 200ms cubic-bezier(0.3, 0.5, 0.1, 1)', + transition: 'all 310ms cubic-bezier(0.2, 0.95, 0.1, 1)', '&[data-expanded="true"]': { flexDirection: 'column', @@ -251,52 +263,6 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { {claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'}

- - {isExpanded && !claimed && ( - - )} {isExpanded && ( @@ -349,14 +315,11 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {

)} - + {claimed ? 'Get API keys' : 'Claim keys'} + (opens in a new tab) + ); From a32a33de2b4d51541a407368a513c54ba34cb74a Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Wed, 18 Dec 2024 13:23:52 +0300 Subject: [PATCH 02/15] Handle keyboard expansion --- .../src/ui/components/KeylessPrompt/index.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index 55aee8e1d3..d760e21ecc 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -17,12 +17,12 @@ type KeylessPromptProps = { const _KeylessPrompt = (_props: KeylessPromptProps) => { const [isExpanded, setIsExpanded] = useState(true); - const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Enter' || event.key === ' ') { - event.preventDefault(); + const handleKeyDown = (e: React.KeyboardEvent) => { + if ((e.key === 'Enter' || e.key === ' ') && e.target === e.currentTarget) { + e.preventDefault(); setIsExpanded(prev => !prev); } - if (event.key === 'Escape' && isExpanded) { + if (e.key === 'Escape' && isExpanded) { setIsExpanded(false); } }; @@ -43,6 +43,8 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { tabIndex={0} aria-label={claimed ? 'Missing environment keys' : 'Clerk keyless mode controls'} sx={t => ({ + role: 'region', + ariaLabel: 'Testing', position: 'fixed', bottom: '1.25rem', right: '1.25rem', @@ -269,7 +271,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {

{ })} > Learn more + about keyless mode in Clerk )} @@ -332,7 +335,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { max-width: 14.625rem; padding: 0.25rem 0.625rem; border-radius: 1rem; - font-size: 0.75rem; + font-size: 0.875rem; font-weight: 500; letter-spacing: 0.12px; color: white; From a5c87f880f4f8a4cc077660efc592fec4b245c10 Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Wed, 18 Dec 2024 15:18:23 +0300 Subject: [PATCH 03/15] Checkpoint --- .../src/ui/components/KeylessPrompt/index.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index d760e21ecc..c5b457e1d0 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -33,18 +33,18 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { return ( setIsExpanded(true)} onMouseLeave={() => setIsExpanded(false)} elementDescriptor={descriptors.impersonationFab} - onKeyDown={handleKeyDown} - tabIndex={0} + aria-controls='keyless-content' aria-label={claimed ? 'Missing environment keys' : 'Clerk keyless mode controls'} + align='center' sx={t => ({ - role: 'region', - ariaLabel: 'Testing', position: 'fixed', bottom: '1.25rem', right: '1.25rem', @@ -63,6 +63,8 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { '&[data-expanded="true"]': { flexDirection: 'column', + + ariaLabel: 'I am expanded', alignItems: 'flex-start', justifyContent: 'flex-start', height: 'fit-content', @@ -335,7 +337,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { max-width: 14.625rem; padding: 0.25rem 0.625rem; border-radius: 1rem; - font-size: 0.875rem; + font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12px; color: white; From b6e48b3f4ee8d628443089e067451cff73179495 Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Wed, 18 Dec 2024 15:21:08 +0300 Subject: [PATCH 04/15] Changeset --- .changeset/short-news-enjoy.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/short-news-enjoy.md diff --git a/.changeset/short-news-enjoy.md b/.changeset/short-news-enjoy.md new file mode 100644 index 0000000000..eca6a0aef3 --- /dev/null +++ b/.changeset/short-news-enjoy.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Improve keyless prompt accessibility based on feedback From 94da83bf4aeb34e1a266e81ec8c6d86e450b1fbc Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Wed, 18 Dec 2024 16:07:07 +0300 Subject: [PATCH 05/15] WIP --- .../src/ui/components/KeylessPrompt/index.tsx | 125 ++++++++++-------- 1 file changed, 68 insertions(+), 57 deletions(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index c5b457e1d0..5d54a0c85d 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import { useState } from 'react'; -import { useEnvironment } from '../../contexts'; +// import { useEnvironment } from '../../contexts'; import { descriptors, Flex, Link } from '../../customizables'; import { Portal } from '../../elements/Portal'; import { InternalThemeProvider } from '../../styledSystem'; @@ -20,30 +20,35 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { const handleKeyDown = (e: React.KeyboardEvent) => { if ((e.key === 'Enter' || e.key === ' ') && e.target === e.currentTarget) { e.preventDefault(); - setIsExpanded(prev => !prev); + if (!claimed) { + setIsExpanded(prev => !prev); + } } - if (e.key === 'Escape' && isExpanded) { + if (e.key === 'Escape' && isExpanded && !claimed) { setIsExpanded(false); } }; - const claimed = Boolean(useEnvironment().authConfig.claimedAt); + // const claimed = Boolean(useEnvironment().authConfig.claimedAt); + const claimed = false; // const clerk = useClerk(); return ( setIsExpanded(true)} - onMouseLeave={() => setIsExpanded(false)} + onMouseLeave={() => (claimed ? null : setIsExpanded(false))} + tabIndex={0} + onKeyDown={handleKeyDown} elementDescriptor={descriptors.impersonationFab} - aria-controls='keyless-content' - aria-label={claimed ? 'Missing environment keys' : 'Clerk keyless mode controls'} align='center' + role='button' + aria-expanded={isExpanded} + aria-controls='keyless-content' + aria-disabled={claimed && isExpanded} + id='keyless-prompt' + aria-label={claimed ? 'Missing environment keys' : 'Clerk keyless mode overlay'} sx={t => ({ position: 'fixed', bottom: '1.25rem', @@ -270,54 +275,60 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { {isExpanded && ( -

+

- {claimed ? ( - <> - You claimed this application, but haven't set keys in your environment. Get your keys from the - Clerk Dashboard. - - ) : ( - <> - API keys were missing so we generated them for you. Link this instance to your Clerk account to make - configuration changes.{' '} - ({ - color: t.colors.$whiteAlpha600, - textDecoration: 'underline solid', - transition: `${t.transitionTiming.$common} ${t.transitionDuration.$fast}`, - ':hover': { - color: t.colors.$whiteAlpha800, - }, - })} - > - Learn more - about keyless mode in Clerk - - - )} -

+ `} + > + {claimed ? ( + <> + You claimed this application, but haven't set keys in your environment. Get your keys from the + Clerk Dashboard. + + ) : ( + <> + API keys were missing so we generated them for you. Link this instance to your Clerk account to make + configuration changes.{' '} + ({ + color: t.colors.$whiteAlpha600, + textDecoration: 'underline solid', + transition: `${t.transitionTiming.$common} ${t.transitionDuration.$fast}`, + ':hover': { + color: t.colors.$whiteAlpha800, + }, + })} + > + Learn more + + + )} +

+ )} Date: Thu, 19 Dec 2024 13:53:10 +0300 Subject: [PATCH 06/15] Add skip link, reduce motion --- .../src/ui/components/KeylessPrompt/index.tsx | 599 +++++++++--------- 1 file changed, 317 insertions(+), 282 deletions(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index 5d54a0c85d..8313b72391 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import { useState } from 'react'; -// import { useEnvironment } from '../../contexts'; +import { useEnvironment } from '../../contexts'; import { descriptors, Flex, Link } from '../../customizables'; import { Portal } from '../../elements/Portal'; import { InternalThemeProvider } from '../../styledSystem'; @@ -29,162 +29,189 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { } }; - // const claimed = Boolean(useEnvironment().authConfig.claimedAt); - const claimed = false; - // const clerk = useClerk(); + const claimed = Boolean(useEnvironment().authConfig.claimedAt); return ( - setIsExpanded(true)} - onMouseLeave={() => (claimed ? null : setIsExpanded(false))} - tabIndex={0} - onKeyDown={handleKeyDown} - elementDescriptor={descriptors.impersonationFab} - align='center' - role='button' - aria-expanded={isExpanded} - aria-controls='keyless-content' - aria-disabled={claimed && isExpanded} - id='keyless-prompt' - aria-label={claimed ? 'Missing environment keys' : 'Clerk keyless mode overlay'} - sx={t => ({ - position: 'fixed', - bottom: '1.25rem', - right: '1.25rem', - zIndex: t.zIndices.$fab, - height: `${t.sizes.$10}`, - minWidth: '18.5625rem', - maxWidth: 'fit-content', - padding: `${t.space.$1x5} ${t.space.$1x5} ${t.space.$1x5} ${t.space.$3}`, - borderRadius: '1.25rem', - fontFamily: t.fonts.$main, - background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', - boxShadow: - '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)', - - transition: 'all 310ms cubic-bezier(0.2, 0.95, 0.1, 1)', + <> + + Skip to keyless mode content + - ariaLabel: 'I am expanded', - alignItems: 'flex-start', - justifyContent: 'flex-start', - height: 'fit-content', - width: 'fit-content', - minWidth: '16.125rem', - gap: `${t.space.$1x5}`, - padding: `${t.space.$2x5} ${t.space.$3} 3.25rem ${t.space.$3}`, - borderRadius: `${t.radii.$xl}`, - transition: 'all 210ms cubic-bezier(0.4, 1, 0.20, 0.9)', - }, - })} - > setIsExpanded(true)} + onMouseLeave={() => (claimed ? null : setIsExpanded(false))} + onKeyDown={handleKeyDown} + tabIndex={0} + align='center' + role='button' + aria-expanded={isExpanded} + aria-controls='keyless-content' + aria-disabled={claimed && isExpanded} + id='keyless-prompt' + aria-label={claimed ? 'Missing environment keys' : 'Clerk keyless mode overlay'} + elementDescriptor={descriptors.impersonationFab} + sx={t => ({ + position: 'fixed', + bottom: '1.25rem', + right: '1.25rem', + zIndex: t.zIndices.$fab, + height: `${t.sizes.$10}`, + minWidth: '18.5625rem', + maxWidth: 'fit-content', + padding: `${t.space.$1x5} ${t.space.$1x5} ${t.space.$1x5} ${t.space.$3}`, + borderRadius: '1.25rem', + fontFamily: t.fonts.$main, + background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', + boxShadow: + '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)', + + transition: 'all 310ms cubic-bezier(0.2, 0.95, 0.1, 1)', + + '&[data-expanded="true"]': { + flexDirection: 'column', + ariaLabel: 'I am expanded', + alignItems: 'flex-start', + justifyContent: 'flex-start', + height: 'fit-content', + width: 'fit-content', + minWidth: '16.125rem', + gap: `${t.space.$1x5}`, + padding: `${t.space.$2x5} ${t.space.$3} 3.25rem ${t.space.$3}`, + borderRadius: `${t.radii.$xl}`, + transition: 'all 210ms cubic-bezier(0.4, 1, 0.20, 0.9)', + + id: 'keyless-prompt', + }, + })} > ({ + sx={{ + width: '100%', + justifyContent: 'space-between', alignItems: 'center', - gap: t.space.$2, - })} + }} > - {claimed ? ( - - - - ) : ( -
({ + alignItems: 'center', + gap: t.space.$2, + })} + > + {claimed ? ( + + + + ) : ( +
- + - -
- )} + +
+ )} -

{ }; } + @media (prefers-reduced-motion: reduce) { + &::after, + &::before { + animation: none; + background: transparent; + } + } + @keyframes text-shimmer { 0% { background-position: 120% center; @@ -257,176 +292,176 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { } } `} - @keyframes show-title { - from { - transform: translateY(-1.5px); - opacity: 0; - } - to { - transform: translateY(0); - opacity: 1; + @keyframes show-title { + from { + transform: translateY(-1.5px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } } - } - `} - > - {claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'} -

+ `} + > + {claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'} +

+ - - {isExpanded && ( -
-

+

- {claimed ? ( - <> - You claimed this application, but haven't set keys in your environment. Get your keys from the - Clerk Dashboard. - - ) : ( - <> - API keys were missing so we generated them for you. Link this instance to your Clerk account to make - configuration changes.{' '} - ({ - color: t.colors.$whiteAlpha600, - textDecoration: 'underline solid', - transition: `${t.transitionTiming.$common} ${t.transitionDuration.$fast}`, - ':hover': { - color: t.colors.$whiteAlpha800, - }, - })} - > - Learn more - - - )} -

-
- )} + `} + > + {claimed ? ( + <> + You claimed this application, but haven't set keys in your environment. Get your keys from the + Clerk Dashboard. + + ) : ( + <> + We generated temporary API keys for you. Link this instance to your Clerk account to configure it.{' '} + ({ + color: t.colors.$whiteAlpha600, + textDecoration: 'underline solid', + transition: `${t.transitionTiming.$common} ${t.transitionDuration.$fast}`, + ':hover': { + color: t.colors.$whiteAlpha800, + }, + })} + > + Learn more + + + )} +

+ + )} - - {claimed ? 'Get API keys' : 'Claim keys'} - (opens in a new tab) - - + `} + > + {claimed ? 'Get API keys' : 'Claim keys'} + (opens in a new tab) + + + ); }; From e359eb67b110ef2823999d396e8aca615f560b2a Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Thu, 19 Dec 2024 14:47:24 +0300 Subject: [PATCH 07/15] Move skip link up the DOM --- packages/clerk-js/sandbox/template.html | 7 + .../src/ui/components/KeylessPrompt/index.tsx | 588 +++++++++--------- 2 files changed, 288 insertions(+), 307 deletions(-) diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html index cc57518fc1..81da8b5068 100644 --- a/packages/clerk-js/sandbox/template.html +++ b/packages/clerk-js/sandbox/template.html @@ -127,6 +127,13 @@ + + Skip to keyless mode content + +
{ return ( - <> - setIsExpanded(true)} + onMouseLeave={() => (claimed ? null : setIsExpanded(false))} + onKeyDown={handleKeyDown} + tabIndex={0} + align='center' + role='button' + aria-expanded={isExpanded} + aria-controls='keyless-content' + aria-disabled={claimed && isExpanded} + id='keyless-prompt' + aria-label={claimed ? 'Missing environment keys' : 'Clerk keyless mode overlay'} + elementDescriptor={descriptors.impersonationFab} + sx={t => ({ + position: 'fixed', + bottom: '1.25rem', + right: '1.25rem', + zIndex: t.zIndices.$fab, + height: `${t.sizes.$10}`, + minWidth: '18.5625rem', + maxWidth: 'fit-content', + padding: `${t.space.$1x5} ${t.space.$1x5} ${t.space.$1x5} ${t.space.$3}`, + borderRadius: '1.25rem', + fontFamily: t.fonts.$main, + background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', + boxShadow: + '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)', - &:focus { - left: 1rem; - outline: 1.5px solid #00000085; - outline-offset: 2px; - } - `} - > - Skip to keyless mode content - + transition: 'all 310ms cubic-bezier(0.2, 0.95, 0.1, 1)', - setIsExpanded(true)} - onMouseLeave={() => (claimed ? null : setIsExpanded(false))} - onKeyDown={handleKeyDown} - tabIndex={0} - align='center' - role='button' - aria-expanded={isExpanded} - aria-controls='keyless-content' - aria-disabled={claimed && isExpanded} - id='keyless-prompt' - aria-label={claimed ? 'Missing environment keys' : 'Clerk keyless mode overlay'} - elementDescriptor={descriptors.impersonationFab} - sx={t => ({ - position: 'fixed', - bottom: '1.25rem', - right: '1.25rem', - zIndex: t.zIndices.$fab, - height: `${t.sizes.$10}`, - minWidth: '18.5625rem', - maxWidth: 'fit-content', - padding: `${t.space.$1x5} ${t.space.$1x5} ${t.space.$1x5} ${t.space.$3}`, - borderRadius: '1.25rem', - fontFamily: t.fonts.$main, - background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', - boxShadow: - '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)', - - transition: 'all 310ms cubic-bezier(0.2, 0.95, 0.1, 1)', + '&[data-expanded="true"]': { + flexDirection: 'column', + ariaLabel: 'I am expanded', + alignItems: 'flex-start', + justifyContent: 'flex-start', + height: 'fit-content', + width: 'fit-content', + minWidth: '16.125rem', + gap: `${t.space.$1x5}`, + padding: `${t.space.$2x5} ${t.space.$3} 3.25rem ${t.space.$3}`, + borderRadius: `${t.radii.$xl}`, + transition: 'all 210ms cubic-bezier(0.4, 1, 0.20, 0.9)', - '&[data-expanded="true"]': { - flexDirection: 'column', - ariaLabel: 'I am expanded', - alignItems: 'flex-start', - justifyContent: 'flex-start', - height: 'fit-content', - width: 'fit-content', - minWidth: '16.125rem', - gap: `${t.space.$1x5}`, - padding: `${t.space.$2x5} ${t.space.$3} 3.25rem ${t.space.$3}`, - borderRadius: `${t.radii.$xl}`, - transition: 'all 210ms cubic-bezier(0.4, 1, 0.20, 0.9)', - - id: 'keyless-prompt', - }, - })} + id: 'keyless-prompt', + }, + })} + > + ({ alignItems: 'center', - }} + gap: t.space.$2, + })} > - ({ - alignItems: 'center', - gap: t.space.$2, - })} - > - {claimed ? ( - - - - ) : ( -
+ + + ) : ( +
+ - -
- )} + +
+ )} -

{ } } `} - @keyframes show-title { - from { - transform: translateY(-1.5px); - opacity: 0; - } - to { - transform: translateY(0); - opacity: 1; - } + @keyframes show-title { + from { + transform: translateY(-1.5px); + opacity: 0; } - `} - > - {claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'} -

- + to { + transform: translateY(0); + opacity: 1; + } + } + `} + > + {claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'} +

+ - {isExpanded && ( -
-

+

- {claimed ? ( - <> - You claimed this application, but haven't set keys in your environment. Get your keys from the - Clerk Dashboard. - - ) : ( - <> - We generated temporary API keys for you. Link this instance to your Clerk account to configure it.{' '} - ({ - color: t.colors.$whiteAlpha600, - textDecoration: 'underline solid', - transition: `${t.transitionTiming.$common} ${t.transitionDuration.$fast}`, - ':hover': { - color: t.colors.$whiteAlpha800, - }, - })} - > - Learn more - - - )} -

-
- )} + to { + transform: translateY(0); + opacity: 1; + } + } + `} + > + {claimed ? ( + <> + You claimed this application, but haven't set keys in your environment. Get your keys from the + Clerk Dashboard. + + ) : ( + <> + We generated temporary API keys for you. Link this instance to your Clerk account to configure it.{' '} + ({ + color: t.colors.$whiteAlpha600, + textDecoration: 'underline solid', + transition: `${t.transitionTiming.$common} ${t.transitionDuration.$fast}`, + ':hover': { + color: t.colors.$whiteAlpha800, + }, + })} + > + Learn more + + + )} +

+
+ )} - - {claimed ? 'Get API keys' : 'Claim keys'} - (opens in a new tab) - - - + } + `} + > + {claimed ? 'Get API keys' : 'Claim keys'} + (opens in a new tab) + + ); }; From 654053889d2f7e410c122eae6c236dc2c2dfeba8 Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Thu, 19 Dec 2024 15:34:25 +0300 Subject: [PATCH 08/15] Less animation --- .../src/ui/components/KeylessPrompt/index.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index dc8fae2ca9..3cb29818e5 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -62,7 +62,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { boxShadow: '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)', - transition: 'all 310ms cubic-bezier(0.2, 0.95, 0.1, 1)', + transition: 'all 300ms cubic-bezier(0.2, 0.98, 0.1, 1)', '&[data-expanded="true"]': { flexDirection: 'column', @@ -119,15 +119,15 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { width: 1rem; height: 1rem; transform-style: preserve-3d; - animation: ${isExpanded ? 'coinFlipAnimation 6s infinite linear' : ' none'}; + animation: ${isExpanded ? 'coinFlipAnimation 12s infinite linear' : ' none'}; @keyframes coinFlipAnimation { 0%, - 40% { + 70% { transform: rotateY(0); } - 50%, - 90% { + 75%, + 95% { transform: rotateY(180deg); } 100% { @@ -183,7 +183,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { position: relative; isolation: isolate; white-space: nowrap; - animation: show-title 180ms ease-out forwards; + animation: show-title 160ms ease-out forwards; ${!claimed && `&::after { @@ -297,7 +297,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { line-height: 1rem; max-width: 14.625rem; min-height: 2rem; - animation: show-description 260ms ease-out forwards; + animation: show-description 220ms ease-out forwards; @keyframes show-description { from { @@ -370,7 +370,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { 0px 1.5px 2px 0px rgba(0, 0, 0, 0.48), 0px 0px 4px 0px rgba(243, 107, 22, 0) inset; - transition: all 135ms cubic-bezier(0.18, 0.89, 0.1, 1); + transition: all 100ms cubic-bezier(0.18, 0.89, 0.1, 1); animation: small-btn-glow 3s infinite 500ms; @media (prefers-reduced-motion: reduce) { From c7948f5841fa7add840fd4b91f90d3fba4923d5e Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Thu, 19 Dec 2024 18:47:08 +0300 Subject: [PATCH 09/15] WIP --- packages/clerk-js/sandbox/template.html | 2 +- .../src/ui/components/KeylessPrompt/index.tsx | 99 ++++++++++++------- 2 files changed, 66 insertions(+), 35 deletions(-) diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html index 81da8b5068..f4d72cfb79 100644 --- a/packages/clerk-js/sandbox/template.html +++ b/packages/clerk-js/sandbox/template.html @@ -128,7 +128,7 @@ Skip to keyless mode content diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index 3cb29818e5..811d2be1a8 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -17,35 +17,13 @@ type KeylessPromptProps = { const _KeylessPrompt = (_props: KeylessPromptProps) => { const [isExpanded, setIsExpanded] = useState(true); - const handleKeyDown = (e: React.KeyboardEvent) => { - if ((e.key === 'Enter' || e.key === ' ') && e.target === e.currentTarget) { - e.preventDefault(); - if (!claimed) { - setIsExpanded(prev => !prev); - } - } - if (e.key === 'Escape' && isExpanded && !claimed) { - setIsExpanded(false); - } - }; - const claimed = Boolean(useEnvironment().authConfig.claimedAt); return ( setIsExpanded(true)} - onMouseLeave={() => (claimed ? null : setIsExpanded(false))} - onKeyDown={handleKeyDown} - tabIndex={0} align='center' - role='button' - aria-expanded={isExpanded} - aria-controls='keyless-content' - aria-disabled={claimed && isExpanded} - id='keyless-prompt' - aria-label={claimed ? 'Missing environment keys' : 'Clerk keyless mode overlay'} elementDescriptor={descriptors.impersonationFab} sx={t => ({ position: 'fixed', @@ -62,11 +40,10 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { boxShadow: '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)', - transition: 'all 300ms cubic-bezier(0.2, 0.98, 0.1, 1)', + transition: 'all 310ms cubic-bezier(0.2, 0.98, 0.1, 1)', '&[data-expanded="true"]': { flexDirection: 'column', - ariaLabel: 'I am expanded', alignItems: 'flex-start', justifyContent: 'flex-start', height: 'fit-content', @@ -81,12 +58,18 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { }, })} > - !claimed && setIsExpanded(prev => !prev)} + css={css` + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + `} > ({ @@ -141,7 +124,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { > - + + + + + {isExpanded && ( { 0px 1.5px 2px 0px rgba(0, 0, 0, 0.48), 0px 0px 4px 0px rgba(243, 107, 22, 0) inset; - transition: all 100ms cubic-bezier(0.18, 0.89, 0.1, 1); + transition: all 120ms cubic-bezier(0.1, 0.7, 0.1, 1); animation: small-btn-glow 3s infinite 500ms; @media (prefers-reduced-motion: reduce) { @@ -464,7 +458,6 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { `} > {claimed ? 'Get API keys' : 'Claim keys'} - (opens in a new tab) From e9aea8f1c07225900296844a704548e8cc047639 Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Fri, 20 Dec 2024 12:48:17 +0300 Subject: [PATCH 11/15] Tweak missing env description --- packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index c5139de134..7f7bbcba6a 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -338,8 +338,8 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { > {claimed ? ( <> - You claimed this application, but haven't set keys in your environment. Get your keys from the - Clerk Dashboard. + You claimed this application but haven't set keys in your environment. Get them from the Clerk + Dashboard. ) : ( <> From c642d703571982683a512b1c1f14b278964b9e1f Mon Sep 17 00:00:00 2001 From: kaftarmery Date: Fri, 20 Dec 2024 14:12:31 +0300 Subject: [PATCH 12/15] Fix --- packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx index 7f7bbcba6a..43ce5512da 100644 --- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx +++ b/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx @@ -39,7 +39,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f', boxShadow: '0px 0px 0px 0.5px #2f3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 1px 1px rgba(255, 255, 255, 0.15) inset, 0px 0px 1px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.2)', - transition: 'all 290ms cubic-bezier(0.2, 0.98, 0.1, 1)', + transition: 'all 290ms cubic-bezier(0.36, 0.98, 0.1, 1)', '&[data-expanded="true"]': { flexDirection: 'column', @@ -322,7 +322,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { line-height: 1rem; max-width: 14.625rem; min-height: 2rem; - animation: show-description 210ms ease forwards; + animation: show-description 208ms ease forwards; @keyframes show-description { from { @@ -395,7 +395,7 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => { 0px 1.5px 2px 0px rgba(0, 0, 0, 0.48), 0px 0px 4px 0px rgba(243, 107, 22, 0) inset; - transition: all 120ms cubic-bezier(0.1, 0.7, 0.1, 1); + transition: all 142ms cubic-bezier(0.18, 0.8, 0.1, 1); animation: small-btn-glow 3s infinite 500ms; @media (prefers-reduced-motion: reduce) { From c0687f489a20bd26d1cdbac416d802c1e996780b Mon Sep 17 00:00:00 2001 From: panteliselef Date: Fri, 20 Dec 2024 14:21:05 +0200 Subject: [PATCH 13/15] render skip link --- packages/clerk-js/sandbox/template.html | 7 -- .../src/ui/components/KeylessPrompt/index.tsx | 69 ++++++++++++++++--- 2 files changed, 61 insertions(+), 15 deletions(-) diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html index f4d72cfb79..cc57518fc1 100644 --- a/packages/clerk-js/sandbox/template.html +++ b/packages/clerk-js/sandbox/template.html @@ -127,13 +127,6 @@ - - Skip to keyless mode content - -
{ const [isExpanded, setIsExpanded] = useState(true); - const claimed = Boolean(useEnvironment().authConfig.claimedAt); return ( @@ -58,8 +63,8 @@ const _KeylessPrompt = (_props: KeylessPromptProps) => {