diff --git a/app/javascript/article-form/components/__tests__/ArticleCoverImage.test.jsx b/app/javascript/article-form/components/__tests__/ArticleCoverImage.test.jsx index 11e291b82..7efe0d403 100644 --- a/app/javascript/article-form/components/__tests__/ArticleCoverImage.test.jsx +++ b/app/javascript/article-form/components/__tests__/ArticleCoverImage.test.jsx @@ -21,13 +21,19 @@ describe('', () => { }); it('should have no a11y violations', async () => { + // TODO: The axe custom rules here should be removed when the below issue is fixed + // https://github.com/forem/forem/issues/13947 + const customAxeRules = { + 'nested-interactive': { enabled: false }, + }; + const { container } = render( , ); - const results = await axe(container); + const results = await axe(container, { rules: customAxeRules }); expect(results).toHaveNoViolations(); }); diff --git a/app/javascript/article-form/components/__tests__/Form.test.jsx b/app/javascript/article-form/components/__tests__/Form.test.jsx index 35c16decd..c6de89f69 100644 --- a/app/javascript/article-form/components/__tests__/Form.test.jsx +++ b/app/javascript/article-form/components/__tests__/Form.test.jsx @@ -6,11 +6,18 @@ import { Form } from '../Form'; let bodyMarkdown; let mainImage; +// TODO: These image uploader axe custom rules here should be removed when the below issue is fixed +// https://github.com/forem/forem/issues/13947 +const imageUploadAxeRules = { + 'nested-interactive': { enabled: false }, +}; + // Axe flags an error for the multi-line combobox we use for Autosuggest, since a combobox should be a single line input. // This is a known issue documented on https://github.com/forem/forem/pull/13044, and these custom rules only apply to the two tests referencing them below. const customAxeRules = { 'aria-allowed-role': { enabled: false }, 'aria-required-children': { enabled: false }, + ...imageUploadAxeRules, }; describe('
', () => { diff --git a/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx b/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx index e0c3e4387..1c35de721 100644 --- a/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx +++ b/app/javascript/article-form/components/__tests__/ImageUploader.test.jsx @@ -21,8 +21,14 @@ describe('', () => { }); it('should have no a11y violations', async () => { + // TODO: The axe custom rules here should be removed when the below issue is fixed + // https://github.com/forem/forem/issues/13947 + const customAxeRules = { + 'nested-interactive': { enabled: false }, + }; + const { container } = render(); - const results = await axe(container); + const results = await axe(container, { rules: customAxeRules }); expect(results).toHaveNoViolations(); }); @@ -106,12 +112,8 @@ describe('', () => { }), ); - const { - findByTitle, - getByDisplayValue, - getByLabelText, - queryByText, - } = render(); + const { findByTitle, getByDisplayValue, getByLabelText, queryByText } = + render(); const inputEl = getByLabelText(/Upload an image/i); const file = new File(['(⌐□_□)'], 'chucknorris.png', { @@ -119,7 +121,7 @@ describe('', () => { }); fireEvent.change(inputEl, { target: { files: [file] } }); - let uploadingImage = queryByText(/uploading.../i); + const uploadingImage = queryByText(/uploading.../i); expect(uploadingImage).toBeDefined(); diff --git a/app/javascript/chat/__tests__/content.test.jsx b/app/javascript/chat/__tests__/content.test.jsx index 64cf12ccd..00275b317 100644 --- a/app/javascript/chat/__tests__/content.test.jsx +++ b/app/javascript/chat/__tests__/content.test.jsx @@ -35,11 +35,17 @@ const getLoadingUserData = () => ({ describe('', () => { describe('as loading-user', () => { it('should have no a11y violations', async () => { + // TODO: The axe custom rules here should be removed when the below issue is fixed + // https://github.com/forem/forem/issues/14101 + const customAxeRules = { + 'nested-interactive': { enabled: false }, + }; + const channelRequestResource = getChannelRequestData(); const { container } = render( , ); - const results = await axe(container); + const results = await axe(container, { rules: customAxeRules }); expect(results).toHaveNoViolations(); }); @@ -66,9 +72,15 @@ describe('', () => { describe('as channel-request', () => { it('should have no a11y violations', async () => { + // TODO: The axe custom rules here should be removed when the below issue is fixed + // https://github.com/forem/forem/issues/14101 + const customAxeRules = { + 'nested-interactive': { enabled: false }, + }; + const loadinUserResource = getLoadingUserData(); const { container } = render(); - const results = await axe(container); + const results = await axe(container, { rules: customAxeRules }); expect(results).toHaveNoViolations(); }); diff --git a/app/javascript/modCenter/singleArticle/__tests__/singleArticle.test.jsx b/app/javascript/modCenter/singleArticle/__tests__/singleArticle.test.jsx index 2c90401cb..fcf42c123 100644 --- a/app/javascript/modCenter/singleArticle/__tests__/singleArticle.test.jsx +++ b/app/javascript/modCenter/singleArticle/__tests__/singleArticle.test.jsx @@ -18,6 +18,12 @@ const getTestArticle = () => ({ describe('', () => { it('should have no a11y violations', async () => { + // TODO: The axe custom rules here should be removed when the below issue is fixed + // https://github.com/forem/forem/issues/14100 + const customAxeRules = { + 'nested-interactive': { enabled: false }, + }; + const { container } = render( @@ -28,7 +34,7 @@ describe('', () => { /> , ); - const results = await axe(container); + const results = await axe(container, { rules: customAxeRules }); expect(results).toHaveNoViolations(); }); @@ -83,8 +89,7 @@ describe('', () => { id: 2, title: 'An article title that is quite very actually rather extremely long with all things considered', - path: - 'an-article-title-that-is-quite-very-actually-rather-extremely-long-with-all-things-considered-fi8', + path: 'an-article-title-that-is-quite-very-actually-rather-extremely-long-with-all-things-considered-fi8', publishedAt: '2019-06-24T09:32:10.590Z', cachedTagList: '', user: { diff --git a/package.json b/package.json index 7aa06ad00..253ed7369 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,7 @@ "homepage": "https://github.com/thepracticaldev/dev.to#readme", "devDependencies": { "@stoplight/spectral": "5.9.1", - "@storybook/addon-a11y": "^6.2.9", + "@storybook/addon-a11y": "^6.3.1", "@storybook/addon-actions": "^6.2.9", "@storybook/addon-docs": "^6.3.1", "@storybook/addon-knobs": "^6.2.9", diff --git a/yarn.lock b/yarn.lock index fc28e1318..5a1ceac6f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2101,20 +2101,20 @@ "@stoplight/yaml-ast-parser" "0.0.48" tslib "^1.12.0" -"@storybook/addon-a11y@^6.2.9": - version "6.2.9" - resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-6.2.9.tgz#8386d73343db03c15d07f6bf927a4030d441d1ff" - integrity sha512-wo7nFpEqEeiHDsRKnhqe2gIHZ9Z7/Aefw570kBgReU5tKlmrb5rFAfTVBWGBZlLHWeJMsFsRsWrWrmkf1B52OQ== +"@storybook/addon-a11y@^6.3.1": + version "6.3.1" + resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-6.3.1.tgz#376f380f99855ee7171b97fa92995ad7c723f719" + integrity sha512-UFBm4NWHV1tm/DfIjFmZeG2Csfv1rh5vsqbllMiTXnvuKAFSTxMTzyk/mEy4wSDAC58+MAyiJ+x6JM8oQKfUTQ== dependencies: - "@storybook/addons" "6.2.9" - "@storybook/api" "6.2.9" - "@storybook/channels" "6.2.9" - "@storybook/client-api" "6.2.9" - "@storybook/client-logger" "6.2.9" - "@storybook/components" "6.2.9" - "@storybook/core-events" "6.2.9" - "@storybook/theming" "6.2.9" - axe-core "^4.1.1" + "@storybook/addons" "6.3.1" + "@storybook/api" "6.3.1" + "@storybook/channels" "6.3.1" + "@storybook/client-api" "6.3.1" + "@storybook/client-logger" "6.3.1" + "@storybook/components" "6.3.1" + "@storybook/core-events" "6.3.1" + "@storybook/theming" "6.3.1" + axe-core "^4.2.0" core-js "^3.8.2" global "^4.4.0" lodash "^4.17.20" @@ -2694,6 +2694,19 @@ qs "^6.10.0" telejson "^5.3.2" +"@storybook/channel-postmessage@6.3.1": + version "6.3.1" + resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.3.1.tgz#a255f89b8fdac62f26b20eec6e95e432db25b2a6" + integrity sha512-6+luEe2H/84ZYCfcNgH5WCYtUbSIJiMjKFsV17iRVLECRxX8PtxxH5zB3kzhpAngp9WwKDEAS0T1+lEZoHh2Yw== + dependencies: + "@storybook/channels" "6.3.1" + "@storybook/client-logger" "6.3.1" + "@storybook/core-events" "6.3.1" + core-js "^3.8.2" + global "^4.4.0" + qs "^6.10.0" + telejson "^5.3.2" + "@storybook/channels@5.3.21": version "5.3.21" resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.3.21.tgz#53ba622b171d68b3b102983a62aa05149a49497b" @@ -2809,6 +2822,30 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" +"@storybook/client-api@6.3.1": + version "6.3.1" + resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.3.1.tgz#a375142b5a49499afa060de10a81ecbbb6904aa1" + integrity sha512-LZrJ5zUT88n2VIf4c+3IkWXWmBzpz5DMc9ly2KOPywzgAPkTOwRzaNY6lg2ozMhN262N5meRAST86kYRYG3DKw== + dependencies: + "@storybook/addons" "6.3.1" + "@storybook/channel-postmessage" "6.3.1" + "@storybook/channels" "6.3.1" + "@storybook/client-logger" "6.3.1" + "@storybook/core-events" "6.3.1" + "@storybook/csf" "0.0.1" + "@types/qs" "^6.9.5" + "@types/webpack-env" "^1.16.0" + core-js "^3.8.2" + global "^4.4.0" + lodash "^4.17.20" + memoizerific "^1.11.3" + qs "^6.10.0" + regenerator-runtime "^0.13.7" + stable "^0.1.8" + store2 "^2.12.0" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/client-logger@5.3.21": version "5.3.21" resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.3.21.tgz#912c83b0d358e70acad1ad4abe199de4c38b109f" @@ -5105,10 +5142,10 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59" integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA== -axe-core@^4.0.1, axe-core@^4.0.2, axe-core@^4.1.1: - version "4.1.3" - resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.3.tgz#64a4c85509e0991f5168340edc4bedd1ceea6966" - integrity sha512-vwPpH4Aj4122EW38mxO/fxhGKtwWTMLDIJfZ1He0Edbtjcfna/R3YB67yVhezUMzqc3Jr3+Ii50KRntlENL4xQ== +axe-core@^4.0.1, axe-core@^4.0.2, axe-core@^4.2.0: + version "4.2.3" + resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.2.3.tgz#2a3afc332f0031b42f602f4a3de03c211ca98f72" + integrity sha512-pXnVMfJKSIWU2Ml4JHP7pZEPIrgBO1Fd3WGx+fPBsS+KRGhE4vxooD8XBGWbQOIVSZsVK7pUDBBkCicNu80yzQ== axios@^0.18.0, axios@^0.21.1: version "0.21.1"