From e74f17577d336beaba4cdfafc8329f4455326af6 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 25 Jan 2024 17:18:30 -0700 Subject: [PATCH 1/3] Adds example view illustrating Menu regression --- component-catalog/src/Examples/Menu.elm | 61 +++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/component-catalog/src/Examples/Menu.elm b/component-catalog/src/Examples/Menu.elm index de38243e..e883b430 100644 --- a/component-catalog/src/Examples/Menu.elm +++ b/component-catalog/src/Examples/Menu.elm @@ -388,6 +388,67 @@ view ellieLinkConfig state = ] } ] + , Heading.h2 + [ Heading.plaintext "Menu trigger base styles" + , Heading.css [ Css.margin2 Spacing.verticalSpacerPx Css.zero ] + ] + , Table.view [] + [ Table.string + { header = "Trigger type" + , value = .menu + , width = Css.pct 30 + , cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle, Css.fontWeight Css.bold ] + , sort = Nothing + } + , Table.custom + { header = text "Example" + , view = .example + , width = Css.px 300 + , cellStyles = always [ Css.padding2 (Css.px 14) (Css.px 7), Css.verticalAlign Css.middle ] + , sort = Nothing + } + ] + [ { menu = "Menu.defaultTrigger" + , example = + Menu.view (FocusAndToggle "defaultTrigger") + [ Menu.defaultTrigger "Log in" [] + , Menu.isOpen (isOpen "defaultTrigger") + ] + [] + } + , { menu = "Menu.button" + , example = + Menu.view (FocusAndToggle "button") + [ Menu.button "Log in" [] + , Menu.isOpen (isOpen "button") + ] + [] + } + , { menu = "Menu.clickableText" + , example = + Menu.view (FocusAndToggle "clickableText") + [ Menu.clickableText "Log in" [] + , Menu.isOpen (isOpen "clickableText") + ] + [] + } + , { menu = "Menu.clickableSvg with UiIcon.gear" + , example = + Menu.view (FocusAndToggle "clickableSvg") + [ Menu.clickableSvg "Log in" UiIcon.gear [] + , Menu.isOpen (isOpen "clickableSvg") + ] + [] + } + , { menu = "Menu.clickableSvgWithoutIndicator with UiIcon.gear" + , example = + Menu.view (FocusAndToggle "clickableSvgWithoutIndicator") + [ Menu.clickableSvgWithoutIndicator "Log in" UiIcon.gear [] + , Menu.isOpen (isOpen "clickableSvgWithoutIndicator") + ] + [] + } + ] ] From 54a3a00d6384d91f3b2e725251a1dd8114a89943 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Mon, 29 Jan 2024 11:47:31 -0700 Subject: [PATCH 2/3] Fix duped ids --- component-catalog/src/Examples/Menu.elm | 10 ++++++++++ deprecated-modules.csv | 1 + forbidden-imports.toml | 3 +++ 3 files changed, 14 insertions(+) diff --git a/component-catalog/src/Examples/Menu.elm b/component-catalog/src/Examples/Menu.elm index e883b430..dd4b004d 100644 --- a/component-catalog/src/Examples/Menu.elm +++ b/component-catalog/src/Examples/Menu.elm @@ -413,6 +413,8 @@ view ellieLinkConfig state = Menu.view (FocusAndToggle "defaultTrigger") [ Menu.defaultTrigger "Log in" [] , Menu.isOpen (isOpen "defaultTrigger") + , Menu.buttonId "defaultTrigger" + , Menu.menuId "defaultTrigger" ] [] } @@ -421,6 +423,8 @@ view ellieLinkConfig state = Menu.view (FocusAndToggle "button") [ Menu.button "Log in" [] , Menu.isOpen (isOpen "button") + , Menu.buttonId "button" + , Menu.menuId "button" ] [] } @@ -429,6 +433,8 @@ view ellieLinkConfig state = Menu.view (FocusAndToggle "clickableText") [ Menu.clickableText "Log in" [] , Menu.isOpen (isOpen "clickableText") + , Menu.buttonId "clickableText" + , Menu.menuId "clickableText" ] [] } @@ -437,6 +443,8 @@ view ellieLinkConfig state = Menu.view (FocusAndToggle "clickableSvg") [ Menu.clickableSvg "Log in" UiIcon.gear [] , Menu.isOpen (isOpen "clickableSvg") + , Menu.buttonId "clickableSvg" + , Menu.menuId "clickableSvg" ] [] } @@ -445,6 +453,8 @@ view ellieLinkConfig state = Menu.view (FocusAndToggle "clickableSvgWithoutIndicator") [ Menu.clickableSvgWithoutIndicator "Log in" UiIcon.gear [] , Menu.isOpen (isOpen "clickableSvgWithoutIndicator") + , Menu.buttonId "clickableSvgWithoutIndicator" + , Menu.menuId "clickableSvgWithoutIndicator" ] [] } diff --git a/deprecated-modules.csv b/deprecated-modules.csv index d3d542ae..535b213a 100644 --- a/deprecated-modules.csv +++ b/deprecated-modules.csv @@ -2,6 +2,7 @@ Nri.Ui.Accordion.V3,upgrade to V4 Nri.Ui.Block.V4,upgrade to V6 Nri.Ui.Block.V5,upgrade to V6 Nri.Ui.Carousel.V1,upgrade to V2 +Nri.Ui.ClickableText.V3,upgrade to V4 Nri.Ui.WhenFocusLeaves.V1,upgrade to V2 Nri.Ui.Highlighter.V4,upgrade to V5 Nri.Ui.Mark.V2,upgrade to V5 diff --git a/forbidden-imports.toml b/forbidden-imports.toml index d96756ce..37635fe2 100644 --- a/forbidden-imports.toml +++ b/forbidden-imports.toml @@ -88,6 +88,9 @@ hint = 'upgrade to V7' hint = 'upgrade to V2' usages = ['component-catalog-app/Examples/Tooltip.elm'] +[forbidden."Nri.Ui.ClickableText.V3"] +hint = 'upgrade to V4' + [forbidden."Nri.Ui.Container.V1"] hint = 'upgrade to V2' From 86e887fcf363d326edebda27bf3a245a7f083efd Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Thu, 1 Feb 2024 15:25:56 -0700 Subject: [PATCH 3/3] Fix axe checks by changing versions --- package-lock.json | 12 ++++++------ package.json | 2 +- script/puppeteer-tests.js | 1 + 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 330300ed..879362ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -728,9 +728,9 @@ "dev": true }, "node_modules/axe-core": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz", - "integrity": "sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==", + "version": "4.8.3", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.3.tgz", + "integrity": "sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==", "dev": true, "engines": { "node": ">=4" @@ -5351,9 +5351,9 @@ "dev": true }, "axe-core": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz", - "integrity": "sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==", + "version": "4.8.3", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.3.tgz", + "integrity": "sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==", "dev": true }, "balanced-match": { diff --git a/package.json b/package.json index fe736041..b9bf11d0 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "@axe-core/puppeteer": "^4.4.3", "@percy/cli": "^1.4.0", "@percy/puppeteer": "^2.0.2", - "axe-core": "^4.7.0", + "axe-core": "^4.8.3", "browserify": "^17.0.0", "elm-test": "0.19.1-revision12", "expect": "29.5.0", diff --git a/script/puppeteer-tests.js b/script/puppeteer-tests.js index fcb55b9f..002fe1bd 100644 --- a/script/puppeteer-tests.js +++ b/script/puppeteer-tests.js @@ -230,6 +230,7 @@ describe("UI tests", function () { }; const skippedRules = { + Block: ["scrollable-region-focusable"], // Loading's color contrast check seems to change behavior depending on whether Percy snapshots are taken or not Loading: ["color-contrast"], Outline: ["color-contrast"],