Setting up accessibility linting (npm#433)

* Adding required packages and configurations

* Fixes done by npm run lintfix

* Linti errors fixed by disabling some rules

* Fixing lint errors manually

* Addressing comment

theme/.eslintrc.js

@@ -14,8 +14,9 @@ module.exports = {
     '@npmcli',
     'eslint:recommended',
     'plugin:react/recommended',
-    'plugin:jsx-a11y/recommended',
+    'plugin:github/react',
     'plugin:primer-react/recommended',
+    'prettier',
   ],
   settings: {
     react: {
@@ -28,16 +29,18 @@ module.exports = {
     'react/display-name': 'off',
     'eslint-comments/no-use': 'off',
     'no-shadow': 'off',
-    'primer-react/no-system-props': ['warn', { includeUtilityComponents: true }],
+    'primer-react/no-system-props': ['warn', {includeUtilityComponents: true}],
+    'import/no-commonjs': 'off',
+    'no-console': 'off',
   },
   overrides: [
     {
       files: ['gatsby-node.js', 'gatsby-config.js'],
-      env: { node: true, browser: false },
+      env: {node: true, browser: false},
     },
     {
       files: ['test/*', './src/**/__tests__/*'],
-      env: { jest: true },
+      env: {jest: true},
     },
   ],
 }

theme/gatsby-browser.js

@@ -1,2 +1,2 @@
-export { default as wrapPageElement } from './src/components/wrap-page-element'
-export { default as wrapRootElement } from './src/components/wrap-root-element'
+export {default as wrapPageElement} from './src/components/wrap-page-element'
+export {default as wrapRootElement} from './src/components/wrap-root-element'

theme/gatsby-config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 
-module.exports = (themeOptions) => {
+module.exports = themeOptions => {
   return {
     plugins: [
       'gatsby-plugin-styled-components',
@@ -26,9 +26,7 @@ module.exports = (themeOptions) => {
       {
         resolve: 'gatsby-plugin-manifest',
         options: {
-          icon: themeOptions.icon
-            ? path.resolve(themeOptions.icon)
-            : require.resolve('./src/images/favicon.png'),
+          icon: themeOptions.icon ? path.resolve(themeOptions.icon) : require.resolve('./src/images/favicon.png'),
         },
       },
     ],

theme/gatsby-node.js

@@ -6,7 +6,7 @@ const uniqBy = require('lodash.uniqby')
 
 const CONTRIBUTOR_CACHE = new Map()
 
-exports.createSchemaCustomization = ({ actions: { createTypes } }) => {
+exports.createSchemaCustomization = ({actions: {createTypes}}) => {
   createTypes(`
     type Mdx implements Node {
       frontmatter: MdxFrontmatter
@@ -26,10 +26,10 @@ exports.createSchemaCustomization = ({ actions: { createTypes } }) => {
   `)
 }
 
-exports.createPages = async ({ graphql, actions }, themeOptions) => {
-  const repo = themeOptions.repo ? themeOptions.repo : { url: getPkgRepo(readPkgUp.sync().package).browse() }
+exports.createPages = async ({graphql, actions}, themeOptions) => {
+  const repo = themeOptions.repo ? themeOptions.repo : {url: getPkgRepo(readPkgUp.sync().package).browse()}
 
-  const { data } = await graphql(`
+  const {data} = await graphql(`
     {
       allMdx {
         nodes {
@@ -68,15 +68,9 @@ exports.createPages = async ({ graphql, actions }, themeOptions) => {
     data.allMdx.nodes.map(async node => {
       const pagePath = getPath(node)
 
-      const rootAbsolutePath = path.resolve(
-        process.cwd(),
-        themeOptions.repoRootPath || '.'
-      )
+      const rootAbsolutePath = path.resolve(process.cwd(), themeOptions.repoRootPath || '.')
 
-      const fileRelativePath = path.relative(
-        rootAbsolutePath,
-        node.fileAbsolutePath
-      )
+      const fileRelativePath = path.relative(rootAbsolutePath, node.fileAbsolutePath)
 
       const editUrl = getEditUrl(themeOptions, repo, fileRelativePath, node.frontmatter)
 
@@ -98,29 +92,29 @@ exports.createPages = async ({ graphql, actions }, themeOptions) => {
       })
 
       if (node.frontmatter.redirect_from) {
-        node.frontmatter.redirect_from.forEach((from) => {
+        for (const from of node.frontmatter.redirect_from) {
           actions.createRedirect({
             fromPath: from,
-            toPath: '/' + pagePath,
+            toPath: `/${pagePath}`,
             isPermanent: true,
             redirectInBrowser: true,
           })
 
           if (pagePath.startsWith('cli/') && !from.endsWith('index')) {
             actions.createRedirect({
               fromPath: `${from}.html`,
-              toPath: '/' + pagePath,
+              toPath: `/${pagePath}`,
               isPermanent: true,
               redirectInBrowser: true,
             })
           }
-        })
+        }
       }
-    })
+    }),
   )
 }
 
-function getPath (node) {
+function getPath(node) {
   // sites can programmatically override slug, that takes priority
   if (node.fields && node.fields.slug) {
     return node.fields.slug
@@ -132,14 +126,12 @@ function getPath (node) {
   }
 
   // finally, we'll just use the path on disk
-  return path.join(
-    node.parent.relativeDirectory,
-    node.parent.name === 'index' ? '/' : node.parent.name
-  )
+  return path
+    .join(node.parent.relativeDirectory, node.parent.name === 'index' ? '/' : node.parent.name)
     .replace(/\\/g, '/') // Windows paths to forward slashes
 }
 
-function getNameWithOwner (url) {
+function getNameWithOwner(url) {
   const nwo = url.match(/^http(?:s)?:\/\/(?:www\.)?github\.com\/([^/]+\/[^/]+)(?:\/)?$/i)
 
   if (nwo) {
@@ -149,7 +141,7 @@ function getNameWithOwner (url) {
   return null
 }
 
-function getGitHubData (repo, overrideData, filePath) {
+function getGitHubData(repo, overrideData, filePath) {
   const gh = {
     nwo: getNameWithOwner(repo.url),
     branch: 'master',
@@ -168,15 +160,15 @@ function getGitHubData (repo, overrideData, filePath) {
   if (overrideData.github_path) {
     gh.path = overrideData.github_path
   } else if (repo.path) {
-    gh.path = repo.path + '/' + filePath
+    gh.path = `${repo.path}/${filePath}`
   } else {
     gh.path = filePath
   }
 
   return gh
 }
 
-function getEditUrl (themeOptions, repo, filePath, overrideData = { }) {
+function getEditUrl(themeOptions, repo, filePath, overrideData = {}) {
   if (themeOptions.editOnGitHub === false || overrideData.edit_on_github === false) {
     return null
   }
@@ -185,7 +177,7 @@ function getEditUrl (themeOptions, repo, filePath, overrideData = { }) {
   return `https://github.com/${gh.nwo}/edit/${gh.branch}/${gh.path}`
 }
 
-async function fetchContributors (repo, filePath, overrideData = { }, accessToken = '') {
+async function fetchContributors(repo, filePath, overrideData = {}, accessToken = '') {
   const gh = getGitHubData(repo, overrideData, filePath)
 
   const cached = CONTRIBUTOR_CACHE.get(gh)
@@ -206,7 +198,7 @@ async function fetchContributors (repo, filePath, overrideData = { }, accessToke
       }
     }
 
-    const { data } = await axios.request(req)
+    const {data} = await axios.request(req)
 
     const commits = data
       .map(commit => ({
@@ -222,9 +214,7 @@ async function fetchContributors (repo, filePath, overrideData = { }, accessToke
     CONTRIBUTOR_CACHE.set(gh, result)
     return result
   } catch (error) {
-    console.error(
-      `[ERROR] Unable to fetch contributors for ${filePath}. ${error.message}`
-    )
+    console.error(`[ERROR] Unable to fetch contributors for ${filePath}. ${error.message}`)
     return []
   }
 }

theme/gatsby-ssr.js

@@ -1,2 +1,2 @@
-export { default as wrapPageElement } from './src/components/wrap-page-element'
-export { default as wrapRootElement } from './src/components/wrap-root-element'
+export {default as wrapPageElement} from './src/components/wrap-page-element'
+export {default as wrapRootElement} from './src/components/wrap-root-element'

theme/index.js

@@ -1,15 +1,15 @@
-export { default as Caption } from './src/components/caption'
-export { default as Container } from './src/components/container'
-export { default as Contributors } from './src/components/contributors'
-export { Do, DoDontContainer, Dont } from './src/components/do-dont'
-export { default as Frame } from './src/components/frame'
-export { default as Head } from './src/components/head'
-export { default as Header } from './src/components/header'
-export { default as Hero } from './src/components/hero'
-export { default as HeroLayout } from './src/components/hero-layout'
-export { default as Index } from './src/components/index'
-export { default as Note } from './src/components/note'
-export { default as Screenshot } from './src/components/screenshot'
-export { default as Sidebar } from './src/components/sidebar'
-export { default as SourceLink } from './src/components/source-link'
-export { default as StatusLabel } from './src/components/status-label'
+export {default as Caption} from './src/components/caption'
+export {default as Container} from './src/components/container'
+export {default as Contributors} from './src/components/contributors'
+export {Do, DoDontContainer, Dont} from './src/components/do-dont'
+export {default as Frame} from './src/components/frame'
+export {default as Head} from './src/components/head'
+export {default as Header} from './src/components/header'
+export {default as Hero} from './src/components/hero'
+export {default as HeroLayout} from './src/components/hero-layout'
+export {default as Index} from './src/components/index'
+export {default as Note} from './src/components/note'
+export {default as Screenshot} from './src/components/screenshot'
+export {default as Sidebar} from './src/components/sidebar'
+export {default as SourceLink} from './src/components/source-link'
+export {default as StatusLabel} from './src/components/status-label'

theme/package.json

@@ -9,6 +9,7 @@
   "private": true,
   "main": "index.js",
   "license": "MIT",
+  "prettier": "@github/prettier-config",
   "scripts": {
     "test": "jest",
     "lint": "eslint \"**/*.js\"",
@@ -70,15 +71,18 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
+    "@github/prettier-config": "^0.0.6",
     "@npmcli/template-oss": "4.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "babel-jest": "^29.3.1",
-    "eslint": "^8.29.0",
+    "eslint": "^8.33.0",
+    "eslint-plugin-github": "^4.6.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-primer-react": "1.0.1",
     "eslint-plugin-react": "^7.31.11",
     "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1"
+    "jest-environment-jsdom": "^29.3.1",
+    "prettier": "^2.8.3"
   },
   "author": "GitHub Inc.",
   "engines": {

theme/scripts/template-oss/index.js

@@ -6,16 +6,9 @@ module.exports = {
       '.eslintrc.js': false,
     },
   },
-  allowPaths: [
-    '/src',
-    '/gatsby-*.js',
-    '/jest*.js',
-    '/index.js',
-  ],
+  allowPaths: ['/src', '/gatsby-*.js', '/jest*.js', '/index.js'],
   requiredPackages: {
     devDependencies: [],
   },
-  allowedPackages: [
-    'eslint',
-  ],
+  allowedPackages: ['eslint'],
 }

theme/src/aria-live.js

@@ -15,7 +15,7 @@ if (typeof window !== 'undefined') {
 }
 
 // Announce message update to screen reader.
-function announce (message) {
+function announce(message) {
   if (!container || !container.isConnected) {
     /* This condition is for when the aria-live container no longer exists due to nav methods like turbo drive
      which replace the body getting rid of the region. We add the container if it's missing. We then add a delay
@@ -33,7 +33,7 @@ function announce (message) {
 }
 
 // Set aria-live container to message.
-function setContainerContent (message) {
+function setContainerContent(message) {
   if (!container) {
     return
   }
@@ -50,7 +50,7 @@ function setContainerContent (message) {
 }
 
 // Get the global screen reader notice container.
-function createNoticeContainer () {
+function createNoticeContainer() {
   container = document.createElement('div')
   container.setAttribute('aria-live', 'polite')
   container.style.position = 'absolute'