<button>s have accessibility and HTML validation issues

[Psichorex]

Hi!

We are using HtmlValidation in our UI Tests at Lombiq at we often have to filter the output logs because they contain the following error logs:

• Prefer to use the native element
• must have accessible text
• Redundant role "button" on

These warnings are all coming from OrchardCore's source html code. We could improve on these as these are kind of standard HTML validations.

Some examples:

OrchardCore/src/OrchardCore.Themes/TheTheme/Views/ToggleTheme.cshtml

Line 2 in 187b0e8

<a role="button" class="nav-link dropdown-toggle" id="bd-theme" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="@T["Toggle theme"]">

OrchardCore/src/OrchardCore.Modules/OrchardCore.Users/Views/UserMenu.cshtml

Line 6 in 187b0e8

<a class="dropdown-toggle nav-link" id="navbarDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button">

Also here is the search result for <a role="button"> https://github.com/search?q=repo%3AOrchardCMS%2FOrchardCore%20role%3D%22button%22&type=code

So we should convert <a role="button"> to <button>
I found somewhere a <button> with no text that triggers must have accessible text
Also found <button role="button">

Locations I found these are mainly the BlogTheme and the TheTheme.

[MikeAlhayek]

So we should convert to

I believe it is okay to have a link with role="button" if we want the link to behave like a button but not when it is a clickable link.

is wrong, so if you find these issues a PR fixing them would be awesome.

I found somewhere a with no text that triggers must have accessible text

I think if you add title attribute the issue will be fixed.

I agree these should be fixed not ignored.

[Skrypt]

It needs to be fixed by the Bootstrap theme guy.

https://github.com/StartBootstrap/

I believe we just copy over the templates and adapt them with OC.
Else, every time we update them we need to re-fix these issues.