Accessibility Issues in Product Page

Description: Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

Helpurl: https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=axeAPI

Description: Ensures every id attribute value of active elements is unique

Helpurl: https://dequeuniversity.com/rules/axe/4.7/duplicate-id-active?application=axeAPI [ { "any": [ { "id": "duplicate-id-active", "data": "field-61", "relatedNodes": [ { "html": "<input class=\"chakra-radioinput\" id=\"field-61\" required=\"\" aria-required=\"true\" type=\"radio\" name=\"environment\" value=\"test\" aria-describedby=\"field-61-helptext\" style=\"border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;\">", "target": [ ".chakra-radioinput[value=\"test\"][type=\"radio\"]" ] }, { "html": "<input class=\"chakra-radioinput\" id=\"field-61\" required=\"\" aria-required=\"true\" type=\"radio\" name=\"environment\" value=\"sandbox\" aria-describedby=\"field-61-helptext\" style=\"border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;\">", "target": [ ".chakra-radioinput[value=\"sandbox\"][type=\"radio\"]" ] }, { "html": "<input class=\"chakra-radioinput\" id=\"field-61\" required=\"\" aria-required=\"true\" type=\"radio\" name=\"environment\" value=\"prod\" aria-describedby=\"field-61-helptext\" style=\"border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;\">", "target": [ "input[value=\"prod\"]" ] }, { "html": "<input class=\"chakra-radioinput\" id=\"field-61\" required=\"\" aria-required=\"true\" type=\"radio\" name=\"environment\" value=\"other\" aria-describedby=\"field-61-helptext\" style=\"border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;\">", "target": [ ".chakra-radioinput[value=\"other\"][type=\"radio\"]" ] } ], "impact": "serious", "message": "Document has active elements with the same id attribute: field-61" } ], "all": [], "none": [], "impact": "serious", "html": "<input class=\"chakra-radioinput\" id=\"field-61\" required=\"\" aria-required=\"true\" type=\"radio\" name=\"environment\" value=\"dev\" checked=\"\" aria-describedby=\"field-61-helptext\" style=\"border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute;\">", "target": [ ".chakra-radio__input[value=\"dev\"][type=\"radio\"]" ], "failureSummary": "Fix any of the following:\n Document has active elements with the same id attribute: field-61" } ]

Description: Ensures every HTML document has a lang attribute

Helpurl: https://dequeuniversity.com/rules/axe/4.7/html-has-lang?application=axeAPI

[ { "any": [ { "id": "has-lang", "data": { "messageKey": "noLang" }, "relatedNodes": [], "impact": "serious", "message": "The element does not have a lang attribute" } ], "all": [], "none": [], "impact": "serious", "html": "<html style=\"--chakra-ui-color-mode:light;\">", "target": [ "html" ], "failureSummary": "Fix any of the following:\n The element does not have a lang attribute" } ]

Description: Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies

Helpurl: https://dequeuniversity.com/rules/axe/4.7/nested-interactive?application=axeAPI

[ { "any": [ { "id": "no-focusable-content", "data": null, "relatedNodes": [ { "html": "<button type=\"button\" class=\"chakra-button css-mwqlde\">", "target": [ ".css-mwqlde" ] } ], "impact": "serious", "message": "Element has focusable descendants" } ], "all": [], "none": [], "impact": "serious", "html": "<button type=\"button\" class=\"chakra-button chakra-menu__menu-button css-dfn8cm\" title=\"Add environment\" data-testid=\"gateway-services-api-add-env-btn\" id=\"menu-button-97\" aria-expanded=\"false\" aria-haspopup=\"menu\" aria-controls=\"menu-list-97\">", "target": [ "#menu-button-97" ], "failureSummary": "Fix any of the following:\n Element has focusable descendants" } ]

Description: Ensures every HTML document has a lang attribute

Helpurl: https://dequeuniversity.com/rules/axe/4.7/html-has-lang?application=axeAPI

Description: Ensures every id attribute value of active elements is unique

Description: Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

Helpurl: https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=axeAPI

Description: Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies

Helpurl: https://dequeuniversity.com/rules/axe/4.7/nested-interactive?application=axeAPI [ { "any": [ { "id": "no-focusable-content", "data": null, "relatedNodes": [ { "html": "<button type=\"button\" class=\"chakra-button css-mwqlde\">", "target": [ "#menu-button-88 > .css-xl71ch > .css-mwqlde.chakra-button[type=\"button\"]" ] } ], "impact": "serious", "message": "Element has focusable descendants" } ], "all": [], "none": [], "impact": "serious", "html": "<button type=\"button\" class=\"chakra-button chakra-menumenu-button css-dfn8cm\" title=\"Add environment\" data-testid=\"gateway-services-api-add-env-btn\" id=\"menu-button-88\" aria-expanded=\"false\" aria-haspopup=\"menu\" aria-controls=\"menu-list-88\">", "target": [ "#menu-button-88" ], "failureSummary": "Fix any of the following:\n Element has focusable descendants" }, { "any": [ { "id": "no-focusable-content", "data": null, "relatedNodes": [ { "html": "<button type=\"button\" class=\"chakra-button css-mwqlde\">", "target": [ "#menu-button-109 > .css-xl71ch > .css-mwqlde.chakra-button[type=\"button\"]" ] } ], "impact": "serious", "message": "Element has focusable descendants" } ], "all": [], "none": [], "impact": "serious", "html": "<button type=\"button\" class=\"chakra-button chakra-menumenu-button css-dfn8cm\" title=\"Add environment\" data-testid=\"auto-test-product-add-env-btn\" id=\"menu-button-109\" aria-expanded=\"false\" aria-haspopup=\"menu\" aria-controls=\"menu-list-109\">", "target": [ "#menu-button-109" ], "failureSummary": "Fix any of the following:\n Element has focusable descendants" } ]

Description: Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

Helpurl: https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=axeAPI

Description: Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

Helpurl: https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=axeAPI

[ { "any": [ { "id": "color-contrast", "data": { "fgColor": "#b0b0b0", "bgColor": "#ffffff", "contrastRatio": 2.16, "fontSize": "12.0pt (16px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<div class=\"css-2e3m9t\">", "target": [ ".css-2e3m9t" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 2.16 (foreground color: #b0b0b0, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<em class=\"chakra-text css-1t28pyd\">No services yet", "target": [ "em" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.16 (foreground color: #b0b0b0, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#0077aa", "bgColor": "#f5f2f0", "contrastRatio": 4.46, "fontSize": "12.0pt (16px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<pre bg=\"white\" style=\"color: black; background: rgb(245, 242, 240); text-shadow: white 0px 1px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto;\">", "target": [ "pre" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<span class=\"token key\" style=\"color: rgb(0, 119, 170);\">plugins", "target": [ ".key.token:nth-child(3)" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#0077aa", "bgColor": "#f5f2f0", "contrastRatio": 4.46, "fontSize": "12.0pt (16px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<pre bg=\"white\" style=\"color: black; background: rgb(245, 242, 240); text-shadow: white 0px 1px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto;\">", "target": [ "pre" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<span class=\"token key\" style=\"color: rgb(0, 119, 170);\">name", "target": [ ".key.token:nth-child(9)" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#0077aa", "bgColor": "#f5f2f0", "contrastRatio": 4.46, "fontSize": "12.0pt (16px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<pre bg=\"white\" style=\"color: black; background: rgb(245, 242, 240); text-shadow: white 0px 1px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto;\">", "target": [ "pre" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<span class=\"token key\" style=\"color: rgb(0, 119, 170);\">tags", "target": [ ".key.token:nth-child(15)" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#0077aa", "bgColor": "#f5f2f0", "contrastRatio": 4.46, "fontSize": "12.0pt (16px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<pre bg=\"white\" style=\"color: black; background: rgb(245, 242, 240); text-shadow: white 0px 1px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto;\">", "target": [ "pre" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<span class=\"token key\" style=\"color: rgb(0, 119, 170);\">enabled", "target": [ ".key.token:nth-child(23)" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#ee9900", "bgColor": "#f5f2f0", "contrastRatio": 2.04, "fontSize": "12.0pt (16px)", "fontWeight": "bold", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<pre bg=\"white\" style=\"color: black; background: rgb(245, 242, 240); text-shadow: white 0px 1px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto;\">", "target": [ "pre" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 2.04 (foreground color: #ee9900, background color: #f5f2f0, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<span class=\"token\" style=\"color: rgb(238, 153, 0); font-weight: bold;\">true", "target": [ ".token:nth-child(26)" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.04 (foreground color: #ee9900, background color: #f5f2f0, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#0077aa", "bgColor": "#f5f2f0", "contrastRatio": 4.46, "fontSize": "12.0pt (16px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<pre bg=\"white\" style=\"color: black; background: rgb(245, 242, 240); text-shadow: white 0px 1px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto;\">", "target": [ "pre" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<span class=\"token key\" style=\"color: rgb(0, 119, 170);\">config", "target": [ ".key.token:nth-child(29)" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#0077aa", "bgColor": "#f5f2f0", "contrastRatio": 4.46, "fontSize": "12.0pt (16px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<pre bg=\"white\" style=\"color: black; background: rgb(245, 242, 240); text-shadow: white 0px 1px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto;\">", "target": [ "pre" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<span class=\"token key\" style=\"color: rgb(0, 119, 170);\">allowed_iss", "target": [ ".key.token:nth-child(33)" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#0077aa", "bgColor": "#f5f2f0", "contrastRatio": 4.46, "fontSize": "12.0pt (16px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<pre bg=\"white\" style=\"color: black; background: rgb(245, 242, 240); text-shadow: white 0px 1px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto;\">", "target": [ "pre" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<span class=\"token key\" style=\"color: rgb(0, 119, 170);\">run_on_preflight", "target": [ ".key.token:nth-child(44)" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#ee9900", "bgColor": "#f5f2f0", "contrastRatio": 2.04, "fontSize": "12.0pt (16px)", "fontWeight": "bold", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<pre bg=\"white\" style=\"color: black; background: rgb(245, 242, 240); text-shadow: white 0px 1px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto;\">", "target": [ "pre" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 2.04 (foreground color: #ee9900, background color: #f5f2f0, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<span class=\"token\" style=\"color: rgb(238, 153, 0); font-weight: bold;\">true", "target": [ ".token:nth-child(47)" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 2.04 (foreground color: #ee9900, background color: #f5f2f0, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#0077aa", "bgColor": "#f5f2f0", "contrastRatio": 4.46, "fontSize": "12.0pt (16px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<pre bg=\"white\" style=\"color: black; background: rgb(245, 242, 240); text-shadow: white 0px 1px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto;\">", "target": [ "pre" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<span class=\"token key\" style=\"color: rgb(0, 119, 170);\">iss_key_grace_period", "target": [ ".key.token:nth-child(50)" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#0077aa", "bgColor": "#f5f2f0", "contrastRatio": 4.46, "fontSize": "12.0pt (16px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<pre bg=\"white\" style=\"color: black; background: rgb(245, 242, 240); text-shadow: white 0px 1px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto;\">", "target": [ "pre" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<span class=\"token key\" style=\"color: rgb(0, 119, 170);\">maximum_expiration", "target": [ ".key.token:nth-child(56)" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#0077aa", "bgColor": "#f5f2f0", "contrastRatio": 4.46, "fontSize": "12.0pt (16px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<pre bg=\"white\" style=\"color: black; background: rgb(245, 242, 240); text-shadow: white 0px 1px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto;\">", "target": [ "pre" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<span class=\"token key\" style=\"color: rgb(0, 119, 170);\">algorithm", "target": [ ".key.token:nth-child(62)" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#0077aa", "bgColor": "#f5f2f0", "contrastRatio": 4.46, "fontSize": "12.0pt (16px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<pre bg=\"white\" style=\"color: black; background: rgb(245, 242, 240); text-shadow: white 0px 1px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto;\">", "target": [ "pre" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<span class=\"token key\" style=\"color: rgb(0, 119, 170);\">claims_to_verify", "target": [ ".key.token:nth-child(66)" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" }, { "any": [ { "id": "color-contrast", "data": { "fgColor": "#0077aa", "bgColor": "#f5f2f0", "contrastRatio": 4.46, "fontSize": "12.0pt (16px)", "fontWeight": "normal", "messageKey": null, "expectedContrastRatio": "4.5:1" }, "relatedNodes": [ { "html": "<pre bg=\"white\" style=\"color: black; background: rgb(245, 242, 240); text-shadow: white 0px 1px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none; padding: 1em; margin: 0.5em 0px; overflow: auto;\">", "target": [ "pre" ] } ], "impact": "serious", "message": "Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" } ], "all": [], "none": [], "impact": "serious", "html": "<span class=\"token key\" style=\"color: rgb(0, 119, 170);\">uri_param_names", "target": [ ".key.token:nth-child(73)" ], "failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 4.46 (foreground color: #0077aa, background color: #f5f2f0, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1" } ]

Description: Ensures all ARIA attributes have valid values

https://dequeuniversity.com/rules/axe/4.7/aria-valid-attr-value?application=axeAPI

[ { "any": [], "all": [ { "id": "aria-valid-attr-value", "data": [ "aria-controls=\"tabs-786--tabpanel-0\"" ], "relatedNodes": [], "impact": "critical", "message": "Invalid ARIA attribute value: aria-controls=\"tabs-786--tabpanel-0\"" } ], "none": [], "impact": "critical", "html": "<button data-testid=\"edit-env-configure-env-tab\" type=\"button\" id=\"tabs-786--tab-0\" role=\"tab\" tabindex=\"0\" aria-selected=\"true\" aria-controls=\"tabs-786--tabpanel-0\" class=\"chakra-tabs__tab css-1s6yx21\" data-index=\"0\">Configure Environment", "target": [ "#tabs-786--tab-0" ], "failureSummary": "Fix all of the following:\n Invalid ARIA attribute value: aria-controls=\"tabs-786--tabpanel-0\"" } ]

Description: Ensures every id attribute value is unique

Helpurl: https://dequeuniversity.com/rules/axe/4.7/duplicate-id?application=axeAPI

[ { "any": [ { "id": "duplicate-id", "data": "2", "relatedNodes": [ { "html": "<div role=\"alert\" id=\"2\" class=\"chakra-alert css-3b6enb\">", "target": [ "#\32 " ] } ], "impact": "minor", "message": "Document has multiple static elements with the same id attribute: 2" } ], "all": [], "none": [], "impact": "minor", "html": "<div role=\"alert\" id=\"2\" class=\"chakra-alert css-3b6enb\">", "target": [ "#\32 " ], "failureSummary": "Fix any of the following:\n Document has multiple static elements with the same id attribute: 2" } ]

Ensure elements that have scrollable content are accessible by keyboard

Helpurl: https://dequeuniversity.com/rules/axe/4.7/scrollable-region-focusable?application=axeAPI

[ { "any": [ { "id": "focusable-content", "data": null, "relatedNodes": [], "impact": "serious", "message": "Element should have focusable content" }, { "id": "focusable-element", "data": null, "relatedNodes": [], "impact": "serious", "message": "Element should be focusable" } ], "all": [], "none": [], "impact": "serious", "html": "<div class=\"chakra-modal__body css-4ogog2\" id=\"chakra-modal--body-791\">", "target": [ "#chakra-modal--body-791" ], "failureSummary": "Fix any of the following:\n Element should have focusable content\n Element should be focusable" } ]

Description: Ensures all ARIA attributes have valid values

Helpurl: https://dequeuniversity.com/rules/axe/4.7/aria-valid-attr-value?application=axeAPI

[ { "any": [], "all": [ { "id": "aria-valid-attr-value", "data": [ "aria-controls=\"tabs-151--tabpanel-1\"" ], "relatedNodes": [], "impact": "critical", "message": "Invalid ARIA attribute value: aria-controls=\"tabs-151--tabpanel-1\"" } ], "none": [], "impact": "critical", "html": "<button data-testid=\"edit-env-configure-services-tab\" type=\"button\" id=\"tabs-151--tab-1\" role=\"tab\" tabindex=\"0\" aria-selected=\"true\" aria-controls=\"tabs-151--tabpanel-1\" class=\"chakra-tabs__tab css-c5pwix\" data-index=\"1\" aria-disabled=\"false\">", "target": [ "#tabs-151--tab-1" ], "failureSummary": "Fix all of the following:\n Invalid ARIA attribute value: aria-controls=\"tabs-151--tabpanel-1\"" } ]

Description: Ensures select element has an accessible name

Helpurl: https://dequeuniversity.com/rules/axe/4.7/select-name?application=axeAPI

[ { "any": [ { "id": "implicit-label", "data": null, "relatedNodes": [], "impact": "critical", "message": "Form element does not have an implicit (wrapped) " }, { "id": "explicit-label", "data": null, "relatedNodes": [], "impact": "critical", "message": "Form element does not have an explicit " }, { "id": "aria-label", "data": null, "relatedNodes": [], "impact": "serious", "message": "aria-label attribute does not exist or is empty" }, { "id": "aria-labelledby", "data": null, "relatedNodes": [], "impact": "serious", "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty" }, { "id": "non-empty-title", "data": { "messageKey": "noAttr" }, "relatedNodes": [], "impact": "serious", "message": "Element has no title attribute" }, { "id": "presentational-role", "data": null, "relatedNodes": [], "impact": "minor", "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\"" } ], "all": [], "none": [], "impact": "critical", "html": "<select data-testid=\"edit-env-services-sort-select\" class=\"chakra-select css-1q1nsaq\"><option value=\"name\">Sort By: Name<option value=\"date\">Sort By: Date Modified", "target": [ "select[data-testid=\"edit-env-services-sort-select\"]" ], "failureSummary": "Fix any of the following:\n Form element does not have an implicit (wrapped) \n Form element does not have an explicit \n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n Element has no title attribute\n Element's default semantics were not overridden with role=\"none\" or role=\"presentation\"" } ]

bcgov / api-services-portal

Accessibility Issues in Product Page #794