mirror of
https://github.com/shoelace-style/shoelace.git
synced 2026-01-12 11:09:13 +00:00
3f80ada6a2
* revise icon documentation Screen readers would completley pass over the listing if icons as `<i class=“fa fa-*”></i>` largely means nothing to a screen reader. Updated the example icons to have a `role=“img”` and `aria-label` to announce what type of icon was being represented. In the `button` examples, added an `aria-hidden=“true”` attribute, so that the icons were not interpreted by screen readers. Revised the wording of some parts of the documentation to make wording more concise. * template accessibility updates * remove “logo” from alt value. While the image is of the shoelace logo, it also serves as the heading to the website. So hearing “Shoelace logo” as the `h1` of the document is very strange. * move the `main` element to a different location. Previously the `main` wrapped the navigation and the primary content of the document. This update moves the `main` to the primary content wrapper, to allow screen reader users a means to easily skip past the navigation. * template updates round 2 * update shoelace link in footer to say “shoelace - home” rather than “shoelace logo”. being that this is a link, this provides better context that the link will take a user to the home page, rather than to a “shoelace logo”. * add `aria-label` to twitter link to better align with github link announcements * add `aria-current=“page”` via jQuery script. Now the current navigation item will be announced as “current page” to those that can’t see the `current` css class styling.