<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: https://github.com/OrchardCMS/OrchardCore/blob/187b0e8ac711d42ef53894057e3e5d3d710ea517/src/OrchardCore.Themes/TheTheme/Views/ToggleTheme.cshtml#L2 https://github.com/OrchardCMS/OrchardCore/blob/187b0e8ac711d42ef53894057e3e5d3d710ea517/src/OrchardCore.Modules/OrchardCore.Users/Views/UserMenu.cshtml#L6

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.

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.