[a11y]: The scrollable element <pre> with non-interactive content is not tabbable

[zhanttbj]

Package

carbon-components

Browser

Chrome

Operating System

Windows

Package version

V10

React version

No response

Automated testing tool and ruleset

IBM Accessbility Checker

Assistive technology

No response

Description

===== DEFECT DESCRIPTION =====

Problem 1: The scrollable element

with non-interactive content is not tabbable

I also noticed another one in "Deploy with IBM Cloud Schematics" in the dropdown selectors which is using NestedFilterableDropdown from pal which also has a missing role prop.

=====STEPS TO REPRODUCE =====

Press the "Review Deployment Options" button and select the radio offering "Create from CLI" which will show the CodeSnippet with the accessibility issue which Flannan found.

===== EXPECTED RESULT =====

IBM 2.1.1 Keyboard

https://www.ibm.com/able/requirements/requirements/#2_1_1

This requirement ensures that content can be navigated with a keyboard or keyboard interface. When interactive content is operated using a keyboard, it is accessible to vision impaired people who cannot use devices requiring hand-eye coordination (e.g., a mouse) and by people who use alternative keyboards or input devices that act as keyboard emulators. Keyboard emulators include speech input, sip and puff devices, on-screen keyboards, scanning software, and a variety of assistive technologies. This requirement does not forbid or discourage providing mouse input or other input methods in addition to keyboard operation.

===== SCREEN CAPTURE =====

WCAG 2.1 Violation

No response

Reproduction/example

The scrollable element

 with non-interactive content is not tabbable

Steps to reproduce


Using Static Website: https://dev.console.test.cloud.ibm.com/catalog/architecture/static-website-7fdfef2c-cf6c-4513-aed3-295cfb33623f-global?catalog_query=aHR0cHM6Ly9kZXYuY29uc29sZS50ZXN0LmNsb3VkLmlibS5jb20vY2F0YWxvZz9zZWFyY2g9c3RhdGljI3NlYXJjaF9yZXN1bHRz


Press the "Review Deployment Options" button and select the radio offering "Create from CLI" which will show the CodeSnippet with the accessibility issue which Flannan found.


Code of Conduct

 I agree to follow this project's Code of Conduct
 I checked the current issues for duplicate problems

[tay1orjones]

@zhanttbj In your reproduction link I don't see a "Review Deployment Options" button to be able to select the radio offering "Create from CLI"

Could you reproduce the issue in a stackblitz instead, and post the link back here?

[zhanttbj]

@zhanttbj In your reproduction link I don't see a "Review Deployment Options" button to be able to select the radio offering "Create from CLI"

Could you reproduce the issue in a stackblitz instead, and post the link back here?

Pls login first, then you can see the "Review Deployment Options" button

[tw15egan]

@zhanttbj what version are you on? I am unable to reproduce the issue in the latest version of both v10 and v11

v10: https://v7-react.carbondesignsystem.com/?path=/story/components-codesnippet--singleline

v11: https://react.carbondesignsystem.com/?path=/story/components-codesnippet--singleline

I am able to tab to the code snippet and navigate to the right with the arrow key. Please ensure you are using the "single line" variant.

[zhanttbj]

@tw15egan here is the comments from dev, could you pls check and fix this issue if need? thanks

I was able to apply the value change to type='single' and have the issue removed for the CodeSnippet inside the Create from CLI section. But the same issue persists for the type='multi' as well. Which is showing up for the same component under Work with code. I cannot use the single variant type for the Work with code one, since it needs to show more content as multiple lines of text.

The carbon design team might need to change something for that as well since the same

 tag is present in there.

offering link: https://test.cloud.ibm.com/catalog/ab9dc532-d65f-452e-b509-a08addf9bcf0/architecture/custom-example-6f4d10a7-853e-458c-92e7-b090ec0a6aa4

[tw15egan]

Ahh I see, I have a simple fix that should resolve the issue 👍🏻

[zhanttbj]

@tw15egan could we have this fix also in V10? as now our services are based on carbon V10, thanks

[zhanttbj]

@tw15egan sorry to trouble again, can we have this issue been fix as soon as possible? as this blocks our ACS process, thanks in advance.

[zhanttbj]

@tw15egan sorry, any progress on this issue? this is really block us Accessibility process, could you help on this as soon as possible, thanks in advance,

[tw15egan]

Included as part of v10.59.16

[zhanttbj]

@tw15egan Here is the latest comments from dev, could you help to check and response? thanks

I tried implementing the latest version 10.59.16 but it doesn't seem to have been published to the artifactory. So I can't download the latest changes.

I even tried to find the correct posted version for v10 but this is what I found as the result.
As you can see the latest downloadable version is 10.58.10

Can you please ask the carbon team to investigate.

[tw15egan]

@zhanttbj the packages are released under the v10-next tag on npm. The latest version for the styles (carbon-components) is 10.58.12

The latest version of the react package (carbon-components-react) is 7.59.16

Please have them update to these versions.