release: v0.20.0

app/admin/styles/favicon.css

@@ -9,11 +9,62 @@
 }
 
 .favicon-row {
+  position: relative;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
 }
 
-.favicon-row input[type='file'] {
-  font-size: 0.8rem;
+/* The current icon, on the input surface so a dark or a light icon both show. */
+.favicon-preview {
+  width: 32px;
+  height: 32px;
+  padding: 4px;
+  box-sizing: content-box;
+  object-fit: contain;
+  background: var(--admin-bg-input);
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+}
+
+/* The native input stays in the tab order and the accessibility tree but out
+   of sight: its "Choose File / No file chosen" box was the one raw browser
+   control left in the admin (QA A-18). The label below is what is seen.
+   Doubled class to outrank `.admin-field input`, which sizes every input. */
+.admin-field .favicon-file-input.favicon-file-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* A <label>, so `.admin-field label` (block, uppercase caption) reaches it
+   too; this puts the button back. */
+.admin-field .favicon-upload-btn {
+  display: inline-flex;
+  margin: 0;
+  font-size: 0.8rem;
+  font-weight: 500;
+  letter-spacing: normal;
+  text-transform: none;
+  cursor: pointer;
+}
+
+/* Focus lands on the hidden input; the ring is drawn on its label. */
+.favicon-file-input:focus-visible + .favicon-upload-btn {
+  outline: var(--admin-focus-ring);
+  outline-offset: 2px;
+}
+
+.favicon-file-input:disabled + .favicon-upload-btn {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
 }