Add accessible <FileTree> component to replace ASCII art

[delucis]

Summary

• Closes [A11Y] File lists are currently inaccessible ASCII art representations #2167
• Adds a <FileTree> component to render file hierarchies in a more accessible manner than the ASCII art we use currently. Also in a fancier manner:
  • It’s collapsible!
  • It has file-type icons!
  • Zero JS!

Authoring

Once you import the FileTree component into your file, authoring looks like this:

<FileTree>
- src/
  - pages/
    - **index.astro**
- astro.config.mjs This is the Astro config file
- package.json
</FileTree>

1. A file or directory can be marked as highlighted by bolding it: **index.astro**.
2. Any text following the first space in an item is treated as a comment and styled accordingly, see the astro.config entry above.

Screenshots

Here’s a before/after from the manual install guide:

Before	After

How does this work

The <FileTree> component expects to be passed an unordered list. It passes this list through a rehype pipeline that wraps directories in a <details> element to make them collapsible.

Each filename is passed to a utility based on the Seti UI VS Code icon system to get an icon for the detected file type. This is injected as an inline SVG.

This pipeline also separates the comments and interprets the bold filename as highlighted.

[netlify]

✅ Deploy Preview for astro-docs-2 ready!

Name	Link
🔨 Latest commit	ba8ac99
🔍 Latest deploy log	https://app.netlify.com/sites/astro-docs-2/deploys/639ccda49218d5000942b80b
😎 Deploy Preview	https://deploy-preview-2178--astro-docs-2.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 settings.

[sarah11918]

Super excited for this @delucis! I tested all the docs pages, at various screen sizes and on my phone, and it all looks AMAZINGLY good to me! 🥳

[natemoo-re]

This is so cool!

[yanthomasdev]

Tested with NVDA, it's perfect! Great work @delucis 🙌