Bugfix/table cells interactive focusable

[Mahmoud-zino]

Linked Issue

Closes #2168

Description

table cells are focusable only in interactive mode.

Changsets

Instructions: Changesets automate our changelog. If you modify files in /packages/skeleton, run pnpm changeset in the root of the monorepo, follow the prompts, then commit the markdown file. Changes that add features should be minor while chores and bugfixes should be patch. Please prefix the changeset message with feat:, bugfix: or chore:.

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: 234c143

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 5, 2023 5:18pm

[endigo9740]

@Mahmoud-zino I think you're on the right track, but we need to account for a11y here too. While changing the tabindex is correct, it doesn't quite go far enough.

The WAI APG define two types of grid-based UI patterns:

1. Table Pattern - usually a native HTML table, but not interactive
2. Grid Pattern - these are like a table, but interactive (we default to this)

I think we'll likely also need to modify following two roles:

• role="grid" -> role="table" (or remove the role?)
• role="gridcell" -> role="cell" (or remove the role?)

NOTE: when using semantic elements like <table> the use of the explicit role is typically considered redudant, so we might opt to remove the role in the case of a Table pattern

I'm also questioning if we should introduce row and columnheader roles, or if our use of a native HTML table is semantic enough as is. These appear to operate identically between either pattern.

I originally tested stuff like this using this Chrome Extension. Feel free to use it to double check:
https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd

[endigo9740]

@ryceg I know you're fairly knowledgable with the a11y stuff, so I'd welcome your input here as well

[Mahmoud-zino]

@endigo9740 I think it is better to separate the components to grid / table and handling all ARIA rules for each one of them instead of trying to handle both in the same component

[endigo9740]

@Mahmoud-zino if it's only the couple things mentioned I don't think separate components would be needed. Honestly most of the ARIA stuff overlaps as far as I can tell. Anything further abstraction would just make these harder to maintain over time.

[endigo9740]

Hey @Mahmoud-zino, I'm doing PR reviews on Sundays now. Just checking in on this. As far as I can tell we should just need to modify the tools per the requirements I mentioned above. I'll aim to check in on this again Tuesday before the new release. Thanks!

[Mahmoud-zino]

@endigo9740 I implemented the roles you mentioned and gone through the ARIA articles and implemented those that are not redundant roles.
Please feel free to suggest changes if needed.