fix storybook and wcag

aliefprihantoro · Dec 5, 2024 · 552b3ca · 552b3ca
1 parent fd3ed5d
commit 552b3ca
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 49 deletions.
diff --git a/src/view/global/footer/index.ts b/src/view/global/footer/index.ts
@@ -14,9 +14,7 @@ export default function Footer({ name, links }: TArgs) {
     <footer
       class="footer footer-center bg-primary rounded p-10 text-white max-md:mb-24">
       <nav class="flex flex-wrap gap-3 justify-center">${LINKS}</nav>
-      <aside>
-        <p>Copyright &#169; ${Link({ name, url: '/' })} - All right reserved</p>
-      </aside>
+      <p>Copyright &#169; ${Link({ name, url: '/' })} - All right reserved</p>
     </footer>
   `
 }
diff --git a/src/view/global/nav/bottom.ts b/src/view/global/nav/bottom.ts
@@ -28,6 +28,7 @@ export default function NavBottom(List: TLinksNav, isHome?: boolean) {
         flex justify-center items-center
         md:static md:justify-end md:items-end
         "
+      title="Navigasi Utama"
       data-aos="zoom-in">
       <div class="w-fit h-fit m-auto md:mr-0">
         <ul

diff --git a/src/view/global/waBtn/WaBtn.stories.ts b/src/view/global/waBtn/WaBtn.stories.ts
@@ -1,23 +1,16 @@
-import { TELP } from '../../../configs/links/contact'
 import WaBtn from './'
 import type { StoryObj } from '@storybook/html'
 
-type Story = StoryObj<{ telp: number }>
+type Story = StoryObj<unknown>
 
 const DEFAULT: Story = {
-  args: {
-    telp: TELP,
-  },
-  argTypes: {
-    telp: { control: 'number' },
-  },
-  render: ({ telp }) => {
-    return WaBtn(telp)
+  render: () => {
+    return WaBtn
   },
 }
 export default DEFAULT
 /*
  * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
  * to learn more about using the canvasElement to query the DOM
  */
-export const wabtn: Story = {}
+export const waBtn: Story = {}
diff --git a/src/view/global/waBtn/index.ts b/src/view/global/waBtn/index.ts
@@ -5,10 +5,11 @@ export default html`
   <div class="fixed bottom-24 md:bottom-0 right-0 z-50 w-screen">
     <div class="w-full max-w-4xl m-auto text-right">
       <a
+        title="tombol menuju whatsapp"
         href="https://wa.me/${TELP}"
         class="text-white btn btn-circle bg-primary">
         ${ICON_CONTACT}
       </a>
     </div>
   </div>
-`
+`
diff --git a/src/view/menuPage/Page.stories.ts b/src/view/menuPage/Page.stories.ts
@@ -21,48 +21,62 @@ const args: TArgs = {
   menu: menu,
   title: 'serabi rasa pandan',
   content: html`
-    <div class="flex scrollbar w-full snap-x snap-mandatory overflow-x-scroll">
+    <div
+      class="flex scrollbar w-full snap-x snap-mandatory overflow-x-scroll"
+      tabindex="0">
       <img
+        role="img"
+        alt="serabi rasa pandan"
         class="image-full h-[300px] w-[300px] object-scale-down "
         src="${IMG_SERABI}" />
       <img
+        role="img"
+        alt="serabi rasa pandan"
         class="image-full h-[300px] w-[300px] object-scale-down "
         src="${IMG_SERABI}" />
     </div>
     <div>
       ${DETAIL_TITLE}
-      <ul style="text-align: left;">
+      <ul>
         <li>Variant Rasa: Harum Pandan dan kuah kolak yang manis</li>
         <li>Harga: Rp. 6.000/porsi (isi 5 buah)</li>
-        <li>Composisi :</li>
-        <ul>
-          <li>Tepung Beras</li>
-          <li>Santan (kelapa parut)</li>
-          <li>Daun pandan</li>
-          <li>Perasa pandan (panili, essen pewarna makanan)</li>
-        </ul>
-        <li>Promo :&nbsp;</li>
-        <ul>
-          <li>beli kelipatan 10 porsi dapat 1 porsi&nbsp;</li>
-          <li>Foto dan rating gmaps, min. Pembelian 5, dapat 1 porsi.</li>
-          <li>Beli 10 porsi dan foto, serata rating gmaps dapat? 2 porsi</li>
-          <li>Dan mungkin ada promosi lain lagi (silahkan hubungi pembeli)</li>
-        </ul>
-        <li>Pre order :&nbsp;</li>
-        <ul>
-          <li>Min. Pemesanan H-1 + uang muka (jika pesanan banyak/custom)</li>
-          <li>
-            Jika pesan lebih dari 500 pcs (100 porsi), dan jam mepet,
-            kemungkinan ada tambahan harga. (Hal ini biasanya terjadi karena
-            kapasitas kami yang hanya mampu 500 pcs, dan sehingga lebihannya
-            akan diambilkan ke penjual lain/nyewa orang, yang mana harga serabi
-            untuk pesanan akan lebih murah di kami)&nbsp;
-          </li>
-          <li>
-            Jika merasa kurang percaya dengan pembayaran online, silahkan
-            kunjungi warung kami
-          </li>
-        </ul>
+        <li>
+          Composisi:
+          <ul>
+            <li>Tepung Beras</li>
+            <li>Santan (kelapa parut)</li>
+            <li>Daun pandan</li>
+            <li>Perasa pandan (panili, essen pewarna makanan)</li>
+          </ul>
+        </li>
+        <li>
+          Promo:
+          <ul>
+            <li>beli kelipatan 10 porsi dapat 1 porsi</li>
+            <li>Foto dan rating gmaps, min. Pembelian 5, dapat 1 porsi.</li>
+            <li>Beli 10 porsi dan foto, serata rating gmaps dapat? 2 porsi</li>
+            <li>
+              Dan mungkin ada promosi lain lagi (silahkan hubungi pembeli)
+            </li>
+          </ul>
+        </li>
+        <li>
+          Pre order:
+          <ul>
+            <li>Min. Pemesanan H-1 + uang muka (jika pesanan banyak/custom)</li>
+            <li>
+              Jika pesan lebih dari 500 pcs (100 porsi), dan jam mepet,
+              kemungkinan ada tambahan harga. (Hal ini biasanya terjadi karena
+              kapasitas kami yang hanya mampu 500 pcs, dan sehingga lebihannya
+              akan diambilkan ke penjual lain/nyewa orang, yang mana harga
+              serabi untuk pesanan akan lebih murah di kami)
+            </li>
+            <li>
+              Jika merasa kurang percaya dengan pembayaran online, silahkan
+              kunjungi warung kami
+            </li>
+          </ul>
+        </li>
       </ul>
     </div>
     <div></div>

diff --git a/src/view/menuPage/index.ts b/src/view/menuPage/index.ts
@@ -29,7 +29,7 @@ export default function PageMenu({
 }: TArgs) {
   const TITLE = heading({
     title,
-    btn: `<a class="btn btn-primary" href="${urlShop}">${ICON_CHECKOUT}</a>`,
+    btn: `<a title="Beli via WhatsApp" class="btn btn-primary" href="${urlShop}">${ICON_CHECKOUT}</a>`,
     className: 'mb-3',
   })
 
@@ -48,10 +48,16 @@ export default function PageMenu({
             ${TITLE}
             <article class="md:p-3">${content}</article>
             <div class="leading-[60px] my-6 mx-3">
-              <a class="btn btn-primary rounded w-full" href="${urlShop}"
+              <a
+                title="Beli via WhatsApp"
+                class="btn btn-primary text-white rounded w-full"
+                href="${urlShop}"
                 >${ICON_CHECKOUT} Beli via WhatsApp</a
               >
-              <a class="btn btn-secondary rounded w-full" href="${urlShop}"
+              <a
+                title="Rating kami di Google Maps"
+                class="btn btn-secondary text-white rounded w-full"
+                href="${urlShop}"
                 >${ICON_STAR} Rating kami di Google Maps</a
               >
             </div>