refactor(checkalts): modernize and improve alt reporter with MV3

ffoodd · Jun 12, 2023 · 7893313 · 7893313
1 parent f5e2958
commit 7893313
Show file tree

Hide file tree

Showing 18 changed files with 407 additions and 393 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -26,9 +26,6 @@
 	"altMissing": {
 		"message": "missing"
 	},
-	"altOK": {
-		"message": "OK"
-	},
 	"localizeOn": {
 		"message": "On"
 	},
@@ -58,5 +55,17 @@
 	},
 	"h1Others": {
 		"message": "Other tools"
+	},
+	"scrollToImage": {
+		"message": "Scroll to image"
+	},
+	"checkAltsHeading": {
+		"message": "$NUMBER$ images",
+		"placeholders": {
+			"number": {
+				"content": "$1",
+				"example": "6"
+			}
+		}
 	}
 }
diff --git a/_locales/es/messages.json b/_locales/es/messages.json
@@ -26,9 +26,6 @@
 	"altMissing": {
 		"message": "falta"
 	},
-	"altOK": {
-		"message": "OK"
-	},
 	"localizeOn": {
 		"message": "On"
 	},
@@ -58,5 +55,17 @@
 	},
 	"h1Others": {
 		"message": "Otras herramientas"
+	},
+	"scrollToImage": {
+		"message": "Desplácese hasta la imagen"
+	},
+	"checkAltsHeading": {
+		"message": "$NUMBER$ imágenes",
+		"placeholders": {
+			"number": {
+				"content": "$1",
+				"example": "6"
+			}
+		}
 	}
 }
diff --git a/_locales/fr/messages.json b/_locales/fr/messages.json
@@ -26,9 +26,6 @@
 	"altMissing": {
 		"message": "manquant"
 	},
-	"altOK": {
-		"message": "OK"
-	},
 	"localizeOn": {
 		"message": "Activé"
 	},
@@ -58,5 +55,17 @@
 	},
 	"h1Others": {
 		"message": "Autres outils"
+	},
+	"scrollToImage": {
+		"message": "Défiler vers l’image"
+	},
+	"checkAltsHeading": {
+		"message": "$NUMBER$ images",
+		"placeholders": {
+			"number": {
+				"content": "$1",
+				"example": "6"
+			}
+		}
 	}
 }
diff --git a/_locales/gr/messages.json b/_locales/gr/messages.json
@@ -26,9 +26,6 @@
 	"altMissing": {
 		"message": "λείπει"
 	},
-	"altOK": {
-		"message": "OK"
-	},
 	"localizeOn": {
 		"message": "Ενεργοποιημένη"
 	},
@@ -58,5 +55,17 @@
 	},
 	"h1Others": {
 		"message": "Άλλα εργαλεία"
+	},
+	"scrollToImage": {
+		"message": "Μετακινηθείτε στην εικόνα"
+	},
+	"checkAltsHeading": {
+		"message": "$NUMBER$ εικόνες",
+		"placeholders": {
+			"number": {
+				"content": "$1",
+				"example": "6"
+			}
+		}
 	}
 }
diff --git a/_locales/pl/messages.json b/_locales/pl/messages.json
@@ -26,9 +26,6 @@
 	"altMissing": {
 		"message": "brak"
 	},
-	"altOK": {
-		"message": "OK"
-	},
 	"localizeOn": {
 		"message": "Wł."
 	},
@@ -58,5 +55,17 @@
 	},
 	"h1Others": {
 		"message": "Inne narzędzia"
+	},
+	"scrollToImage": {
+		"message": "Przewiń do obrazu"
+	},
+	"checkAltsHeading": {
+		"message": "$NUMBER$ obrazów",
+		"placeholders": {
+			"number": {
+				"content": "$1",
+				"example": "6"
+			}
+		}
 	}
 }
diff --git a/_locales/ru/messages.json b/_locales/ru/messages.json
@@ -26,9 +26,6 @@
 	"altMissing": {
 		"message": "отсутствует"
 	},
-	"altOK": {
-		"message": "OK"
-	},
 	"localizeOn": {
 		"message": "Вкл"
 	},
@@ -58,5 +55,17 @@
 	},
 	"h1Others": {
 		"message": "Другие инструменты"
+	},
+	"scrollToImage": {
+		"message": "Прокрутите изображение"
+	},
+	"checkAltsHeading": {
+		"message": "$NUMBER$ изображений",
+		"placeholders": {
+			"number": {
+				"content": "$1",
+				"example": "6"
+			}
+		}
 	}
 }
diff --git a/icons/info.svg b/icons/info.svg
diff --git a/icons/ko.svg b/icons/ko.svg
diff --git a/icons/ok.svg b/icons/ok.svg
diff --git a/manifest-chrome.json b/manifest-chrome.json
@@ -26,11 +26,14 @@
 	"content_scripts": [
 		{
 			"matches": [
-				"<all_urls>"
+				"*://*/*"
 			],
 			"js": [
 				"/scripts/injected/checkalts.js"
 			],
+			"css": [
+				"/scripts/injected/checkalts.css"
+			],
 			"run_at": "document_end"
 		}
 	],
@@ -44,9 +47,9 @@
 			"icons/info.svg",
 			"icons/ko.svg",
 			"icons/ok.svg",
-			"scripts/injected/checkalts.js",
+			"scripts/injected/*",
 			"css/*"
 		],
-		"matches": ["<all_urls>"]
+		"matches": ["*://*/*"]
 	}]
 }
diff --git a/manifest-firefox.json b/manifest-firefox.json
@@ -32,11 +32,14 @@
 	"content_scripts": [
 		{
 			"matches": [
-				"<all_urls>"
+				"*://*/*"
 			],
 			"js": [
 				"/scripts/injected/checkalts.js"
 			],
+			"css": [
+				"/scripts/injected/checkalts.css"
+			],
 			"run_at": "document_end"
 		}
 	],
@@ -51,11 +54,11 @@
 				"icons/info.svg",
 				"icons/ko.svg",
 				"icons/ok.svg",
-				"scripts/injected/checkalts.js",
+				"scripts/injected/*",
 				"css/*"
 			],
 			"matches": [
-				"<all_urls>"
+				"*://*/*"
 			]
 		}
 	]

diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
 	"stylelint": {
 		"extends": "stylelint-config-standard-scss",
 		"rules": {
+			"indentation": "tab",
 			"string-quotes": null,
 			"at-rule-empty-line-before": null,
 			"declaration-empty-line-before": null,

diff --git a/popup/index.html b/popup/index.html
@@ -8,71 +8,71 @@
 </head>
 <body>
 	<main id="home">
-		<h1 data-message="h1Allycss" class="localizeMe"></h1>
+		<h1 data-message="h1Allycss" class="localize"></h1>
 
-		<form id="a11ycssForm" class="util">
+		<form id="a11ycssForm" class="m-1">
 			<fieldset class="input-group">
-				<legend><h2 data-message="a11ycssMinimumNoticeLevel" class="localizeMe"></h2></legend>
+				<legend><h2 data-message="a11ycssMinimumNoticeLevel" class="localize"></h2></legend>
 				<div class="radiocontainer">
-					<input type="radio" name="option-a11y" id="a11ycss1" value="all" checked class="sr-only">
-					<label for="a11ycss1" data-message="a11ycssLevel_all" class="localizeMe"></label>
+					<input type="radio" name="option-a11y" id="a11ycss1" value="all" checked class="visually-hidden">
+					<label for="a11ycss1" data-message="a11ycssLevel_all" class="localize"></label>
 				</div>
 				<div class="radiocontainer">
-					<input type="radio" name="option-a11y" id="a11ycss2" value="obsolete" class="sr-only">
-					<label for="a11ycss2" data-message="a11ycssLevel_obsolete" class="localizeMe"></label>
+					<input type="radio" name="option-a11y" id="a11ycss2" value="obsolete" class="visually-hidden">
+					<label for="a11ycss2" data-message="a11ycssLevel_obsolete" class="localize"></label>
 				</div>
 				<div class="radiocontainer">
-					<input type="radio" name="option-a11y" id="a11ycss3" value="warning" class="sr-only">
-					<label for="a11ycss3" data-message="a11ycssLevel_warning" class="localizeMe"></label>
+					<input type="radio" name="option-a11y" id="a11ycss3" value="warning" class="visually-hidden">
+					<label for="a11ycss3" data-message="a11ycssLevel_warning" class="localize"></label>
 				</div>
 				<div class="radiocontainer">
-					<input type="radio" name="option-a11y" id="a11ycss4" value="error" class="sr-only">
-					<label for="a11ycss4" data-message="a11ycssLevel_error" class="localizeMe"></label>
+					<input type="radio" name="option-a11y" id="a11ycss4" value="error" class="visually-hidden">
+					<label for="a11ycss4" data-message="a11ycssLevel_error" class="localize"></label>
 				</div>
 			</fieldset>
 
 			<p class="button-group">
-				<span data-message="btn_a11y_label" id="btn_a11y_label" class="localizeMe sr-only"></span>
+				<span data-message="btn_a11y_label" id="btn_a11y_label" class="localize visually-hidden"></span>
 				<button type="button" id="btn-a11y" role="switch"
 						aria-checked="false" aria-labelledby="btn_a11y_label">
-						<span data-message="a11ycssBtnClear" class="localizeMe unapply"></span>
-						<span data-message="a11ycssBtnApply" class="localizeMe apply"></span>
+						<span data-message="a11ycssBtnClear" class="localize unapply"></span>
+						<span data-message="a11ycssBtnApply" class="localize apply"></span>
 				</button>
 			</p>
 		</form>
 
-		<div class="util">
-			<h2 data-message="h1Others" class="localizeMe"></h2>
+		<div class="m-1">
+			<h2 data-message="h1Others" class="localize"></h2>
 			<p class="button-group">
-				<span data-message="btn_outline_label" id="btn_outline_label" class="localizeMe"></span>
+				<span data-message="btn_outline_label" id="btn_outline_label" class="localize"></span>
 				<button type="button" id="btn-outline" role="switch"
 						aria-checked="false" aria-labelledby="btn_outline_label">
-						<span data-message="localizeOn" class="localizeMe"></span>
-						<span data-message="localizeOff" class="localizeMe"></span>
+						<span data-message="localizeOn" class="localize"></span>
+						<span data-message="localizeOff" class="localize"></span>
 				</button>
 			</p>
 			<p class="button-group">
-				<span data-message="btn_lang_label" id="btn_lang_label" class="localizeMe"></span>
+				<span data-message="btn_lang_label" id="btn_lang_label" class="localize"></span>
 				<button type="button" id="btn-lang" role="switch"
 						aria-checked="false" aria-labelledby="btn_lang_label">
-						<span data-message="localizeOn" class="localizeMe"></span>
-						<span data-message="localizeOff" class="localizeMe"></span>
+						<span data-message="localizeOn" class="localize"></span>
+						<span data-message="localizeOff" class="localize"></span>
 				</button>
 			</p>
 			<p class="button-group">
-				<span data-message="btn_alt_label" id="btn_alt_label" class="localizeMe"></span>
+				<span data-message="btn_alt_label" id="btn_alt_label" class="localize"></span>
 				<button type="button" id="btn-alt" role="switch"
 						aria-checked="false" aria-labelledby="btn_alt_label">
-						<span data-message="localizeOn" class="localizeMe"></span>
-						<span data-message="localizeOff" class="localizeMe"></span>
+						<span data-message="localizeOn" class="localize"></span>
+						<span data-message="localizeOff" class="localize"></span>
 				</button>
 			</p>
 			<p class="button-group">
-				<span data-message="btn_spacing_label" id="btn_spacing_label" class="localizeMe"></span>
+				<span data-message="btn_spacing_label" id="btn_spacing_label" class="localize"></span>
 				<button type="button" id="btn-spacing" role="switch"
 						aria-checked="false" aria-labelledby="btn_spacing_label">
-						<span data-message="localizeOn" class="localizeMe"></span>
-						<span data-message="localizeOff" class="localizeMe"></span>
+						<span data-message="localizeOn" class="localize"></span>
+						<span data-message="localizeOff" class="localize"></span>
 				</button>
 			</p>
 		</div>