fix: a11n issues

.eslintrc.cjs

@@ -2,7 +2,7 @@ const path = require("node:path");
 
 const paddingLineBetweenStatements = [
   "error",
-  { blankLine: "always", prev: "*", next: "return" },
+  { blankLine: "always", next: "return", prev: "*" },
 ]
   .concat(
     [
@@ -15,16 +15,16 @@ const paddingLineBetweenStatements = [
       "if",
     ]
       .map((item) => [
-        { blankLine: "always", prev: item, next: "*" },
-        { blankLine: "always", prev: "*", next: item },
+        { blankLine: "always", next: "*", prev: item },
+        { blankLine: "always", next: item, prev: "*" },
       ])
       .flat(),
   )
   .concat([
     {
       blankLine: "any",
-      prev: ["singleline-const"],
       next: ["singleline-const"],
+      prev: ["singleline-const"],
     },
   ]);
 
@@ -33,55 +33,61 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  settings: {
-    react: {
-      version: "detect",
-    },
-  },
   extends: [
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: path.join(__dirname, "tsconfig.json"),
   },
-  plugins: ["@typescript-eslint", "react-hooks", "@stylistic"],
+  plugins: ["@typescript-eslint", "react-hooks", "@stylistic", "perfectionist"],
   rules: {
-    // @TODO: These should be removed when fixed
-    "@typescript-eslint/no-explicit-any": "off",
     "@next/next/no-img-element": "off",
-    "jsx-a11y/alt-text": "off",
-    "react/display-name": "off",
+    "@stylistic/padding-line-between-statements": paddingLineBetweenStatements,
+
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-shadow": "error",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-use-before-define": "error",
+    "@typescript-eslint/no-var-requires": "off",
 
     "arrow-body-style": "error",
     "camelcase": "off",
     "global-require": "off",
+    "jsx-a11y/anchor-is-valid": "off",
     "no-console": ["error", { allow: ["warn", "error"] }],
     "no-shadow": "off",
     "no-unused-vars": "off",
     "no-useless-return": "error",
     "object-shorthand": "error",
+
+    "perfectionist/sort-enums": "error",
+    "perfectionist/sort-exports": "error",
+    "perfectionist/sort-interfaces": "error",
+    "perfectionist/sort-object-types": "error",
+    "perfectionist/sort-objects": "error",
+    "perfectionist/sort-union-types": "error",
+
     "prefer-const": "error",
     "prefer-template": "error",
     "quote-props": ["error", "consistent-as-needed"],
 
-    "@stylistic/padding-line-between-statements": paddingLineBetweenStatements,
-
-    "@typescript-eslint/consistent-type-imports": "error",
-    "@typescript-eslint/no-shadow": "error",
-    "@typescript-eslint/no-unused-vars": "error",
-    "@typescript-eslint/no-use-before-define": "error",
-    "@typescript-eslint/no-var-requires": "off",
+    "react-hooks/exhaustive-deps": "error",
+    "react-hooks/rules-of-hooks": "error",
 
     "react/destructuring-assignment": [
       "error",
       "always",
       { destructureInSignature: "always" },
     ],
+    "react/display-name": "off",
     "react/function-component-definition": "off",
     "react/jsx-boolean-value": "error",
+    "react/jsx-curly-brace-presence": "error",
     "react/jsx-filename-extension": "off",
     "react/jsx-fragments": "error",
     "react/jsx-key": ["error", { warnOnDuplicates: true }],
@@ -97,8 +103,10 @@ module.exports = {
     "react/react-in-jsx-scope": "off",
     "react/require-default-props": "off",
     "react/self-closing-comp": "error",
-
-    "react-hooks/exhaustive-deps": "error",
-    "react-hooks/rules-of-hooks": "error",
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
   },
 };

i18n.js

@@ -1,26 +1,26 @@
 module.exports = {
-  locales: ["en", "zh-HK", "zh-CN"],
   defaultLocale: "en",
+  loadLocaleFrom: (lang, ns) =>
+    import(`./public/locales/${lang}/${ns}.json`).then((m) => m.default),
+  locales: ["en", "zh-HK", "zh-CN"],
   pages: {
     "*": ["common"],
     "/": ["home"],
-    "/contact": ["contact"],
     "/about": ["about"],
-    "/terms-and-conditions": ["terms_and_conditions"],
-    "/privacy-policy": ["policy"],
-    "/staking-service": ["staking_service"],
-    "/infrastructure": ["validator_infrastructure"],
-    "/developer-tools": ["developer_tools"],
-    "/products": ["products"],
     "/analytics-tools": ["analytics_tools"],
+    "/author/[author]": ["blog"],
+    "/blog": ["blog"],
+    "/blog/[title]": ["blog"],
+    "/contact": ["contact"],
+    "/developer-tools": ["developer_tools"],
     "/enterprise-solution": ["enterprise_solution"],
+    "/infrastructure": ["validator_infrastructure"],
+    "/privacy-policy": ["policy"],
+    "/products": ["products"],
     "/staking": ["staking"],
+    "/staking-service": ["staking_service"],
     "/staking/[title]": ["staking"],
-    "/blog": ["blog"],
-    "/blog/[title]": ["blog"],
     "/tag/[tag]": ["blog"],
-    "/author/[author]": ["blog"],
+    "/terms-and-conditions": ["terms_and_conditions"],
   },
-  loadLocaleFrom: (lang, ns) =>
-    import(`./public/locales/${lang}/${ns}.json`).then((m) => m.default),
 };

next-sitemap.config.js

@@ -1,11 +1,4 @@
 module.exports = {
-  // These are not tracked for now
-  changefreq: null,
-  autoLastmod: false,
-  priority: null,
-
-  generateRobotsTxt: false,
-  siteUrl: "https://www.forbole.com",
   additionalPaths: async () => {
     if (!process.env.GHOST_PRIVATE_KEY || !process.env.NEXT_PUBLIC_GHOST_API)
       return [];
@@ -29,8 +22,8 @@ module.exports = {
 
     const getTags = () =>
       ghostAdminApi.tags.browse({
-        limit: 1000,
         fields: "slug",
+        limit: 1000,
       });
 
     const [tags, posts] = await Promise.all([getTags(), getPosts()]);
@@ -50,4 +43,9 @@ module.exports = {
         loc,
       }));
   },
+  autoLastmod: false,
+  changefreq: null,
+  generateRobotsTxt: false,
+  priority: null,
+  siteUrl: "https://www.forbole.com",
 };

next.config.js

@@ -9,24 +9,22 @@ const withBundleAnalyzer = bundleAnalyzer({
 });
 
 const baseConfig = nextTranslate({
-  poweredByHeader: false,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
   images: {
     remotePatterns: [
       {
         hostname: "www.gravatar.com",
         protocol: "https",
       },
       {
-        protocol: "https",
         hostname: "www.forbole.com",
+        protocol: "https",
       },
     ],
   },
-  rewrites: async () =>
-    ["/rss", "/rss/"].map((path) => ({
-      destination: "/rss.xml",
-      source: path,
-    })),
+  poweredByHeader: false,
   redirects: async () => [
     {
       destination: "/zh-HK/:path*",
@@ -39,6 +37,11 @@ const baseConfig = nextTranslate({
       source: `${prefix}/native-staking`,
     })),
   ],
+  rewrites: async () =>
+    ["/rss", "/rss/"].map((path) => ({
+      destination: "/rss.xml",
+      source: path,
+    })),
   webpack: (config) => {
     config.module.rules.push({
       test: /\.svg$/,
@@ -47,9 +50,6 @@ const baseConfig = nextTranslate({
 
     return config;
   },
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
 });
 
 module.exports = million.next(withBundleAnalyzer(baseConfig), { auto: true });

package.json

@@ -22,27 +22,27 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.8",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.1",
-    "@mui/lab": "^5.0.0-alpha.157",
-    "@mui/material": "^5.15.1",
+    "@mui/icons-material": "^5.15.2",
+    "@mui/lab": "^5.0.0-alpha.158",
+    "@mui/material": "^5.15.2",
     "@n8tb1t/use-scroll-position": "^2.0.3",
     "@next/bundle-analyzer": "^14.0.4",
     "@socialgouv/matomo-next": "^1.8.0",
     "@tryghost/admin-api": "^1.13.11",
     "@tryghost/content-api": "^1.11.20",
-    "axios": "^1.6.2",
+    "axios": "^1.6.3",
     "dotenv": "^16.3.1",
     "dotenv-defaults": "^5.0.2",
     "framer-motion": "^10.16.16",
     "graphql": "^16.8.1",
-    "isomorphic-dompurify": "^1.13.0",
+    "isomorphic-dompurify": "^2.0.0",
     "jsdom": "^23.0.1",
     "markdown-to-jsx": "^7.3.2",
     "million": "^2.6.4",
-    "moment": "^2.29.4",
+    "moment": "^2.30.1",
     "moment-timezone": "^0.5.43",
     "next": "^14.0.4",
     "next-sitemap": "^4.2.3",
@@ -71,19 +71,21 @@
     "@types/react-dom": "^18.2.18",
     "@types/rss": "^0.0.32",
     "@types/validator": "^13.11.7",
-    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "@typescript-eslint/parser": "^6.15.0",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.0.4",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-perfectionist": "^2.5.0",
     "eslint-plugin-playwright": "^0.20.0",
     "husky": "^8.0.3",
-    "i18next-parser": "^8.9.0",
+    "i18next-parser": "^8.11.0",
     "postcss": "^8.4.32",
     "prettier": "^3.1.1",
     "rss": "^1.2.2",
     "sass": "^1.69.5",
-    "stylelint": "^16.0.2",
+    "stylelint": "^16.1.0",
     "stylelint-config-standard-scss": "^12.0.0",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.0.0",

playwright.config.ts

@@ -8,27 +8,27 @@ if (process.env.E2E_MANUAL !== "true") {
 
 // https://playwright.dev/docs/test-configuration
 export default defineConfig({
-  timeout: 30000,
   globalTimeout: 600000,
+  grepInvert,
   projects: [
     {
       name: "Desktop",
       use: {
-        viewport: { width: 1024, height: 768 },
+        viewport: { height: 768, width: 1024 },
       },
     },
     {
       name: "Mobile",
+      testIgnore: [/backend.spec.ts/],
       use: {
-        viewport: { width: 375, height: 812 },
+        viewport: { height: 812, width: 375 },
       },
-      testIgnore: [/backend.spec.ts/],
     },
   ],
+  testDir: "./e2e",
+  timeout: 30000,
   use: {
     baseURL: "http://localhost:3000",
     trace: "retain-on-failure",
   },
-  testDir: "./e2e",
-  grepInvert,
 });

scripts/rss.xml.ts

@@ -29,10 +29,10 @@ export const main = async () => {
     .filter((p: any) => !p.title.includes(stakingGuidePrefix))
     .forEach((post: any) => {
       feed.item({
-        title: post.title,
+        date: post.created_at,
         description: post.excerpt,
+        title: post.title,
         url: `${site_url}/blog/${post.slug}`,
-        date: post.created_at,
       });
     });
 

src/api/authors/index.ts

@@ -22,10 +22,10 @@ export const getPostsByAuthor = async (query: {
   try {
     const posts = await api.posts.browse({
       filter: `author:${query.author}`,
+      formats: "html",
       include: "tags,authors",
       limit: 5,
       page: query?.page || 1,
-      formats: "html",
     });
 
     return posts ?? null;

src/api/index.ts

@@ -4,7 +4,7 @@ const GhostContentAPI = require("@tryghost/content-api/cjs/content-api");
 
 // Create API instance with site credentials
 export const ghostApi = new GhostContentAPI({
-  url: process.env.NEXT_PUBLIC_GHOST_API,
   key: process.env.NEXT_PUBLIC_GHOST_KEY,
+  url: process.env.NEXT_PUBLIC_GHOST_API,
   version: "v3.0",
 });

src/api/networks/index.ts

@@ -3,18 +3,18 @@ import type { IPost } from "./interface";
 
 /** Gets posts from remote */
 export const getNetworkPosts = async ({
-  limit = 11,
-  page = 1,
   // filter = "tag:-[hash-zhs,hash-zht]",
   filter = "tags:[staking]",
+  limit = 11,
+  page = 1,
 }: IPost) => {
   try {
     return await api.posts.browse({
+      filter,
+      formats: "html",
       include: "tags,authors",
       limit,
       page,
-      filter,
-      formats: "html",
     });
   } catch (err) {
     // eslint-disable-next-line no-console