Bug 1958817 - Newtab move personalize panel wallpaper category inputs from radio to button. r=home-newtab-reviewers,maxx

Differential Revision: https://phabricator.services.mozilla.com/D245299

browser/extensions/newtab/content-src/components/WallpapersSection/WallpaperCategories.jsx

@@ -518,10 +518,9 @@ export class _WallpaperCategories extends React.PureComponent {
                         this.categoryRef[index] = el;
                       }
                     }}
-                    name="wallpaper-category"
                     id={category}
                     style={style}
-                    type="radio"
+                    type="button"
                     onKeyDown={e => this.handleCategoryKeyDown(e, category)}
                     // Add overrides for custom wallpaper upload UI
                     onClick={

browser/extensions/newtab/content-src/components/WallpapersSection/_WallpapersSection.scss

@@ -89,12 +89,6 @@
     }
   }
 
-  &:checked {
-    border-color: transparent;
-    outline-color: var(--color-accent-primary-active);
-    padding: 2px;
-  }
-
   &:focus-visible {
     outline-color: var(--newtab-primary-action-background);
   }
@@ -103,6 +97,12 @@
     filter: brightness(55%);
     outline-color: transparent;
   }
+
+  &:focus {
+    border-color: transparent;
+    outline-color: var(--color-accent-primary-active);
+    padding: 2px;
+  }
 }
 
 .theme-custom-color-picker {

browser/extensions/newtab/css/activity-stream.css

@@ -2643,11 +2643,6 @@ main section {
 .wallpaper-input.light-sky {
   background-image: url("chrome://newtab/content/data/content/assets/wallpapers/light-sky.avif");
 }
-.wallpaper-input:checked {
-  border-color: transparent;
-  outline-color: var(--color-accent-primary-active);
-  padding: 2px;
-}
 .wallpaper-input:focus-visible {
   outline-color: var(--newtab-primary-action-background);
 }
@@ -2655,6 +2650,11 @@ main section {
   filter: brightness(55%);
   outline-color: transparent;
 }
+.wallpaper-input:focus {
+  border-color: transparent;
+  outline-color: var(--color-accent-primary-active);
+  padding: 2px;
+}
 
 .theme-custom-color-picker {
   background-color: var(--newtab-background-color-secondary);

browser/extensions/newtab/data/content/activity-stream.bundle.js

@@ -12343,10 +12343,9 @@ class _WallpaperCategories extends (external_React_default()).PureComponent {
             this.categoryRef[index] = el;
           }
         },
-        name: "wallpaper-category",
         id: category,
         style: style,
-        type: "radio",
+        type: "button",
         onKeyDown: e => this.handleCategoryKeyDown(e, category)
         // Add overrides for custom wallpaper upload UI
         ,