A11y improvements for AppRailTile

[aaroncrockett]

Linked Issue

Closes #2163

Description

I am unsure if these comments relate to the issue so i kept this as a draft for the moment.

<!-- FIXME: resolve a11y warnings -->
<!-- svelte-ignore a11y-no-static-element-interactions -->

I chose role of button as researching how similar functionality was handled, such as:
https://www.perkins.org/

And this article:

https://betterprogramming.pub/how-to-turn-a-div-into-an-accessible-button-in-react-fbf236283d6d

Checklist

Please read and apply all contribution requirements.

• This PR targets the dev branch (NEVER master)
• Documentation reflects all relevant changes
• Branch is prefixed with: docs/, feat/, chore/, bugfix/
• Ensure Svelte and Typescript linting is current - run pnpm check
• Ensure Prettier linting is current - run pnpm format
• All test cases are passing - run pnpm test
• Includes a changeset (if relevant; see above)

[changeset-bot]

🦋 Changeset detected

Latest commit: 14d36cf

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

This PR includes changesets to release 1 package

Name	Type
@skeletonlabs/skeleton	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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
skeleton-docs	✅ Ready (Inspect)	Visit Preview	Nov 7, 2023 4:30pm

[endigo9740]

@aaroncrockett looks like linting failed in the deployment. Can you please verify?

[endigo9740]

@aaroncrockett make sure to keep the PR template in place here on GitHub. The standardization helps. I've updated your post and restored this for you. Also per the checkboxes - those are actual interactive elements, just tap them to check items off.

Per the changes itself, I've followed up with some minor changes.

1. I've removed the comment that suppressed the a11y warning. Related to: Fix Svelte 4 a11y warnings #1708
2. I've gone ahead and made the div a button, let's call a duck a duck here.
3. Changing this caused a type error for the onKeyDown function, so I've resolved that
4. Buttons width collapses by default, so I had to set w-full to resolve a visual bug

All in all this is working great. Feel free to double check, and if you approve please bump up to "ready for review" and I'll merge right away.

Thank you sir!

[aaroncrockett]

@endigo9740 Checking in with an update -- I will be able to look at this again this week probably -- before Friday.

[endigo9740]

Hey @aaroncrockett I've had a chance to review this. The implementation looks to be good, but one issue - you've indicated it's part of create-skeleton-app (the Skeleton CLI app). Go ahead and remove the current changeset and generate again. The Changeset tool should actually make a suggestion based on what project has been modified:

You'll want to choose that first option at the top. Once this is resolved I'm happy to merge.

[endigo9740]

Just making a note to myself: the changeset looks to be updated, this should be clear to merge.