Accessibility Bug: No accessible name for the link on the Topcoder logo

[CorgiDev]

Steps to Reproduce:

1. Navigate to the Community page of Topcoder.
2. Open Dev Tools for browser.
3. Inspect the Topcoder logo in the top, left-hand corner of the page.
4. Neither the url and the svg have a proper labeling or alt text to help identify it's purpose to users of assistive technology.

Actual Result:
Inspecting the logo reveals no alt text or proper aria that would make a label for it accessible to assistive technologies. When a screen reader hits the logo link, it just reads off the url, which not considered best practice or considered an accessible label.

Expected Result:
Using assistive technology should cause the logo to be identified with an simple, descriptive name, like just Topcoder.

Device/OS/Browser Information: Desktop / Windows 11 (Build 22454) / Edge (Version 94.0.992.31)

Screenshots or screencast URL:

• Screenshot showing the issue using ANDI Tool
• Screenshot showing the issue using Edge Dev Tools

A simple solution to this would be to add the following attributes to the SVG image that makes up the logo:

• `aria-hidden="true"
• aria-role="presentation"
• alt=" "

Then add the following attribute to the link itself: aria-label="Topcoder"

This appears to be repeated across all pages. If this is not a shared component, the source will need to be updated so all instances of the Topcoder logo have properly accessible labeling.

[nithyaasworld]

Hi @CorgiDev The reviewer should be able to reproduce the issue just by following the steps given in the 'Steps to reproduce' section. Can you please update the steps with more details on what URL to go first before inspecting the Topcoder logo?

Can you also please attach screenshot of the issue? Please let me know if you need any help on this.

[CorgiDev]

@nithyaasworld Updated steps with URL and added screenshots. I think this one is similar to #266 , in that it is a component shared multiple, if not all, pages.