Accessibility of the ZAP HUD

[zersiax]

I'm mostly creating this issue to track work on the accessibility of the HUD. Discussion on this started in zaproxy/zaproxy#4567 as I wasn't aware at the time the HUD has it's own repo. I will reiterate what was said there, and add remediation notes.

• None of the current images for the tools have alt attributes. This isn't terrible given the image will default to filenames which are reasonably descriptive, but we can achieve a win here by adding alt texts that both describe the image as well as clear up confusion. Particularly for the scope icon, setting "out of scope, click to toggle" and "in scope, click to toggle" for the target-grey and target images would make that tool easier to understand. I'm not entirely sure where to do this as vue seems to iterate through all tools in order to render them, codepointers welcome :)
• In the original issue I mention that it is difficult to quickly get to a tool's window, this is mostly fixed by Accessibility fixes #893.
• The history tab seems to always be in the DOM irrespective of it being selected. This more than likely has to do with the way v-show is being used; v-show makes elements vanish using CSS, it's not actually taking them out of the DOM. A quick fix would be to set aria-hidden to true when that particular tab isn't selected, and flip it to false when it is.
• I think the up and down arrows (where the history link and the gear icon are) are used to open the site tree? those have no labels at present, only a font-awesome icon, and it isn't super clear that that is what they do as currently they are just read out as "link". I'd fix it, but I don't know precisely what they do myself at present :)
• The sites tree currently isn't keyboard-accessible, that is a whole issue in itself though. It can be used by screenreader users with some digging around, but the experience could be better. This would either require some serious JS or a switch to a native treeview pattern, though.