Feature/Accessibility-tests

.github/workflows/run-test.yml

@@ -0,0 +1,33 @@
+name: CI/CD
+
+on:
+  push:
+  pull_request:
+    branches:
+      - develop
+      - 'feature/**'
+
+jobs:
+  wait_for_vercel:
+    name: Wait for vercel
+    runs-on: ubuntu-latest
+    outputs:
+      preview_url: ${{ steps.waitForVercelPreviewDeployment.outputs.url }}
+    steps:
+      - name: Wait for Vercel preview deployment to be ready
+        uses: patrickedqvist/wait-for-vercel-preview@v1.2.0
+        id: waitForVercelPreviewDeployment
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          max_timeout: 120
+  pa11y:
+    name: Accessibility tests
+    needs: wait_for_vercel
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 16.x
+      - run: npm install -g pa11y-ci
+      - run: pa11y-ci --sitemap ${{ needs.wait_for_vercel.outputs.preview_url }}/sitemap.xml

.gitignore

@@ -15,6 +15,7 @@
 # production
 /build
 /public/robots.txt
+/public/sitemap.xml
 
 # misc
 .DS_Store

next-sitemap.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('next-sitemap').IConfig} */
+
+const config = {
+  siteUrl: process.env.NEXTAUTH_URL || `https://${process.env.VERCEL_URL}`,
+  generateIndexSitemap: false,
+  generateRobotsTxt: false,
+};
+
+export default config;

next.config.js

@@ -11,6 +11,8 @@ const nextConfig = {
       allowFutureImage: true,
     },
     optimizeCss: true,
+    legacyBrowsers: false,
+    browsersListForSwc: true,
   },
   webpack(config, { isServer }) {
     if (isServer) {

package.json

@@ -28,6 +28,7 @@
     "dev:debug": "cross-env NODE_OPTIONS='--inspect' next dev",
     "dev": "next dev",
     "build": "next build",
+    "postbuild": "next-sitemap --config next-sitemap.config.mjs",
     "start": "next start",
     "lint": "next lint",
     "prettier": "prettier --write .",
@@ -43,17 +44,21 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.0.3",
-    "@commitlint/config-conventional": "^17.0.3",
+    "@commitlint/cli": "17.0.3",
+    "@commitlint/config-conventional": "17.0.3",
     "@types/cookie": "0.5.1",
     "@types/node": "18.7.6",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
-    "cross-env": "^7.0.3",
+    "cross-env": "7.0.3",
     "eslint": "8.22.0",
     "eslint-config-next": "12.2.5",
-    "husky": "^8.0.1",
-    "prettier": "^2.7.1",
+    "husky": "8.0.1",
+    "next-sitemap": "3.1.20",
+    "prettier": "2.7.1",
     "typescript": "4.7.4"
+  },
+  "resolutions": {
+    "@next/env": "12.2.5"
   }
 }

src/components/Exchange/Exchange.module.css

@@ -33,7 +33,7 @@
   font-style: normal;
   font-weight: 500;
   line-height: 1.6rem;
-  color: #757575;
+  color: var(--subtitle);
 }
 
 .tables {
@@ -64,15 +64,15 @@
   font-style: normal;
   font-weight: bold;
   line-height: 2.3rem;
-  color: #ff9536;
+  color: var(--subtitle);
 }
 .comisionesTableTitle {
   margin-bottom: 15px;
   font-size: 1.8rem;
   font-style: normal;
   font-weight: bold;
   line-height: 2.3rem;
-  color: var(--secundary-blue);
+  color: var(--subtitle);
 }
 .currencyTableContainer,
 .comisionesTableContainer {
@@ -96,14 +96,14 @@
   font-size: 1.6rem;
   font-weight: 500;
   line-height: 1.9rem;
-  color: #b5b0ac;
+  color: var(--table-name);
 }
 
 .tableRight {
   font-size: 1.4rem;
   font-weight: normal;
   line-height: 1.7rem;
-  color: #757575;
+  color: var(--subtitle);
 }
 
 .tableTopLeft {
@@ -144,13 +144,13 @@
   font-size: 1.2rem;
   font-weight: 300;
   line-height: 1.5rem;
-  color: var(--warm-black);
+  color: #6a6a6a;
 }
 
 .currencyDateBg {
   background-color: var(--soft-orange);
 }
 
 .comisionesDateBg {
-  background-color: var(--soft-blue);
+  background-color: var(--soft-orange);
 }

src/components/Exchange/Exchange.tsx

@@ -25,7 +25,7 @@ const Exchange = () => {
       </div>
       <section className={styles.tables}>
         <div className={styles.currencyTable}>
-          <p className={styles.currencyTableTitle}>{t('coins')}</p>
+          <h3 className={styles.currencyTableTitle}>{t('coins')}</h3>
           <div className={styles.currencyTableContainer}>
             <table className={styles.table}>
               <tbody>
@@ -101,7 +101,7 @@ const Exchange = () => {
           </div>
         </div>
         <div className={styles.comisionesTable}>
-          <p className={styles.comisionesTableTitle}>{t('commissions')}</p>
+          <h3 className={styles.comisionesTableTitle}>{t('commissions')}</h3>
           <div className={styles.comisionesTableContainer}>
             <table className={styles.table}>
               <tbody>

src/components/LocaleOptions/LocaleOptions.module.css

@@ -13,7 +13,7 @@
   font-style: normal;
   line-height: 1.8rem;
   margin-bottom: 4px;
-  color: var(--just-white);
+  color: var(--warm-black);
 }
 
 .section a {
@@ -23,15 +23,15 @@
   line-height: 1.8rem;
   padding: 4px;
   text-decoration: none;
-  color: var(--just-white);
+  color: var(--warm-black);
 }
 
 .section a:hover,
 .section a:active,
 .section a:focus {
-  border: 1px solid var(--just-white);
+  border: 1px solid var(--warm-black);
 }
 
 .active {
-  border: 1px solid var(--just-white);
+  border: 1px solid var(--warm-black);
 }

src/components/Plans/Plans.module.css

@@ -25,7 +25,7 @@
   font-style: normal;
   font-weight: 500;
   line-height: 1.8rem;
-  color: #757575;
+  color: var(--subtitle);
 }
 .sliderContainer {
   display: flex;
@@ -63,11 +63,12 @@
   padding: 6px;
   top: -15px;
   left: calc(50% - 60px);
+  font-family: var(--Secondary-FF);
   font-size: 1.2rem;
   border-radius: 8px;
   font-style: normal;
   font-weight: bold;
-  color: var(--just-white);
+  color: var(--warm-black);
   background-color: var(--bitcoin-orange);
 }
 
@@ -102,7 +103,7 @@
   font-size: 1.2rem;
   font-style: normal;
   font-weight: 500;
-  color: #757575;
+  color: var(--subtitle);
 }
 .cardCta {
   width: 150px;
@@ -121,4 +122,5 @@
 
 .cardCtaIcon {
   vertical-align: middle;
+  margin-left: 5px;
 }

src/components/Plans/Plans.tsx

@@ -16,9 +16,9 @@ const Plans = () => {
         <article className={styles.cardContainer}>
           <div>
             <h3 className={styles.cardTitle}>{t('plans.0.payment')}</h3>
-            <p className={styles.cardPrice}>
+            <h4 className={styles.cardPrice}>
               <span>$</span> {t('plans.0.price')}
-            </p>
+            </h4>
             <p className={styles.cardSaving}>* {t('plans.0.description')}</p>
             <button className={styles.cardCta}>
               {t('plans.0.callToAction')}
@@ -36,9 +36,9 @@ const Plans = () => {
           <p className={styles.recommended}>{t('recommended')}</p>
           <div>
             <h3 className={styles.cardTitle}>{t('plans.1.payment')}</h3>
-            <p className={styles.cardPrice}>
+            <h4 className={styles.cardPrice}>
               <span>$</span> {t('plans.1.price')}
-            </p>
+            </h4>
             <p className={styles.cardSaving}>* {t('plans.1.description')}</p>
             <button className={styles.cardCta}>
               {t('plans.1.callToAction')}
@@ -55,9 +55,9 @@ const Plans = () => {
         <article className={styles.cardContainer}>
           <div>
             <h3 className={styles.cardTitle}>{t('plans.2.payment')}</h3>
-            <p className={styles.cardPrice}>
+            <h4 className={styles.cardPrice}>
               <span>$</span> {t('plans.2.price')}
-            </p>
+            </h4>
             <p className={styles.cardSaving}>* {t('plans.2.description')}</p>
             <button className={styles.cardCta}>
               {t('plans.2.callToAction')}

src/components/Poster/Poster.module.css

@@ -24,4 +24,5 @@
   font-weight: bold;
   line-height: 2.6rem;
   color: var(--just-white);
+  text-shadow: 1px 1px 2px black;
 }

src/components/ProductDetails/ProductDetails.module.css

@@ -33,7 +33,7 @@
   font-style: normal;
   font-weight: 500;
   line-height: 1.8rem;
-  color: #808080;
+  color: var(--card-subtitle);
 }
 .card {
   width: 90%;
@@ -64,7 +64,7 @@
   font-style: normal;
   font-weight: 500;
   line-height: 1.8rem;
-  color: #808080;
+  color: var(--card-text);
 }
 
 @media screen and (min-width: 1000px) {

src/components/ProductDetails/ProductDetails.tsx

@@ -28,7 +28,7 @@ const ProductDetails = () => {
             height={20}
             className={styles.cardIcon}
           />
-          <p className={styles.cardTitle}>{t('details.0.name')}</p>
+          <h3 className={styles.cardTitle}>{t('details.0.name')}</h3>
           <p className={styles.cardBody}>{t('details.0.description')}</p>
         </article>
         <article className={styles.card}>
@@ -39,7 +39,7 @@ const ProductDetails = () => {
             height={20}
             className={styles.cardIcon}
           />
-          <p className={styles.cardTitle}>{t('details.1.name')}</p>
+          <h3 className={styles.cardTitle}>{t('details.1.name')}</h3>
           <p className={styles.cardBody}>{t('details.1.description')}</p>
         </article>
         <article className={styles.card}>
@@ -50,7 +50,7 @@ const ProductDetails = () => {
             height={20}
             className={styles.cardIcon}
           />
-          <p className={styles.cardTitle}>{t('details.2.name')}</p>
+          <h3 className={styles.cardTitle}>{t('details.2.name')}</h3>
           <p className={styles.cardBody}>{t('details.2.description')}</p>
         </article>
         <article className={styles.card}>
@@ -61,7 +61,7 @@ const ProductDetails = () => {
             height={20}
             className={styles.cardIcon}
           />
-          <p className={styles.cardTitle}>{t('details.3.name')}</p>
+          <h3 className={styles.cardTitle}>{t('details.3.name')}</h3>
           <p className={styles.cardBody}>{t('details.3.description')}</p>
         </article>
       </section>

src/layout/Footer/Footer.module.css

@@ -26,5 +26,5 @@
 
 .a {
   text-decoration: none;
-  color: var(--just-white);
+  color: var(--warm-black);
 }

src/layout/Header/Header.module.css

@@ -7,7 +7,7 @@
   min-width: 320px;
   height: 334px;
   text-align: center;
-  background: linear-gradient(207.8deg, #201e1c 16.69%, #f7931a 100%);
+  background: linear-gradient(207.8deg, #201e1c 16.69%, #ff9933 100%);
 }
 
 .logo {

src/styles/globals.css

@@ -1,12 +1,16 @@
 :root {
   /* Colors */
-  --bitcoin-orange: #f7931a;
+  --bitcoin-orange: #ff9933;
   --soft-orange: #ffe9d5;
-  --secundary-blue: #1a9af7;
+  --secundary-blue: #1a63f7; /*#1a9af7*/
   --soft-blue: #e7f5ff;
   --warm-black: #201e1c;
   --black: #282623;
   --grey: #bababa;
+  --subtitle: #717171; /*#757575*/
+  --table-name: #787572; /*#b5b0ac*/
+  --card-subtitle: #878787; /*#808080*/
+  --card-text: #8e8e8e; /*#808080*/
   --off-white: #faf8f7;
   --just-white: #ffffff;
 

src/utils/generate-robots-txt.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 
-const crawlableRobotsTxt = `User-agent: *\nAllow: /`;
+const crawlableRobotsTxt = `User-agent: *\nAllow: /\n\nSitemap: https://next-batatabit.vercel.app/sitemap.xml`;
 
 const uncrawlableRobotsTxt = `User-agent: *\nDisallow: /`;