feat(alt): heavier focus indicator

ffoodd · Jun 30, 2023 · 4d0c072 · 4d0c072
1 parent 1c5f8d8
commit 4d0c072
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 24 deletions.
diff --git a/scripts/injected/alt.css b/scripts/injected/alt.css
@@ -136,22 +136,26 @@
 	scroll-margin-top: calc(50vh - var(--a11ycss-offset));
 }
 
+@keyframes focus {
+	from {
+		outline-offset: 10vw;
+	}
+
+	to {
+		outline: 8px double rebeccapurple;
+		outline-offset: 1rem;
+	}
+}
+
 :target + img {
+	animation: .5s focus .1s ease-out 1 forwards;
 	background-color: #fff;
 	box-shadow: 0 0 10rem 10rem #fffc;
+	border-radius: .5rem;
 	position: relative;
 	z-index: 2147483647;
 }
 
-/* @note Essayer element(), pour Firefox ? */
-:root:has(:target) #a11ycss-reporter::after {
-	backdrop-filter: blur(.125rem) grayscale(25%);
-	background-color: #fcf9e999;
-	content: "";
-	inset: 0 0 0 14rem;
-	position: fixed;
-}
-
 /* ==================== */
 /* == .visually-hidden
 /* ==================== */

diff --git a/scripts/injected/alt.js b/scripts/injected/alt.js
@@ -63,21 +63,21 @@
 			}
 
 			const figure = `<li>
-			<figure role="group">
-				<img src="${image.src}" alt="">
-				<figcaption style="--a11ycss-icon: url(${icon})">
-					<dl>
-						<dt><code>alt</code></dt>
-						<dd>${alt}</dd>
-						<dt><code>title</code></dt>
-						<dd>${title}</dd>
-					</dl>
-					<a href="#${target}" title="${chrome.i18n.getMessage("scrollToImage")}">
-						<span class="visually-hidden">${chrome.i18n.getMessage("scrollToImage")}</span>
-					</a>
-				</figcaption>
-			</figure>
-		</li>`;
+				<figure role="group">
+					<img src="${image.src}" alt="">
+					<figcaption style="--a11ycss-icon: url(${icon})">
+						<dl>
+							<dt><code>alt</code></dt>
+							<dd>${alt}</dd>
+							<dt><code>title</code></dt>
+							<dd>${title}</dd>
+						</dl>
+						<a href="#${target}" title="${chrome.i18n.getMessage("scrollToImage")}">
+							<span class="visually-hidden">${chrome.i18n.getMessage("scrollToImage")}</span>
+						</a>
+					</figcaption>
+				</figure>
+			</li>`;
 
 			const item = document.createRange().createContextualFragment(figure);
 			list.appendChild(item);