eg-help-popover accessibility issues

[Galen Charlton]

As currently implemented, the eg-help-popover AngularJS directive has a significant accessibility issue: it cannot be invoked via keyboard action as there's no way of giving it focus.

Changing to <span> to a <button> (and presumably with styling to make it not look significantly different) and possibly setting tabindex to 0 should improve it.

Evergreen 3.1+

[Jane Sandberg (sandbergja)]

Good catch, Galen. Just a note for anybody who works on this: I am +1 to changing the styling a bit so that the look of the eg-help-popover remains consistent. However, when the eg-help-popover receives focus, it should still have some type of border to indicate that it has focus.

[Mike Risher (mrisher)]

I pushed a branch with this change:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mrisher/lp1801947-eg-help-popover-accessibility

I didn't add any border as I'm seeing the element with focus automatically highlighted using Chrome.

[Terran McCanna (tmccanna)]

The functionality works well - I can use keyboard controls to tab to it and turn it off and on. The styling looks like a button (see attached) so could be improved, but I'm happy to sign off due to the accessibility improvement:

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/mccanna/lp1801947-eg-help-popover-accessibility-signoff

[Jane Sandberg (sandbergja)]

Thanks, Mike and Terran! This is a good improvement. I added it to master, rel_3_5, and rel_3_4.

I also threw in a follow-up commit that adds type="button" to the <button> tags. This helps when the <eg-help-popover> is used in a form (e.g. the New Bucket forms). Without type="button", it will default to a Submit button, so rather than giving users any help, it just unexpectedly submits the form (see https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#attr-button-type).

[Terran McCanna (tmccanna)]

Good catch, Jane!

[Mike Risher (mrisher)]

Thank you for adding that adjustment, Jane!