diff --git a/components/brave_rewards/resources/rewards_page/components/common/modal.tsx b/components/brave_rewards/resources/rewards_page/components/common/modal.tsx index 590f42ccb13..f0466f42d83 100644 --- a/components/brave_rewards/resources/rewards_page/components/common/modal.tsx +++ b/components/brave_rewards/resources/rewards_page/components/common/modal.tsx @@ -131,6 +131,7 @@ interface ModalAction { className?: string isDisabled?: boolean isPrimary?: boolean + autoFocus?: boolean } interface ModalActionsProps { @@ -138,8 +139,22 @@ interface ModalActionsProps { } function ModalActions(props: ModalActionsProps) { + const ref = React.useRef(null) + + React.useEffect(() => { + if (ref.current) { + const button = ref.current.querySelector( + 'leo-button[autofocus]', + ) + button?.focus() + } + }, []) + return ( -
+
{props.actions.map((action) => { let classNames: string[] = [] if (action.className) { @@ -155,6 +170,7 @@ function ModalActions(props: ModalActionsProps) { isDisabled={action.isDisabled} kind={action.isPrimary ? 'filled' : 'outline'} className={classNames.join(' ')} + autofocus={action.autoFocus} > {action.text} diff --git a/components/brave_rewards/resources/rewards_page/components/modals/tos_update_modal.tsx b/components/brave_rewards/resources/rewards_page/components/modals/tos_update_modal.tsx index 9c528d1120b..24d7bd40cdf 100644 --- a/components/brave_rewards/resources/rewards_page/components/modals/tos_update_modal.tsx +++ b/components/brave_rewards/resources/rewards_page/components/modals/tos_update_modal.tsx @@ -21,16 +21,6 @@ interface Props { export function TosUpdateModal(props: Props) { const { getString } = useLocaleContext() - - const onMount = React.useCallback((elem: HTMLElement | null) => { - if (elem) { - const link = elem.querySelector('a') - if (link) { - link.focus() - } - } - }, []) - return ( @@ -40,7 +30,7 @@ export function TosUpdateModal(props: Props) { $1: (content) => , })}
-
+
{formatString(getString('tosUpdateLink'), { $1: (content) => ( {content} @@ -54,6 +44,7 @@ export function TosUpdateModal(props: Props) { text: getString('tosUpdateAcceptButtonLabel'), onClick: props.onAccept, isPrimary: true, + autoFocus: true, }, ]} /> diff --git a/components/brave_rewards/resources/rewards_page/stories/storybook_strings.ts b/components/brave_rewards/resources/rewards_page/stories/storybook_strings.ts index 9383c8bbdb1..b5cfa7ebc67 100644 --- a/components/brave_rewards/resources/rewards_page/stories/storybook_strings.ts +++ b/components/brave_rewards/resources/rewards_page/stories/storybook_strings.ts @@ -102,7 +102,7 @@ export const localeStrings: { [K in StringKey]: string } = { captchaSupportButtonLabel: 'Contact support', closeButtonLabel: 'Close', communityTitle: 'Community', - connectedAdsViewedText: "You're earning for seeing $1# Ads/$1 this month", + connectedAdsViewedText: "You're earning for seeing $1 # Ads/$1 this month", connectAccountSubtext: 'Connect a payout account', connectAccountText: 'Ready to start earning?', connectButtonLabel: 'Connect account', @@ -251,7 +251,7 @@ export const localeStrings: { [K in StringKey]: string } = { tosUpdateRequiredText: 'We’ve updated the Terms of Service for Brave Rewards. We’ve made these updates to clarify our terms and ensure they cover new features. If you continue to use Brave Rewards, you are agreeing to the updated Terms of Service. If you do not agree, you can $1reset/$1 Brave Rewards, which will disable the feature.', tosUpdateRequiredTitle: 'Updated Terms of Service', - unconnectedAdsViewedText: "You've seen $1# Ads/$1 this month", + unconnectedAdsViewedText: "You've seen $1 # Ads/$1 this month", unsupportedRegionText1: 'Unfortunately, it looks like you’re in a region where Brave Rewards is not available.', unsupportedRegionText2: 'Don’t worry.',