Configure eslint using a11y recommendations (#41274)

witaliy12 · Aug 23, 2023 · 4f7c77a · 4f7c77a
1 parent 664aa75
commit 4f7c77a
Show file tree

Hide file tree

Showing 10 changed files with 324 additions and 88 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -35,8 +35,11 @@ module.exports = {
     },
     {
       files: ["**/*.tsx", "**/*.ts"],
-      plugins: ["@typescript-eslint", "jsx-a11y"],
-      extends: ["plugin:jsx-a11y/recommended"],
+      plugins: ["@typescript-eslint", "primer-react", "jsx-a11y"],
+      extends: [
+        "plugin:primer-react/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
       parser: "@typescript-eslint/parser",
       rules: {
         camelcase: "off",

diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx
@@ -108,7 +108,10 @@ export const DefaultLayout = (props: Props) => {
           </>
         )}
       </Head>
-      <a href="#main-content" className="sr-only color-bg-accent-emphasis color-fg-on-emphasis">
+      <a
+        href="#main-content"
+        className="visually-hidden skip-button color-bg-accent-emphasis color-fg-on-emphasis"
+      >
         Skip to main content
       </a>
       <Header />

diff --git a/components/page-header/Breadcrumbs.tsx b/components/page-header/Breadcrumbs.tsx
@@ -36,7 +36,7 @@ export const Breadcrumbs = ({ inHeader }: Props) => {
             const title = `${breadcrumb.title}`
             return [
               !breadcrumb.href ? (
-                <span data-testid="breadcrumb-title" key={title} title={title} className="px-2">
+                <span data-testid="breadcrumb-title" key={title} className="px-2">
                   {breadcrumb.title}
                 </span>
               ) : (

diff --git a/components/page-header/DeprecationBanner.tsx b/components/page-header/DeprecationBanner.tsx
@@ -26,11 +26,7 @@ export const DeprecationBanner = () => {
         <p>
           <b className="text-bold">
             <span dangerouslySetInnerHTML={{ __html: message }} />{' '}
-            <span
-              data-date={enterpriseServerReleases.nextDeprecationDate}
-              data-format="%B %d, %Y"
-              title={enterpriseServerReleases.nextDeprecationDate}
-            >
+            <span data-date={enterpriseServerReleases.nextDeprecationDate} data-format="%B %d, %Y">
               {enterpriseServerReleases.nextDeprecationDate}
             </span>
             .