Multiple components: `aria-label` is showing up as an attribute when a blank string is passed in.

[austinoneil]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have read the contributing guidelines

Describe the issue

Given the following HTML:

<modus-component aria-label=""></modus-component>

library should render the following:

<modus-component aria-label="">
    <div></div>
</modus-component>

But instead renders the following:

<modus-component aria-label="">
    <div **aria-label=""**></div>
</modus-component>

**emphasis mine**

(Note: In this case, modus-component is an abstraction and the div could be multiple layers deep or could be a span).

An example of where this is happening is on the modal component. Notice how aria-label="" is found on the .modus-modal div.

Reduced test cases

No response

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Firefox

What is the issue regarding ?

@trimble-oss/modus-web-components

What version of npm package are you using ?

No response

Priority

Low

What product/project are you using Modus Components for ?

I'm just an open-source contributor.

What is your team/division name ?

Not employed with Trimble

Are you willing to contribute ?

Maybe

Are you using Modus Web Components in production ?

no

[github-actions[bot]]

Hello @austinoneil! Thanks for opening an issue. The Modus core team will get back to you soon (usually within 24-hours) and provide guidance on how to proceed. Contributors are welcome to participate in the discussion and provide their input on how to best solve the issue, and even submit a PR if they want to.

Please wait until the issue is ready to be worked on before submitting a PR, or you can reach out to the core team if it is time bound. For trivial things, or bugs that don't change the expected behaviors and UI, you can go ahead and make a PR.