canonical · chillkang · Nov 13, 2024 · Nov 11, 2024 · Nov 11, 2024 · Nov 11, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,6 +1,6 @@
 module.exports = {
   parser: "@typescript-eslint/parser",
-  plugins: ["jest", "react", "@typescript-eslint"],
+  plugins: ["jest", "react", "@typescript-eslint", "jsx-a11y"],
   globals: {
     ga: "readonly",
   },
@@ -16,6 +16,7 @@ module.exports = {
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended",
+    "plugin:jsx-a11y/recommended",
   ],
   parserOptions: {
     sourceType: "module",

diff --git a/package.json b/package.json
@@ -79,6 +79,7 @@
     "eslint": "^8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jest": "27.6.3",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
     "jest": "29.7.0",

diff --git a/static/js/src/interfaces/components/ProvidingCharms/ProvidingCharms.tsx b/static/js/src/interfaces/components/ProvidingCharms/ProvidingCharms.tsx
@@ -23,6 +23,7 @@ function ProvidingCharms({ interfaceData, isCommunity }: Props) {
                     height={170}
                     style={{ width: "100%" }}
                     src={`/${provider.name}/embedded/interface`}
+                    title={`Interface for ${provider.name}`}
                   />
                 </div>
               </Col>

diff --git a/static/js/src/interfaces/components/RequiringCharms/RequiringCharms.tsx b/static/js/src/interfaces/components/RequiringCharms/RequiringCharms.tsx
@@ -23,6 +23,7 @@ function RequiringCharms({ interfaceData, isCommunity }: Props) {
                     height={170}
                     style={{ width: "100%" }}
                     src={`/${requirer.name}/embedded/interface`}
+                    title={`Interface for ${requirer.name}`}
                   />
                 </div>
               </Col>

diff --git a/static/js/src/public/icon-validator/index.tsx b/static/js/src/public/icon-validator/index.tsx
@@ -142,7 +142,7 @@ export default function App() {
                 <>
                   <Row>
                     <Col size={2}>
-                      <img src={icon} style={{ maxWidth: "100%" }} />
+                      <img src={icon} alt="" style={{ maxWidth: "100%" }} />
                     </Col>
                     <Col size={6}>
                       <p>
@@ -229,7 +229,11 @@ export default function App() {
             <Row>
               <Col size={8}>
                 <div className="p-media-object--large">
-                  <img src={icon} className="p-media-object__image is-round" />
+                  <img
+                    src={icon}
+                    alt="Your Charm Icon"
+                    className="p-media-object__image is-round"
+                  />
                   <div className="p-media-object__details">
                     <h1 className="p-media-object__title">Your Charm</h1>
                     <div className="p-media-object__content u-no-margin--bottom">

diff --git a/static/js/src/publisher-admin/pages/Collaboration/Collaboration.tsx b/static/js/src/publisher-admin/pages/Collaboration/Collaboration.tsx
@@ -208,6 +208,14 @@ function Collaboration() {
         onClick={() => {
           setShowSidePanel(false);
         }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === "Escape") {
+            setShowSidePanel(false);
+          }
+        }}
+        role="button"
+        tabIndex={0}
+        aria-label="Close side panel"
       ></div>
       <aside className={`l-aside ${!showSidePanel && "is-collapsed"}`}>
         <InviteCollaborator

diff --git a/static/js/src/publisher-admin/pages/Publicise/Publicise.tsx b/static/js/src/publisher-admin/pages/Publicise/Publicise.tsx
@@ -28,9 +28,9 @@ function Publicise() {
             aria-controls="drawer"
           ></div>
           <nav className="p-side-navigation__drawer">
-            <div className="p-side-navigation__drawer-header">
+            <div className="p-side-navigation__drawer-header" id="drawer">
               <a
-                href="#"
+                href="#drawer"
                 className="p-side-navigation__toggle--in-drawer"
                 aria-controls="drawer"
               >

diff --git a/static/js/src/publisher-admin/pages/Releases/Releases.tsx b/static/js/src/publisher-admin/pages/Releases/Releases.tsx
@@ -177,6 +177,14 @@ export default function Releases() {
         <div
           className="l-aside__overlay"
           onClick={() => setShowSidePanel(false)}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setShowSidePanel(false);
+            }
+          }}
+          aria-label="Close side panel"
         />
       )}
       <AppAside className={`${!showSidePanel && "is-collapsed"}`}>

diff --git a/static/js/src/publisher-admin/pages/Releases/TrackDropdown.tsx b/static/js/src/publisher-admin/pages/Releases/TrackDropdown.tsx
@@ -29,10 +29,16 @@ export function TrackDropdown({
         <div
           className="dropdown-toggle"
           onClick={() => setIsOpen(!isOpen)}
-          role="listbox"
+          role="button"
           aria-haspopup="true"
           id="track-dropdown"
+          tabIndex={0}
           aria-expanded={isOpen}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              setIsOpen(!isOpen);
+            }
+          }}
         >
           {selectedTrack}
           <i className="p-icon--chevron-down u-float-right"></i>
@@ -45,10 +51,18 @@ export function TrackDropdown({
                   key={index}
                   role="option"
                   className="dropdown-item"
+                  tabIndex={0}
+                  aria-selected={option === selectedTrack}
                   onClick={() => {
                     setSelectedTrack(option);
                     setIsOpen(false);
                   }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      setSelectedTrack(option);
+                      setIsOpen(false);
+                    }
+                  }}
                 >
                   <div>
                     {option}

diff --git a/static/js/src/store/components/Packages/Packages.tsx b/static/js/src/store/components/Packages/Packages.tsx
@@ -85,9 +85,16 @@ function Packages() {
               className={`p-filter-panel-overlay u-hide--large ${
                 hideFilters ? "u-hide--small u-hide--medium" : ""
               }`}
+              role="button"
+              tabIndex={0}
               onClick={() => {
                 setHideFilters(true);
               }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  setHideFilters(true);
+                }
+              }}
             ></div>
 
             <div

diff --git a/yarn.lock b/yarn.lock
@@ -2555,6 +2555,11 @@ [email protected], aria-query@^5.0.0:
   dependencies:
     dequal "^2.0.3"
 
+aria-query@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59"
+  integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==
+
 array-buffer-byte-length@^1.0.0, array-buffer-byte-length@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz"
@@ -2563,7 +2568,7 @@ array-buffer-byte-length@^1.0.0, array-buffer-byte-length@^1.0.1:
     call-bind "^1.0.5"
     is-array-buffer "^3.0.4"
 
-array-includes@^3.1.6:
+array-includes@^3.1.6, array-includes@^3.1.8:
   version "3.1.8"
   resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz"
   integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
@@ -2590,7 +2595,7 @@ array.prototype.flat@^1.3.1:
     es-abstract "^1.22.1"
     es-shim-unscopables "^1.0.0"
 
-array.prototype.flatmap@^1.3.1:
+array.prototype.flatmap@^1.3.1, array.prototype.flatmap@^1.3.2:
   version "1.3.2"
   resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz"
   integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
@@ -2625,6 +2630,11 @@ arraybuffer.prototype.slice@^1.0.3:
     is-array-buffer "^3.0.4"
     is-shared-array-buffer "^1.0.2"
 
+ast-types-flow@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
+  integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
+
 astral-regex@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz"
@@ -2659,6 +2669,16 @@ available-typed-arrays@^1.0.7:
   dependencies:
     possible-typed-array-names "^1.0.0"
 
+axe-core@^4.10.0:
+  version "4.10.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.2.tgz#85228e3e1d8b8532a27659b332e39b7fa0e022df"
+  integrity sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==
+
+axobject-query@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
+  integrity sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==
+
 [email protected], babel-jest@^29.7.0:
   version "29.7.0"
   resolved "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz"
@@ -3501,6 +3521,11 @@ [email protected]:
     d3 "^7.8.2"
     lodash-es "^4.17.21"
 
+damerau-levenshtein@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
 data-urls@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz"
@@ -3752,6 +3777,11 @@ emoji-regex@^8.0.0:
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
 enhanced-resolve@^5.0.0, enhanced-resolve@^5.17.1:
   version "5.17.1"
   resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz"
@@ -3961,6 +3991,27 @@ [email protected]:
   dependencies:
     "@typescript-eslint/utils" "^5.10.0"
 
+eslint-plugin-jsx-a11y@^6.10.2:
+  version "6.10.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz#d2812bb23bf1ab4665f1718ea442e8372e638483"
+  integrity sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==
+  dependencies:
+    aria-query "^5.3.2"
+    array-includes "^3.1.8"
+    array.prototype.flatmap "^1.3.2"
+    ast-types-flow "^0.0.8"
+    axe-core "^4.10.0"
+    axobject-query "^4.1.0"
+    damerau-levenshtein "^1.0.8"
+    emoji-regex "^9.2.2"
+    hasown "^2.0.2"
+    jsx-ast-utils "^3.3.5"
+    language-tags "^1.0.9"
+    minimatch "^3.1.2"
+    object.fromentries "^2.0.8"
+    safe-regex-test "^1.0.3"
+    string.prototype.includes "^2.0.1"
+
 [email protected]:
   version "5.1.3"
   resolved "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz"
@@ -5735,7 +5786,7 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-"jsx-ast-utils@^2.4.1 || ^3.0.0":
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.5:
   version "3.3.5"
   resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz"
   integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
@@ -5782,6 +5833,18 @@ known-css-properties@^0.31.0:
   resolved "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.31.0.tgz"
   integrity sha512-sBPIUGTNF0czz0mwGGUoKKJC8Q7On1GPbCSFPfyEsfHb2DyBG0Y4QtV+EVWpINSaiGKZblDNuF5AezxSgOhesQ==
 
+language-subtag-registry@^0.3.20:
+  version "0.3.23"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz#23529e04d9e3b74679d70142df3fd2eb6ec572e7"
+  integrity sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==
+
+language-tags@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
+  integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
+  dependencies:
+    language-subtag-registry "^0.3.20"
+
 layout-base@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz"
@@ -6724,7 +6787,7 @@ object.entries@^1.1.6:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-object.fromentries@^2.0.6:
+object.fromentries@^2.0.6, object.fromentries@^2.0.8:
   version "2.0.8"
   resolved "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz"
   integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
@@ -7781,6 +7844,15 @@ string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
+string.prototype.includes@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz#eceef21283640761a81dbe16d6c7171a4edf7d92"
+  integrity sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+
 string.prototype.matchall@^4.0.8:
   version "4.0.11"
   resolved "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz"