Show focus on password visibility toggle (#13273)

* Show focus on password visibility toggle

components/brave_wallet_ui/components/shared/password-input/index.tsx

@@ -4,6 +4,7 @@ import {
   StyledWrapper,
   InputWrapper,
   ToggleVisibilityButton,
+  ToggleVisibilityIcon,
   Input,
   ErrorText,
   ErrorRow,
@@ -47,10 +48,9 @@ function PasswordInput (props: Props) {
           autoComplete='off'
         />
         {showToggleButton &&
-          <ToggleVisibilityButton
-            showPassword={showPassword}
-            onClick={onTogglePasswordVisibility}
-          />
+          <ToggleVisibilityButton onClick={onTogglePasswordVisibility}>
+            <ToggleVisibilityIcon showPassword={showPassword} />
+          </ToggleVisibilityButton>
         }
       </InputWrapper>
       {hasError &&

components/brave_wallet_ui/components/shared/password-input/style.ts

@@ -91,7 +91,7 @@ export const WarningIcon = styled.div`
   background: url(${WarningCircle});
 `
 
-export const ToggleVisibilityButton = styled(WalletButton)<Partial<StyleProps>>`
+export const ToggleVisibilityButton = styled(WalletButton)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -105,6 +105,11 @@ export const ToggleVisibilityButton = styled(WalletButton)<Partial<StyleProps>>`
   padding: 0px;
   width: 18px;
   height: 18px;
+`
+
+export const ToggleVisibilityIcon = styled.div<Partial<StyleProps>>`
+  width: 18px;
+  height: 18px;
   background-color: ${(p) => p.theme.color.text02};
   -webkit-mask-image: url(${(p) => p.showPassword ? EyeOffIcon : EyeOnIcon});
   mask-image: url(${(p) => p.showPassword ? EyeOffIcon : EyeOnIcon});