[BITV] Header bar a11y issues

[PVince81]

Need to recheck those for #33728 @juliushaertl @CarlSchwan

• [BITV] Focused item overlaps neighbor elements with text and border #35201
• Header navigation needs to be a <nav> landmark
• Logo link should not be h1, but rather have aria-label="to Nextcloud landing page"
• h1 should instead be in the app content, ideally displayed visually #35138
• active app needs to be tagged as aria-current="page"
• "More" menu icon needs to be a <button>, not a link
• When the menu is not focused anymore, it should be closed
• On mobile, active app needs better indication (e.g. via a dot)

[juliusknorr]

Checked everything that is addressed in the above PR.

Keyboard focus overlaps with text

I've been talking with @jancborchardt about this already, but we don't have a good idea how to solve that nicely yet.

Logo link should not be h1, but rather have aria-label="to Nextcloud landing page"
h1 should instead be in the app content, ideally displayed visually

I'll keep this separate from the app menu pr to get it in more quickly for the UI redesign.

app content however might not be suitable as it is replaced by any vue app, if we need it in the content, we need some concept how that would look for the individual apps first @jancborchardt

[JuliaKirschenheuter]

• Logo link should not be h1, but rather have aria-label="to Nextcloud landing page"

Logo link should not be h1

Already done in #35071

but rather have aria-label="to Nextcloud landing page"

aria-label is't needed because <img> has alt

[JuliaKirschenheuter]

• Keyboard focus overlaps with text

@PVince81 you mean

?

Then i guess we need another design

[jancborchardt]

@JuliaKirschenheuter Only using border-bottom instead of all around seems fine in this case then?