search

carbon-design-system / carbon-components-vue

Vue implementation of the Carbon Design System
http://vue.carbondesignsystem.com
Apache License 2.0
598 stars 177 forks source link

test(cv-link): add tests for a11y #1539

Closed halivert closed 8 months ago

halivert commented 9 months ago

Contributes to #1538

What did you do?

Add a11y test for CvLink

Why did you do it?

Adding 3 test cases, for simple link, one in disabled state and the other one with an icon

How have you tested it?

Using testing library, the icon one is failing because needs a label, but I'm not sure how to proceed

Notes

I have an idea of naming convention for accessibility tests, maybe we can use the abbreviation, [Component].a11y.spec.js?

Thank you in advance

davidnixon commented 9 months ago

I updated the guidance a bit to add a link to the React storybook. There might be DOM difference for accessibility there that might be helpful in resolving any test issues.

The accessability rules seems to have changed since Carbon 10 was relesed but still it might be helpful to reference the React Carbon 10 Storybook to see if there are difference in the DOM for accessability.

davidnixon commented 8 months ago

I think the test cases can be resolved by adding alt="" to the component https://github.com/carbon-design-system/carbon-components-vue/blob/337cb41677bb308c20c43938f3485faaf7db87c0/src/components/CvLink/CvLink.vue#L17

halivert commented 8 months ago

Thanks @davidnixon, I wasn't sure if I should update actual component, and I had a lot of work lately, but thanks for your advice 👍🏽 Done in 0d55fcc7c999e9dd1ba418b4302330b1438cab5a