Best Practices / QoL Updates for PUI Website

[mrtrimble]

🔧 Enhancement Request

• Site wide
  • [x] Add rel="external noopener" to external links (safer external linking) - https://mathiasbynens.github.io/rel-noopener/
  • [x] Make sure site link styles aren’t affecting example links
    • [x] Started this already, code to fix found here: https://github.com/ritterim/pui-website/blob/eec4969ba912390ae96cafc8f0ab9af01112790d/assets/scss/_config.scss#L139
    • [x] Need to check and make sure nothing else is being affected though
  • [x] Make sure all links are working
    • [x] Fix getting-started/get-started links
    • [x] Fix launch-pad links
    • [x] Remove/fix link to Platform UI repo on Github (will go to 404 if no access given)
• Homepage
  • [x] Hero
    • [x] Move hero section into <main> to keep content within landmarks
    • [x] Add role="presentation" to animated SVG in hero
    • [ ] Possible Suggestion: Fix button color contrast issue (white text on salmon background) - https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=E58967
  • [x] Figures
    • [x] role="group" ?
      • (see different sources saying this is needed, but imo seems only necessary for a group of similar elements contained within a <figure>, not just single images)
    • [x] Move text under figures to <figcaption>
    • [x] Add alt="" text to images
• Documentation pages
  • [x] Add more specific headers on documentation pages to avoid duplicate headers, potentially only an issue on pages with multiple sections. Example:
    • “Demo” ⇒ “Button Demo”
    • “Markup” ⇒ “Button Markup”
  • [x] Set tabindex="-1" on code snippet hidden textarea used for the copy button (in JS)
• Update Meta Info
  • [x] Update open graph + twitter meta tags
  • [x] Add social sharing image (+ social sharing image alt text!)
  • [x] Add theme-color meta tag:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
  • [x] Add canonical url meta:https://developers.google.com/search/docs/advanced/crawling/consolidate-duplicate-urls
  • [x] Frontmatter page descriptions on every page, for meta description tag

Who is asking for the feature?

@mrtrimble

What business problem is this hoping to solve?

💪 stronger end product!

Estimates

FE - 0.5

[mackenziegates]

@mrtrimble can you please add an estimate to this issue?