feat: added aria attributes plugin and updated link styles

fork · Apr 15, 2023 · 0b71af7 · 0b71af7
1 parent 01ccc64
commit 0b71af7
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
   },
   "packageManager": "yarn@3.5.0",
   "dependencies": {
+    "@thoughtbot/tailwindcss-aria-attributes": "^0.2.0",
     "alpinejs": "^3.12.0"
   }
 }
diff --git a/site/snippets/components/link.php b/site/snippets/components/link.php
@@ -7,15 +7,15 @@
 $current = $current ?? false;
 $tag = $href ? 'a' : 'span';
 
-$class = 'flex text-copy md:text-copy-md font-bold underline-offset-4 decoration-2 hover:underline active:text-primary-90 disabled:text-primary-50';
+$class = 'flex text-copy md:text-copy-md font-bold underline-offset-4 decoration-2 hover:underline group-hover:underline aria-current:underline active:text-primary-90 disabled:text-primary-50';
 ?>
 
-<<?= $tag ?> class="<?= $class ?>" <?php if ($href): ?>href="<?= $href ?>"<?php endif ?> <?php if ($target): ?>target="<?= $target ?>"<?php endif ?> <?php e($current ?? false, 'aria-current') ?>>
+<<?= $tag ?> class="<?= $class ?>" <?php if ($href) : ?>href="<?= $href ?>" <?php endif ?> <?php if ($target) : ?>target="<?= $target ?>" <?php endif ?> <?php e($current ?? false, 'aria-current="true"') ?>>
   <?= $text ?>
 
-  <?php if ($icon): ?>
+  <?php if ($icon) : ?>
     <div class="w-m ml-xs">
-      <?= svg('assets/icons/'.$icon.'.svg') ?>
+      <?= svg('assets/icons/' . $icon . '.svg') ?>
     </div>
   <?php endif; ?>
-</<?= $tag ?>>
+</<?= $tag ?>>
diff --git a/site/snippets/components/pagination.php b/site/snippets/components/pagination.php
@@ -10,7 +10,7 @@
       </div>
     <?php endif; ?>
 
-    <p class="copy font-bold"><?= $pagination->page().' / '.$pagination->pages() ?></p>
+    <p class="copy font-bold"><?= $pagination->page() . ' / ' . $pagination->pages() ?></p>
 
     <?php if ($pagination->hasNextPage()) : ?>
       <a href="<?= $pagination->nextPageUrl() ?>" class="block w-s">

diff --git a/site/snippets/components/stage.php b/site/snippets/components/stage.php
@@ -13,18 +13,18 @@
     <div class="col-span-4 md:col-span-12 aspect-w-16 aspect-h-9 mb-l">
       <?=
       snippet('image', [
-          'image' => $image,
-          'class' => 'blog',
-          'src' => [
-              'width' => 1600,
-              'height' => 900,
-              'quality' => 80,
-              'crop' => 'center',
-          ],
-          'srcset' => [
-              '1200w' => ['width' => 1200, 'height' => 675, 'crop' => 'center', 'quality' => 80],
-          ],
-          'sizes' => '(min-width: 1200px) 1200px, 100vw',
+        'image' => $image,
+        'class' => 'blog',
+        'src' => [
+          'width' => 1600,
+          'height' => 900,
+          'quality' => 80,
+          'crop' => 'center',
+        ],
+        'srcset' => [
+          '1200w' => ['width' => 1200, 'height' => 675, 'crop' => 'center', 'quality' => 80],
+        ],
+        'sizes' => '(min-width: 1200px) 1200px, 100vw',
       ])
       ?>
     </div>
@@ -49,7 +49,7 @@
       <div class="flex mt-s gap-xs">
         <?php foreach ($tags as $tag) : ?>
           <?php snippet('components/tag', [
-              'text' => $tag,
+            'text' => $tag,
           ]) ?>
         <?php endforeach ?>
       </div>

diff --git a/site/snippets/components/teaser.php b/site/snippets/components/teaser.php
@@ -9,42 +9,42 @@
 ?>
 
 <article>
-  <a href="<?= $url ?>" class="block">
-    <div class="aspect-w-16 aspect-h-9 mb-l bg-neutral-10">
+  <a href="<?= $url ?>" class="block group">
+    <div class="aspect-w-16 aspect-h-9 mb-m bg-neutral-10">
       <?php if ($image) : ?>
         <?=
         snippet('image', [
-            'image' => $image,
-            'class' => 'blog',
-            'src' => [
-                'width' => 1600,
-                'height' => 900,
-                'quality' => 80,
-                'crop' => 'center',
-            ],
-            'srcset' => [
-                '1200w' => ['width' => 1200, 'height' => 675, 'crop' => 'center', 'quality' => 80],
-            ],
-            'sizes' => '(min-width: 1200px) 1200px, 100vw',
+          'image' => $image,
+          'class' => 'blog',
+          'src' => [
+            'width' => 1600,
+            'height' => 900,
+            'quality' => 80,
+            'crop' => 'center',
+          ],
+          'srcset' => [
+            '1200w' => ['width' => 1200, 'height' => 675, 'crop' => 'center', 'quality' => 80],
+          ],
+          'sizes' => '(min-width: 1200px) 1200px, 100vw',
         ])
-          ?>
+        ?>
       <?php endif; ?>
     </div>
 
     <?php if ($topline) : ?>
-      <p class="copy mt-m"><?= $topline ?></p>
+      <p class="copy-small"><?= $topline ?></p>
     <?php endif; ?>
 
-    <h2 class="headline-3"><?= $title ?></h2>
+    <h2 class="headline-3 mb-m"><?= $title ?></h2>
 
-    <?php if ($excerpt) : ?>
-      <div class="mt-s mb-m">
+    <?php if ($excerpt && $excerpt->isNotEmpty()) : ?>
+      <div class="mb-m">
         <p class="copy"><?= $excerpt ?></p>
       </div>
     <?php endif; ?>
 
     <?php snippet('components/link', [
-        'text' => t('readMore'),
+      'text' => t('readMore'),
     ]) ?>
   </a>
 </article>
diff --git a/site/snippets/footer.php b/site/snippets/footer.php
@@ -1,4 +1,4 @@
-<footer class="w-full bg-white text-black">
+<footer class="w-full bg-white text-black mt-xxxl">
   <div class="grid-container w-full py-l">
     <div class="col-span-4 md:col-span-6 mb-l">
       <a href="/" class="block w-xl mb-l">
@@ -16,9 +16,10 @@
           <?php foreach ($site->footerNavigation()->toStructure() as $item) : ?>
             <li>
               <?php snippet('components/link', [
-                  'text' => $item->text(),
-                  'href' => $item->url(),
-                  'current' => $item->isOpen(),
+                'text' => $item->text(),
+                'href' => $item->url(),
+                'target' => $item->popup()->toBool(), '_blank', '_self',
+                'current' => $item->url()->value() === kirby()->url('current'),
               ]) ?>
             </li>
           <?php endforeach ?>
@@ -30,25 +31,26 @@
           <?php foreach ($site->metaNavigation()->toStructure() as $item) : ?>
             <li>
               <?php snippet('components/link', [
-                  'text' => $item->text(),
-                  'href' => $item->url(),
-                  'current' => $item->isOpen(),
+                'text' => $item->text(),
+                'href' => $item->url(),
+                'target' => $item->popup()->toBool(), '_blank', '_self',
+                'current' => $item->url()->value() === kirby()->url('current'),
               ]) ?>
             </li>
           <?php endforeach ?>
         </ul>
       <?php endif ?>
 
       <div class="mt-l">
-        <p class="copy"><?= '<b>©'.date('Y').'</b> '.$site->title() ?></p>
+        <p class="copy"><?= '<b>©' . date('Y') . '</b> ' . $site->title() ?></p>
       </div>
     </nav>
 
     <?php if ($site->socialMedia()->isNotEmpty()) : ?>
       <div class="flex gap-m mt-l col-span-4 md:mt-auto">
         <?php foreach ($site->socialMedia()->toStructure() as $social) : ?>
           <a href="<?php echo $social->url(); ?>" target="_blank" rel="noopener noreferrer" class="w-l block hover:text-interaction-50 focus:text-interaction-50">
-            <?= svg('assets/icons/'.$social->service().'.svg') ?>
+            <?= svg('assets/icons/' . $social->service() . '.svg') ?>
           </a>
         <?php endforeach ?>
       </div>

diff --git a/site/snippets/header.php b/site/snippets/header.php
@@ -11,22 +11,11 @@
             <?php foreach ($site->navigation()->toStructure() as $item) : ?>
               <li>
                 <?php snippet('components/link', [
-                    'text' => $item->text(),
-                    'href' => $item->url(),
-                    'current' => $item->isOpen(),
+                  'text' => $item->text(),
+                  'href' => $item->url(),
+                  'target' => $item->popup()->toBool(), '_blank', '_self',
+                  'current' => $item->url()->value() === kirby()->url('current'),
                 ]) ?>
-
-                <?php if ($item->children()->isNotEmpty()) : ?>
-                  <ul>
-                    <?php foreach ($item->children()->toStructure() as $child) : ?>
-                      <li>
-                        <a href="<?php echo $child->url() ?>">
-                          <?php echo $child->text() ?>
-                        </a>
-                      </li>
-                    <?php endforeach ?>
-                  </ul>
-                <?php endif ?>
               </li>
             <?php endforeach ?>
           </ul>

diff --git a/site/templates/home.php b/site/templates/home.php
@@ -4,15 +4,15 @@
 
 <main class="grid-container">
   <?php if (isset($articles)) : ?>
-    <div class="col-span-4 md:col-start-3 md:col-span-8 mb-xl flex gap-xs flex-wrap mt-l">
-      <h2 class="headline-2"><?= $articles['headline'] ?></h2>
+    <div class="col-span-4 md:col-start-3 md:col-span-8 mb-xl flex gap-xs flex-wrap mt-xxxl">
+      <h2 class="headline-1"><?= $articles['headline'] ?></h2>
 
       <div class="richtext">
         <?= $articles['intro'] ?>
       </div>
     </div>
 
-    <div class="col-span-12 md:grid md:grid-cols-2 lg:grid-cols-3 gap-x-m gap-y-xl">
+    <div class="flex flex-col col-span-12 md:grid md:grid-cols-2 lg:grid-cols-3 gap-x-m gap-y-xl">
       <?php foreach ($articles['items'] ?? [] as $article) : ?>
         <?php snippet('components/teaser', [
           'topline' => $article->created()->toDate('d.m.Y'),

diff --git a/src/main.scss b/src/main.scss
@@ -4,7 +4,7 @@
 
 @layer base {
   body {
-    @apply bg-neutral-30;
+    @apply bg-neutral-30 font-sans;
   }
 
   svg {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -74,5 +74,5 @@ export default {
   corePlugins: {
     aspectRatio: false
   },
-  plugins: [require("@tailwindcss/aspect-ratio")]
+  plugins: [require("@thoughtbot/tailwindcss-aria-attributes"), require("@tailwindcss/aspect-ratio")]
 };
diff --git a/yarn.lock b/yarn.lock
@@ -271,6 +271,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@thoughtbot/tailwindcss-aria-attributes@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "@thoughtbot/tailwindcss-aria-attributes@npm:0.2.0"
+  checksum: 97a81633974bead3d1edf791eb65808d8f92c98a3d7074a222bee8c788dbf1bcd8477d567351e3ec8bb7501adc7efc286793785aee79adcf67d9831afb5f0e9e
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"
@@ -1272,6 +1279,7 @@ __metadata:
   resolution: "kirby-starter@workspace:."
   dependencies:
     "@tailwindcss/aspect-ratio": ^0.4.2
+    "@thoughtbot/tailwindcss-aria-attributes": ^0.2.0
     "@types/alpinejs": ^3.7.1
     alpinejs: ^3.12.0
     autoprefixer: latest
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ @@
     @layer base {
       body {
-        @apply bg-neutral-30;
+        @apply bg-neutral-30 font-sans;
       }
       svg {
@@ Expand Down @@