diff --git a/.eslintrc.js b/.eslintrc.js index 3c8a12fe9..7225dc677 100644 --- 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 index 83d99ab83..e77656157 100644 --- 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 index 351c2b64e..54b8c755a 100644 --- 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}`} /> diff --git a/static/js/src/interfaces/components/RequiringCharms/RequiringCharms.tsx b/static/js/src/interfaces/components/RequiringCharms/RequiringCharms.tsx index 5a811e121..9fe6e05af 100644 --- 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}`} /> diff --git a/static/js/src/public/icon-validator/index.tsx b/static/js/src/public/icon-validator/index.tsx index 6cc5a5ad3..e94ac5ecc 100644 --- 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() { <> - +

@@ -229,7 +229,11 @@ export default function App() {

- + Your Charm Icon

Your Charm

diff --git a/static/js/src/publisher-admin/pages/Collaboration/Collaboration.tsx b/static/js/src/publisher-admin/pages/Collaboration/Collaboration.tsx index 3fda11626..353a6ebaa 100644 --- 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" >