svelteuidev / svelteui

SvelteUI Monorepo
https://svelteui.dev
MIT License
1.3k stars 62 forks source link

NativeSelect should use required instead of aria-required #283

Closed schindld closed 1 year ago

schindld commented 1 year ago

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

When NativeSelect renders a <select>, it should use required instead of aria-required.

https://github.com/svelteuidev/svelteui/blob/dbe081726b7bfe3ae54f4ddb31463f7b40b6622c/packages/svelteui-core/src/components/NativeSelect/NativeSelect.svelte#L98

The line aria-required={required} should be changed to required={required} because it fails validation.

When a semantic HTML <input>, <select>, or <textarea> must have a value, it should have the required attribute applied to it. When form controls are created using non-semantic elements, such as a <div> with a role of checkbox, the aria-required attribute should be included, with a value of true.

-From MDN aria-required reference

In which browser(s) did the problem occur?

Chrome

Steps To Reproduce

Use a NativeSelect with data

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Relevant Assets

https://accessibilityinsights.io/info-examples/web/aria-allowed-attr/

BeeMargarida commented 1 year ago

Thank you for pointing this out. Would you like to open the PR with the fix?

BeeMargarida commented 1 year ago

In this case, the only fix is to remove the aria-required, since required is already passed to the <select>