feat: write up the accessibility issues with Facebook (#267)

dustinwhisman · Apr 14, 2024 · 9494381 · 9494381
1 parent 352b4ef
commit 9494381
Show file tree

Hide file tree

Showing 13 changed files with 308 additions and 0 deletions.
diff --git a/pages/styles.njk b/pages/styles.njk
@@ -19,6 +19,7 @@ eleventyExcludeFromCollections: true
 {% include 'css/elements/_lists.css' %}
 {% include 'css/elements/_figcaption.css' %}
 {% include 'css/elements/_blockquote.css' %}
+{% include 'css/elements/_details.css' %}
 }
 
 @layer components {

diff --git a/pages/writing/accessibility-top-100/facebook.md b/pages/writing/accessibility-top-100/facebook.md
diff --git a/src/css/components/_stack.css b/src/css/components/_stack.css
@@ -11,3 +11,7 @@
 .cmp-stack--s-3 {
 	gap: var(--size-s-3);
 }
+
+details.cmp-stack > * + * {
+	margin-block-start: var(--size-s0);
+}
diff --git a/src/css/elements/_details.css b/src/css/elements/_details.css
@@ -0,0 +1,3 @@
+summary {
+	font-size: var(--size-s0);
+}
diff --git a/src/public/images/accessibility-top-100/facebook/400-percent-zoom.png b/src/public/images/accessibility-top-100/facebook/400-percent-zoom.png
diff --git a/src/public/images/accessibility-top-100/facebook/keyboard-focus-order.png b/src/public/images/accessibility-top-100/facebook/keyboard-focus-order.png
diff --git a/src/public/images/accessibility-top-100/facebook/logo-heading.png b/src/public/images/accessibility-top-100/facebook/logo-heading.png
diff --git a/src/public/images/accessibility-top-100/facebook/pages-desktop-vertical.png b/src/public/images/accessibility-top-100/facebook/pages-desktop-vertical.png
diff --git a/src/public/images/accessibility-top-100/facebook/pages-desktop.png b/src/public/images/accessibility-top-100/facebook/pages-desktop.png
diff --git a/src/public/images/accessibility-top-100/facebook/pages-mobile.png b/src/public/images/accessibility-top-100/facebook/pages-mobile.png
diff --git a/src/public/images/accessibility-top-100/facebook/the-three-genders.png b/src/public/images/accessibility-top-100/facebook/the-three-genders.png
diff --git a/src/public/images/accessibility-top-100/facebook/validation.png b/src/public/images/accessibility-top-100/facebook/validation.png
diff --git a/src/public/images/accessibility-top-100/facebook/whats-your-name.png b/src/public/images/accessibility-top-100/facebook/whats-your-name.png