S@11y test results - how do we handle the nested interactive elements?

[vovens1]

Started testing S@11y on one of our Salesforce instances - got the following results. Not sure how to proceed in fixing these items.

I understand that scaling to 500% would be addressed by the reflow work, so ok in discounting those results. But how do we fix the nested interactive elements?

Ran query: brazil-build test:local - It's customized in our code package

S@11y results below:

[Chrome 113.0.0.0 darwin #0-0] Error: expect(received).toEqual(expected) // deep equality
[Chrome 113.0.0.0 darwin #0-0]
[Chrome 113.0.0.0 darwin #0-0] Expected: [Error]
[Chrome 113.0.0.0 darwin #0-0] Received: [A11yError: 10 Accessibility issues found
[Chrome 113.0.0.0 darwin #0-0] * (link-name) Links must have discernible text: .action-link
[Chrome 113.0.0.0 darwin #0-0] - Help URL: https://dequeuniversity.com/rules/axe/4.3/link-name·
[Chrome 113.0.0.0 darwin #0-0] * (nested-interactive) Ensure interactive controls are not nested: .slds-is-disabled
[Chrome 113.0.0.0 darwin #0-0] - Help URL: https://dequeuniversity.com/rules/axe/4.3/nested-interactive·
[Chrome 113.0.0.0 darwin #0-0] * (nested-interactive) Ensure interactive controls are not nested: .branding-favorites-list-button
[Chrome 113.0.0.0 darwin #0-0] - Help URL: https://dequeuniversity.com/rules/axe/4.3/nested-interactive·
[Chrome 113.0.0.0 darwin #0-0] * (nested-interactive) Ensure interactive controls are not nested: .slds-global-actions__help
[Chrome 113.0.0.0 darwin #0-0] - Help URL: https://dequeuniversity.com/rules/axe/4.3/nested-interactive·
[Chrome 113.0.0.0 darwin #0-0] * (nested-interactive) Ensure interactive controls are not nested: div[data-aura-rendered-by="\31 37\:220\;a"]
[Chrome 113.0.0.0 darwin #0-0] - Help URL: https://dequeuniversity.com/rules/axe/4.3/nested-interactive·
[Chrome 113.0.0.0 darwin #0-0] * (nested-interactive) Ensure interactive controls are not nested: .menuTriggerLink
[Chrome 113.0.0.0 darwin #0-0] - Help URL: https://dequeuniversity.com/rules/axe/4.3/nested-interactive·
[Chrome 113.0.0.0 darwin #0-0] * (nested-interactive) Ensure interactive controls are not nested: .slds-global-actions__notifications
[Chrome 113.0.0.0 darwin #0-0] - Help URL: https://dequeuniversity.com/rules/axe/4.3/nested-interactive·
[Chrome 113.0.0.0 darwin #0-0] * (nested-interactive) Ensure interactive controls are not nested: .branding-userProfile-button
[Chrome 113.0.0.0 darwin #0-0] - Help URL: https://dequeuniversity.com/rules/axe/4.3/nested-interactive·
[Chrome 113.0.0.0 darwin #0-0] * (meta-viewport-large) Users should be able to zoom and scale the text up to 500%: meta[name="viewport"]:nth-child(2)
[Chrome 113.0.0.0 darwin #0-0] - Help URL: https://dequeuniversity.com/rules/axe/4.3/meta-viewport-large·
[Chrome 113.0.0.0 darwin #0-0] * (meta-viewport-large) Users should be able to zoom and scale the text up to 500%: #vp
[Chrome 113.0.0.0 darwin #0-0] - Help URL: https://dequeuniversity.com/rules/axe/4.3/meta-viewport-large]
[Chrome 113.0.0.0 darwin #0-0] at checkA11yErrorWdio (/Users/yuanhu/workspace/ProservecrmTestAutomation/src/ProservecrmTestAutomation/dist/ui-test/accessibilityWdio.test.js:27:21)
[Chrome 113.0.0.0 darwin #0-0] at runMicrotasks ()
[Chrome 113.0.0.0 darwin #0-0] at async Context. (/Users/yuanhu/workspace/ProservecrmTestAutomation/src/ProservecrmTestAutomation/dist/ui-test/accessibilityWdio.test.js:39:9)

[navateja-alagam]

@vovens1 which package of sa11y are you using? @sa11y/wdio ?

Also, which API? Can you provide a snippet of how sa11y API is being invoked.

[vovens1]

sa11y/jest is the package

I'm assuming your talking about the version of sa11y? If so 4.1.5

[navateja-alagam]

As the a11y rule specified here, it doesn't allow a focusable element to be nested inside an interactive element. You can see through the help url link for examples of what they look like and trace your DOM for any such instances and update DOM to eliminate such patterns because anyway they don't seem semantically correct.

Alternatively, if you think the DOM updation is not feasible easily and at the same time wish to not be bugged with the 'nested-interactive' a11y failure, @sa11y/jest API do provide the ability for rules customization(see below example snipped)

import { base as sa11yBaseRules } from '@sa11y/preset-rules';
const sa11yRules = {
        ...sa11yBaseRules,
        runOnly: {
            type: 'rule',
            values: [...sa11yBaseRules.runOnly.values].filter((rule) => rule !== 'nested-interactive')
        }
};
// get element code
expect(element).toBeAccessible(sa11yRules);

Tip: We would encourage you to be on as latest version as possible of @sa11y/jest, the latest being v5.2.0 (this will get you run a11y checks on latest axe-core and removes any false positives if exist)

[navateja-alagam]

@vovens1 were you able to fix the issue or need any help?

[vovens1]

Our problem runs into the fact that the page was built using OOTB components with native builders, so our dev team doesn't have access to make the changes. I've raised up how to fix given this with the accessibility team at Salesforce.

I will reopen and comment again if there is further assistance needed for this, as it's still an open issue for us.

Thank you!