fix: fix accessibility violation from CvFileUploader

[caroluchoa]

Contributes to #1355

What did you do?

I've removed the tabindex from the label tag to the div from the cv-wrapper and added a button role to that div to remove role violations.

Why did you do it?

I did that to remove the violation reported on issue #1355. I can not just add a widget role to the label tag because it is label. So in that way, I've moved all the focus/role/tabindex to the child div.

How have you tested it?

I've ran IBM accessibility checker and the violation was gone, with none extra violations added.

Were docs updated if needed?

• [X] N/A
• [ ] No
• [ ] Yes

[netlify[bot]]

✅ Deploy Preview for carbon-components-vue ready!

Name	Link
🔨 Latest commit	47436ff54ade9247709a5c657e369a1d560ef8d8
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-vue/deploys/62f55ebcd3f16700088a3381
😎 Deploy Preview	https://deploy-preview-1356--carbon-components-vue.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify[bot]]

✅ Deploy Preview for carbon-components-vue ready!

Name	Link
🔨 Latest commit	f71045438ed3b0112c3b54c82ad52f5e87460e88
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-vue/deploys/631aa95a87face0008883348
😎 Deploy Preview	https://deploy-preview-1356--carbon-components-vue.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[lee-chase]

Unfortunately, this breaks the Carbon focus styling. It might be possible to rectify by moving the styling class down one level but this would need further verification.

Note this component is based on https://v10-react.carbondesignsystem.com/?path=/story/components-fileuploader--drag-and-drop-upload-container-example-application

To proceed you must demonstrate the component functions in the same way and that no styling is broken.

[caroluchoa]

Unfortunately, this breaks the Carbon focus styling. It might be possible to rectify by moving the styling class down one level but this would need further verification.

Note this component is based on https://v10-react.carbondesignsystem.com/?path=/story/components-fileuploader--drag-and-drop-upload-container-example-application

To proceed you must demonstrate the component functions in the same way and that no styling is broken.

Ok! Thanks Lee! I'm gonna try that out

[caroluchoa]

Unfortunately, this breaks the Carbon focus styling. It might be possible to rectify by moving the styling class down one level but this would need further verification.

Note this component is based on https://v10-react.carbondesignsystem.com/?path=/story/components-fileuploader--drag-and-drop-upload-container-example-application

To proceed you must demonstrate the component functions in the same way and that no styling is broken.

Hi @lee-chase , I have moved the label tag styling to CvWrapper component to avoid breaking the focus styling you mentioned. There was a need of creating a computed property with the classname strings due to the fact that CvWrapper components does not accept Vue dynamic class binding, because the class property inside the wrapper is created like:

return createElement(
        context.props.tagType,
        {
          attrs: context.data.attrs,
          class: `${context.data.class || ''} ${context.data.staticClass || ''}`.trim(),
          style: { ...context.data.staticStyle, ...context.data.style },
          on: context.listeners,
        },

While dynamic class binding sends an object (with classes names as keys and a boolean as value) to context.data.class