Update brand logo accessible name for screen readers

What does this MR do and why?

Validate how customised logo image and the tanuki-logo are read by screen-readers.

From: !114840 (comment 1324782390)

Non-blocking questions:

• If the SVG used aria-hidden and a .gl-sr-only span was used for the text instead of a title, would you avoid "image" being announced?
• Can the SVG have role="img" so there's no chance of it being traversed?

Proposal

• Update HTML markup to be more robust, replace title attribute with visually-hidden <span> within the link
• Ensure custom logo filename is not read with alt=""
• Hide Tanuki SVG from screen-readers

Changes

Update brand logo accessible name for screen readers

• Remove title attribute from <a>
• Add alt="" to remove custom logo <img> filename being read
• Add .gl-sr-only span containing accessible "Homepage" label for link
• Add aria-hidden to logo wrapper
• Add role="img" to <svg> to remove form being traversed

Screenshots or screen recordings

GitLab logo

OS	Browser	Screen-reader	Before	After
Windows	Chrome	JAWS	current-jaws-chrome	role-img-jaws-chrome
Windows	Firefox	NVDA	current-nvda-firefox	role-img-nvda-firefox
MacOS	Safari	VoiceOver	current-voiceover-safari	role-img-voiceover-safari

Custom logo

OS	Browser	Screen-reader	Before	After
Windows	Chrome	JAWS	current-custom-logo-jaws-chrome	custom-logo-jaws-chrome
Windows	Firefox	NVDA	current-custom-logo-nvda-firefox	custom-logo-nvda-firefox
MacOS	Safari	VoiceOver	current-custom-logo-voiceover-safari	custom-logo-voiceover-safari

How to set up and validate locally

1. Review new navigation logo with screen readers
2. Add custom header logo in /admin/application_settings/appearance and review with screen readers

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #398771 (closed)