Improve Sverdle a11y

[geoffrich]

This PR makes some a11y improvements to the Sverdle demo.

use hidden inputs - previously, each letter guess was its own unlabeled input. There wasn't a great way to label them, and they weren't inputs you could directly interact with, so I changed them to hidden inputs instead and used <div>s for the tiles. This resolves 30 Axe errors.

respect reduced motion for confetti and jiggle animation.

add visually hidden headings. This resolves an Axe error (no h1) and also gives landmarks so assistive tech users can easily navigate between rows.

add visually hidden text for letter state - previously, whether a letter was a correct guess or not was solely conveyed visually. This adds visually hidden text to identify a letter's state to non-sighted users. The description is taken from the NYT Wordle's hidden text (present/absent/correct/empty)

remove aria-selected - this ARIA attribute is only valid on gridcell, option, row and tab roles and was not being used on elements with those roles, so I removed it.

increase color contrast on selected tile - possibly controversial. The previous color used for a "correct" letter had really poor contrast (2.3). The new color gets to 4.6, and I think it looks okay? The variable I changed is only used for Sverdle right now.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

[changeset-bot]

🦋 Changeset detected

Latest commit: 9ca222e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
create-svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[dummdidumm]

Thank you! To me the new color is actually more pleasant to the eyes, so +1 on that change from me