ScratchAddons · Samq64 · Oct 15, 2025 · Sep 20, 2025 · Sep 20, 2025 · Sep 20, 2025
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -143,6 +143,9 @@
   "moreSettings": {
     "message": "More Settings"
   },
+  "toggleSidebar": {
+    "message": "Toggle sidebar"
+  },
   "close": {
     "message": "Close"
   },
@@ -152,6 +155,9 @@
   "resetToDefault": {
     "message": "Reset to default settings"
   },
+  "importExport": {
+    "message": "Export/import settings"
+  },
   "relatedAddons": {
     "message": "Related addons:"
   },
@@ -164,9 +170,21 @@
   "viewLicenses": {
     "message": "View library licenses"
   },
+  "back": {
+    "message": "Go back"
+  },
+  "collapse": {
+    "message": "Collapse"
+  },
+  "expand": {
+    "message": "Expand"
+  },
   "reset": {
     "message": "Reset"
   },
+  "resetTo": {
+    "message": "Reset to..."
+  },
   "default": {
     "message": "Default"
   },
@@ -176,6 +194,15 @@
   "preview": {
     "message": "Preview"
   },
+  "addRow": {
+    "message": "Add row"
+  },
+  "addPresetRow": {
+    "message": "Add preset row"
+  },
+  "deleteRow": {
+    "message": "Delete row"
+  },
   "scratchAddonsTheme": {
     "message": "Scratch Addons theme"
   },
@@ -185,9 +212,15 @@
   "light": {
     "message": "Light"
   },
+  "switchLight": {
+    "message": "Switch to light theme"
+  },
   "dark": {
     "message": "Dark"
   },
+  "switchDark": {
+    "message": "Switch to dark theme"
+  },
   "loading": {
     "message": "Loading..."
   },

diff --git a/images/icons/x.svg b/images/icons/x.svg
diff --git a/popups/scratch-messaging/popup.css b/popups/scratch-messaging/popup.css
@@ -15,6 +15,9 @@ button {
   align-items: center;
   padding: 4px;
   border-radius: 4px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
 }
 .message-type-title:hover .btn-dropdown {
   background: var(--hover-highlight);
@@ -231,8 +234,8 @@ a.message-type-title-text {
   font-weight: 500;
   user-select: none;
 }
-.comment:hover .reply-button-comment,
-.comment:hover .delete-btn {
+.comment:is(:hover, :focus-within) .reply-button-comment,
+.comment:is(:hover, :focus-within) .delete-btn {
   opacity: 1;
 }
 .reply-textarea {
@@ -329,7 +332,7 @@ a.message-type-title-text {
   user-select: none;
 }
 #bottom-bar > * {
-  padding: 8px 0;
+  margin: 8px 0;
 }
 #bottom-bar > a {
   font-weight: var(--brand-orange-min-font-weight);

diff --git a/popups/scratch-messaging/popup.html b/popups/scratch-messaging/popup.html
@@ -49,6 +49,8 @@
         </span>
         <a
           @click="deleteComment()"
+          @keydown.enter="deleteComment()"
+          tabindex="0"
           class="delete-btn"
           :class="{'delete-confirm': deleteStep === 1}"
           v-show="!deleted"
@@ -65,7 +67,9 @@
             </div>
             <a
               class="reply-button-comment"
+              tabindex="0"
               @click="replying = true"
+              @keydown.enter="replying = true"
               :class="{'replying': replying}"
               :style="{'visibility': replying ? 'hidden' : 'visible'}"
               v-show="!deleted"
@@ -103,14 +107,14 @@
             class="message-type-title hover-reverse"
             @click="messageTypeExtended.stMessages = !messageTypeExtended.stMessages"
           >
-            <div class="btn-dropdown">
+            <button class="btn-dropdown">
               <img
                 src="../../images/icons/expand.svg"
                 alt="v"
                 :class="{'reverted': messageTypeExtended.stMessages}"
                 draggable="false"
               />
-            </div>
+            </button>
             <span class="message-type-title-text">{{ uiMessages.stMessagesMsg }}</span>
             <span class="float-right"
               ><img class="small-icon" src="../../images/icons/notice.svg" draggable="false" /> {{ stMessages.length
@@ -120,7 +124,9 @@
           <div class="message-type-details" v-show="messageTypeExtended.stMessages">
             <div class="comment" v-for="alert of stMessages">
               <span class="comment-time">{{ alert.datetime_created }}</span>
-              <a class="delete-btn" @click="dismissAlert(alert.id)">{{ uiMessages.dismissMsg }}</a>
+              <a class="delete-btn" tabindex="0" @click="dismissAlert(alert.id)" @keydown.enter="dismissAlert(alert.id)"
+                >{{ uiMessages.dismissMsg }}</a
+              >
               <dom-element-renderer :element="alert.element"></dom-element-renderer>
             </div>
           </div>
@@ -132,14 +138,14 @@
             class="message-type-title hover-reverse"
             @click="messageTypeExtended.follows = !messageTypeExtended.follows"
           >
-            <div class="btn-dropdown">
+            <button class="btn-dropdown">
               <img
                 src="../../images/icons/expand.svg"
                 alt="v"
                 :class="{'reverted': messageTypeExtended.follows}"
                 draggable="false"
               />
-            </div>
+            </button>
             <span class="message-type-title-text">{{ uiMessages.followsMsg }}</span>
             <span class="float-right"
               ><img class="small-icon" src="../../images/icons/follow.svg" draggable="false" /> {{ follows.length
@@ -159,14 +165,14 @@
             class="message-type-title hover-reverse"
             @click="messageTypeExtended.studioInvites = !messageTypeExtended.studioInvites"
           >
-            <div class="btn-dropdown">
+            <button class="btn-dropdown">
               <img
                 src="../../images/icons/expand.svg"
                 alt="v"
                 :class="{'reverted': messageTypeExtended.studioInvites}"
                 draggable="false"
               />
-            </div>
+            </button>
             <span class="message-type-title-text">{{ uiMessages.studioInvitesMsg }}</span>
             <span class="float-right"
               ><img class="small-icon" src="../../images/icons/studio-add.svg" draggable="false" /> {{
@@ -184,14 +190,14 @@
             class="message-type-title hover-reverse"
             @click="messageTypeExtended.studioPromotions = !messageTypeExtended.studioPromotions"
           >
-            <div class="btn-dropdown">
+            <button class="btn-dropdown">
               <img
                 src="../../images/icons/expand.svg"
                 alt="v"
                 :class="{'reverted': messageTypeExtended.studioPromotions}"
                 draggable="false"
               />
-            </div>
+            </button>
             <span class="message-type-title-text">{{ uiMessages.studioPromotionsMsg }}</span>
             <span class="float-right"
               ><img class="small-icon" src="../../images/icons/adminusers.svg" draggable="false" /> {{
@@ -209,14 +215,14 @@
             class="message-type-title hover-reverse"
             @click="messageTypeExtended.studioHostTransfers = !messageTypeExtended.studioHostTransfers"
           >
-            <div class="btn-dropdown">
+            <button class="btn-dropdown">
               <img
                 src="../../images/icons/expand.svg"
                 alt="v"
                 :class="{'reverted': messageTypeExtended.studioHostTransfers}"
                 draggable="false"
               />
-            </div>
+            </button>
             <span class="message-type-title-text">{{ uiMessages.studioHostTransfersMsg }}</span>
             <span class="float-right"
               ><img class="small-icon" src="../../images/icons/users.svg" draggable="false" /> {{
@@ -236,14 +242,14 @@
             class="message-type-title hover-reverse"
             @click="messageTypeExtended.forumActivity = !messageTypeExtended.forumActivity"
           >
-            <div class="btn-dropdown">
+            <button class="btn-dropdown">
               <img
                 src="../../../images/icons/expand.svg"
                 alt="v"
                 :class="{'reverted': messageTypeExtended.forumActivity}"
                 draggable="false"
               />
-            </div>
+            </button>
             <span class="message-type-title-text">{{ uiMessages.forumMsg }}</span>
             <span class="float-right"
               ><img class="small-icon" src="../../images/icons/forum.svg" draggable="false" /> {{ forumActivity.length
@@ -261,14 +267,14 @@
             class="message-type-title hover-reverse"
             @click="messageTypeExtended.studioActivity = !messageTypeExtended.studioActivity"
           >
-            <div class="btn-dropdown">
+            <button class="btn-dropdown">
               <img
                 src="../../images/icons/expand.svg"
                 alt="v"
                 :class="{'reverted': messageTypeExtended.studioActivity}"
                 draggable="false"
               />
-            </div>
+            </button>
             <span class="message-type-title-text">{{ uiMessages.studioActivityMsg }}</span>
             <span class="float-right"
               ><img class="small-icon" src="../../images/icons/studio.svg" draggable="false" /> {{ studioActivityAmt
@@ -289,14 +295,14 @@
             class="message-type-title hover-reverse"
             @click="messageTypeExtended.remixes = !messageTypeExtended.remixes"
           >
-            <div class="btn-dropdown">
+            <button class="btn-dropdown">
               <img
                 src="../../images/icons/expand.svg"
                 alt="v"
                 :class="{'reverted': messageTypeExtended.remixes}"
                 draggable="false"
               />
-            </div>
+            </button>
             <span class="message-type-title-text">{{ uiMessages.remixesMsg }}</span>
             <span class="float-right"
               ><img class="small-icon" src="../../images/icons/remix.svg" draggable="false" /> {{ remixes.length
@@ -417,7 +423,7 @@
               >{{ project.title }}</a
             >
             <span class="float-right">
-              <div class="tooltip" v-if="project.loveCount || project.favoriteCount">
+              <div class="tooltip" tabindex="0" v-if="project.loveCount || project.favoriteCount">
                 <span class="tooltip-indicator">
                   <span v-show="project.loveCount"
                     ><img class="small-icon colored" src="../../images/icons/heart.svg" draggable="false" />
@@ -524,7 +530,9 @@
 
     <!-- Bottom bar-->
     <div id="bottom-bar">
-      <a v-cloak @click="markAsRead()" v-show="!markedAsRead">{{ uiMessages.markAsReadMsg }}</a>
+      <a tabindex="0" v-cloak @click="markAsRead()" @keydown.enter="markAsRead()" v-show="!markedAsRead"
+        >{{ uiMessages.markAsReadMsg }}</a
+      >
       <span v-cloak v-show="markedAsRead" class="marked-as-read"
         ><img class="small-icon" src="../../images/icons/read.svg" draggable="false" /> {{ uiMessages.markedAsReadMsg
         }}</span

diff --git a/webpages/popup/index.html b/webpages/popup/index.html
@@ -26,14 +26,14 @@
           <a id="version" :href="changelogLink" target="_blank" title="{{ msg('changelog') }}">v{{ version }}</a>
         </span>
       </div>
-      <div class="header-button" @click="openSettingsPage()">
+      <a href="#" class="header-button" @click="openSettingsPage()">
         <img src="../../images/icons/settings.svg" id="settings-icon" title="{{ msg('settings') }}" draggable="false" />
-      </div>
+      </a>
     </div>
     <div id="popups">
       <div id="popup-bar" v-cloak>
         <div id="popup-chooser">
-          <div
+          <button
             v-for="popup of popups"
             class="popup-name"
             :class="{ sel: currentPopup === popup }"
@@ -49,7 +49,7 @@
                 draggable="false"
               />
             </span>
-          </div>
+          </button>
         </div>
       </div>
       <iframe

diff --git a/webpages/popup/style.css b/webpages/popup/style.css
@@ -12,6 +12,12 @@ body {
   color: var(--white-text);
 }
 
+button {
+  background-color: transparent;
+  border: none;
+  font: inherit;
+}
+
 [v-cloak] {
   display: none !important;
 }
@@ -26,11 +32,16 @@ body {
   padding: 18px;
   line-height: 0;
   user-select: none;
-  transition: 0.2s ease;
+  transition: background 0.2s ease;
+  outline-offset: -2px;
 }
 .header-button:hover {
   background: var(--header-hover-darken);
 }
+.header-button:focus-visible {
+  outline: 2px solid var(--white-text);
+}
+
 #title-text,
 .header-button {
   font-size: 18px;
@@ -83,14 +94,18 @@ body {
   padding-inline-start: 10.5px;
   padding-inline-end: 12px;
   user-select: none;
-  transition: 0.2s ease;
+  transition: background 0.2s ease;
+  outline-offset: -2px;
 }
 .popup-name:hover {
   background-color: var(--hover-darken);
 }
 .popup-name:not(.sel):hover {
   cursor: pointer;
 }
+.popup-name:focus-visible {
+  outline: 2px solid var(--content-text);
+}
 .popup-name:not(:last-child) {
   border-inline-end: none;
 }