Community Settings Page - Form elements must have labels

[fenekku]

Package version (if known): v11 up

Describe the bug

There is a critical WCAG 2.1 AA violation on the community settings page (/communities/<any test community>/settings):

in the page

description from Axe devtool

Unfortunately this may be a wontfix issue. The problem is essentially on React-Semantic-UI side (see
Semantic-Org/Semantic-UI-React#4349 and some others more general): https://github.com/inveniosoftware/invenio-communities/blob/master/invenio_communities/assets/semantic-ui/js/invenio_communities/settings/profile/CommunityProfileForm.js#L403 does the right thing and passes the label with the appropriate for property. It's the react semantic ui that doesn't place the ARIA/accessible attributes properly.

A potential solution could be to implement our own accessible dropdown like we did on the record landing page, but we would need to wire it up with the form field system and that seems really daunting.

So maybe this is a ticket to just keep track of that problem.

[gutumd]

Hello there, I've faced same issue recently with the Dropdown component, and that's how I've solved it:
https://codesandbox.io/p/sandbox/semantic-ui-example-forked-2mvnx6?file=%2Fexample.js%3A38%2C24