[Rewards] Autofocus accept button on TOS update modal (#32725)

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<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    if (ref.current) {
+      const button = ref.current.querySelector<HTMLElement>(
+        'leo-button[autofocus]',
+      )
+      button?.focus()
+    }
+  }, [])
+
   return (
-    <div data-css-scope={actionsStyle.scope}>
+    <div
+      ref={ref}
+      data-css-scope={actionsStyle.scope}
+    >
       {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}
           </Button>

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<HTMLLinkElement>('a')
-      if (link) {
-        link.focus()
-      }
-    }
-  }, [])
-
   return (
     <Modal>
       <Modal.Header title={getString('tosUpdateRequiredTitle')} />
@@ -40,7 +30,7 @@ export function TosUpdateModal(props: Props) {
             $1: (content) => <button onClick={props.onReset}>{content}</button>,
           })}
         </div>
-        <div ref={onMount}>
+        <div>
           {formatString(getString('tosUpdateLink'), {
             $1: (content) => (
               <NewTabLink href={urls.termsOfServiceURL}>{content}</NewTabLink>
@@ -54,6 +44,7 @@ export function TosUpdateModal(props: Props) {
             text: getString('tosUpdateAcceptButtonLabel'),
             onClick: props.onAccept,
             isPrimary: true,
+            autoFocus: true,
           },
         ]}
       />

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.',