Feature request - ARIA labels and non-empty contents for links + buttons #2403
Description
Checklist
- I have read and accepted the contributing guidelines.
Is your feature request related to a problem? Please describe
Chirpy theme has some WCAG errors related to (1) empty buttons and (2) empty links.
- I did some looking and while the topbar.html file has
aria-label="Search"for the search-trigger button, the button loses that attribute at some point and the ARIA label is not there after rendering in the browser. All three of the following buttons are empty of text and aria labels.
a.search-trigger
b.sidebar-trigger
c.back-to-top
Note
EDIT
I now see that some of the buttons in question are wrapped inside <aside aria-label=""></aside> elements. oops. Well, they're still empty at least
Describe the solution you'd like
Buttons - aria-labelledby="${correctButton.id}" would cover the unlabeled and then use ​ as button text adjacent to the existing icon elements
Anchor links - we can programmatically insert aria-label="Direct link to {{header.innerText}}" and use ​ to fill the anchor link innerText so it will render for screen readers.
Describe alternatives you've considered
No response