Merge pull request #628 from quoid/feat/ios_dynamic_type

feat: support ios dynamic type to improve a11y
quoid · Feb 21, 2024 · 7cb1857 · 7cb1857
2 parents 3f16a24 + d138ec0
commit 7cb1857
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 4 deletions.
diff --git a/src/app/variables.css b/src/app/variables.css
@@ -18,8 +18,7 @@
 	--text-color-primary: rgb(255 255 255);
 	--text-color-secondary: rgb(255 255 255 / 0.65);
 	--text-color-disabled: rgb(255 255 255 / 0.4);
-	--font-family: system-ui, -apple-system, "Helvetica Neue", "Helvetica",
-		sans-serif;
+	--font-family: -apple-system, "Helvetica Neue", "Helvetica", sans-serif;
 	--text-default: 1rem/1.5rem var(--font-family);
 	--text-large: 1.25rem/1.5rem var(--font-family);
 	--text-medium: 0.875rem/1.313rem var(--font-family);

diff --git a/src/ext/action-popup/app.css b/src/ext/action-popup/app.css
@@ -23,6 +23,20 @@ body {
 		overscroll-behavior: none;
 	}
 
+	/**
+	 * Dynamic Type
+	 * https://support.apple.com/102453
+	 * https://webkit.org/blog/3709/using-the-system-font-in-web-content/
+	 * https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_7_0.html#//apple_ref/doc/uid/TP40014305-CH5-SW10
+	 * https://github.com/w3c/csswg-drafts/issues/3708
+	 */
+	@supports (font: -apple-system-body) {
+		html {
+			/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+			font: -apple-system-title3; /* default 20px */
+		}
+	}
+
 	body {
 		width: auto;
 		min-width: 16rem;
@@ -36,6 +50,13 @@ body {
 			min-height: 16rem;
 		}
 	}
+
+	/* Avoid page zoom */
+	input,
+	textarea,
+	select {
+		font-size: max(1rem, 16px);
+	}
 }
 
 noscript {

diff --git a/src/ext/extension-page/app.css b/src/ext/extension-page/app.css
@@ -12,6 +12,27 @@ html {
 		height: auto;
 		overflow: visible;
 	}
+
+	/**
+	 * Dynamic Type
+	 * https://support.apple.com/102453
+	 * https://webkit.org/blog/3709/using-the-system-font-in-web-content/
+	 * https://developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_7_0.html#//apple_ref/doc/uid/TP40014305-CH5-SW10
+	 * https://github.com/w3c/csswg-drafts/issues/3708
+	 */
+	@supports (font: -apple-system-body) {
+		html {
+			/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+			font: -apple-system-body; /* default 17px */
+		}
+	}
+
+	/* Avoid page zoom */
+	input,
+	textarea,
+	select {
+		font-size: max(1rem, 16px);
+	}
 }
 
 body {

diff --git a/src/ext/shared/variables.css b/src/ext/shared/variables.css
@@ -18,8 +18,7 @@
 	--text-color-primary: rgb(255 255 255);
 	--text-color-secondary: rgb(255 255 255 / 0.65);
 	--text-color-disabled: rgb(255 255 255 / 0.4);
-	--font-family: system-ui, -apple-system, "Helvetica Neue", "Helvetica",
-		sans-serif;
+	--font-family: -apple-system, "Helvetica Neue", "Helvetica", sans-serif;
 	--text-default: 1rem/1.5rem var(--font-family);
 	--text-large: 1.25rem/1.5rem var(--font-family);
 	--text-medium: 0.875rem/1.313rem var(--font-family);