fix(FileUploader): remove invalid default role value

[emyarod]

Closes #4208

Closes #4221

This PR moves invalid role attribute on file uploader input <label>s to their child <span>s or <div>s

Changelog

New

• <span> with valid role attribute within <FileUploaderButton />

Changed

• role attribute moved from file uploader <label> to child <span> or <div>

Testing / Reviewing

Ensure no DAP errors are thrown

[abbeyhrt]

Hey, sorry I didn't see that the other variants have the same DAP error, just was looking at the code in that PR, my bad. I'm gonna edit that issue I made to address the issue in the fileUploader itself and your PR (#3872) is good to go for this release! Sorry to add more work on your plate.

[netlify]

Deploy preview for the-carbon-components ready!

Built with commit cdb909a

https://deploy-preview-4209--the-carbon-components.netlify.com

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit cdb909a

https://deploy-preview-4209--carbon-components-react.netlify.com

[netlify]

Deploy preview for carbon-elements ready!

Built with commit cdb909a

https://deploy-preview-4209--carbon-elements.netlify.com

[emyarod]

so do we want to just remove the role attribute entirely for all variants? if so I can update this PR for the legacy versions

I went ahead with the updates but if this is the solution we want to go with I can mark this as ready for review

[abbeyhrt]

Looking into it, I don't know if the ideal solution is just to remove the role="button" since the Add File is acting as a button. You don't have to do this since it's work that we will address on the A11y project but I'm thinking we would ideally change the label to a button or a div with role="button". Not sure if there are complications around that since I haven't tried it out yet.

[abbeyhrt]

what do you think @dakahn?

[emyarod]

yeah the label is for the input element so I'm not sure if changing the label to a different element is something we want to do, but I'm just removing the invalid default value in this PR. it may not need a role at all though given how labels act as triggers for their corresponding inputs IIRC

[abbeyhrt]

It just makes the VO a bit weird, it announces it as a text element and doesn't tell you that it is interactive. It looks like the approach that accessible examples use it to have a span with the role of button as a child to the label and the span announces "Add files" and that it is a button to interact with. looking at this one here at least: https://codepen.io/accessabilly/pen/qNpZJg

[emyarod]

sure I can make that change if that's the approach we want to take

[abbeyhrt]

Up to you, if you want to do this work. Like I said the a11y project can do this or we can wait for DA and see what he says, he'll definitely know more than me about all this lol

[emyarod]

I originally opened this since it was identified as a release ship stopper but now that the issue's changed I'm ok with updating the PR to fit our new requirements

[dakahn]

Sure! Yeah, let's go with @abbeyhrt's fix. Since you've been working in FileUploader land @emyarod it makes sense to have you bust this one out.

[abbeyhrt]

This looks great! Tested with VO and works perfectly, thanks for doing this!

[asudoh]

LGTM 👍 - Thanks @emyarod!