Fix accessibility issues

[delucis]

This is an omnibus PR fixing accessibility paper cuts and improving UX.

Non-visual changes

The following changes address assistive technology compatibility or other technical mark-up details but do not introduce visual differences comparing to the live site:

• Updates Astro logo + “astro.new” lock-up in header so there aren’t two identical links to tab through, grouping them in a single link.
• Use overflow-x-clip instead of overflow-x-hidden in browsers that support it to avoid the main content being focusable in browsers that automatically make elements focusable if they overflow.
• Hide decorative icons from the accessibility tree using aria-hidden="true" in “Open in…” drop-down menus.
• Prefer sr-only text over title attributes in “Open in…” drop-down menus. (Improved support for AT + things like browser auto-translation.)
• Add a page-specific <h1> for assistive technology. Until now the “astro.new” text in the page header was an <h1> for the entire page. That is now regular paragraph text, so that the page gets a descriptive top-level heading.
• Rework heading levels so the page has a better hierarchy of headings.
• Associate headings with landmark regions to better label them.
• Ensure SVGs have explicit width attributes so if CSS fails they don’t take up the entire viewport.
• Optimize “resource” card icons for file size.

Visual changes

• Darken “Open in StackBlitz” button backgrounds slightly so they pass text contrast requirements.

  Before	After

• Add a “Skip to content” link at the start of the document so keyboard users can jump over repeated introductory content to the main page content. Tabbing into the page reveals it in the top-left corner:
  

• Redesign the three “resource” cards (docs, themes, community) at the bottom of the page so they can pass color contrast requirements.

  The current designs are super fun and bright, but basically impossible to get passing colour contrast on without dimming them and losing their vibrancy. The redesign retains the same structure, but limits the splash of colour to the icons.

  I also removed the gradient from the CTA button text on these cards as the purple shade here also fails colour contrast requirements.

  Before

  

  After

  

• Other elements on the page with borders have also been updated to match the borders used on these new card designs. This is a subtle, mostly imperceptible change, but it exchanges a dim gray border (border-astro-gray-500) for a mostly transparent bright gray border. This allows any colours in the background to shine through when present.

  This is most noticeable in the bottom border on the navigation “tab bar” where it passes over the yellow background glow:

  Before	After

Browser testing

Tested on:

• Chrome (macOS, Android)
• Safari (macOS)
• Firefox (macOS, Android)

[netlify]

✅ Deploy Preview for astro-new ready!

Name	Link
🔨 Latest commit	ceeb1db
🔍 Latest deploy log	https://app.netlify.com/sites/astro-new/deploys/6740727cab964f000853d4df
😎 Deploy Preview	https://deploy-preview-77--astro-new.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sarah11918]

Checking in Chrome, the new site feels overall more readable!