Fix accessibility issues found by Axe

[ironnysh]

What is this PR doing?

Fixes two accessibility issues found when scanning https://playground.wordpress.net (i.e., the generic instance) with axe DevTools.

See discussion in #612.

What problem is it solving?

Makes Playground more accessible.

How is the problem addressed?

Testing environment: Arc/Chromium with the Axe DevTools (axe-core version 4.8.4) extension. The Best Practice option is enabled.

Findings:

• The first test found 22 issues
• The second test, with the wp-admin-bar hidden using CSS, found 4 issues
• The third test, with the Twentytwentyfour navigation hidden using CSS, found 2 issues. Only these last two are generated by Playground.

Left: First scan. Right: Third scan:

---

Both issues affect Playground's address bar area:

Solutions:

1. To solve issue number 1, Form elements should have a visible label:
   change the title attribute of <input class="_input_845jo_7" name="url" type="text" title="URL to visit in the WordPress site, like&quot;/wp-admin&quot;" autocomplete="off" value="/"> to aria-label (i.e., aria-label="URL to visit in the WordPress site, like"/wp-admin"").

2. To solve issue number 2, All page content should be contained by landmarks:
   change <div class="_toolbar_8xy06_95">...</div> to <header aria-label="Playground toolbar" class="_toolbar_8xy06_95">...</header>

See screenshot after applying the changes:

Testing Instructions

Run a scan with axe DevTools (enable the Best Practice option)

[bgrgicak]

Thanks for the improvement! Let's just make sure it passes all tests before merging it.

[adamziel]

This is fantastic! Thank you @ironnysh 🎉 🎉 🎉