feat: add tdsClick event to table rows

[ckrook]

Describe pull-request

This pull-request is regarding adding an tdsClick event to the table rows handle events on a row click.

Issue Linking:

Choose one of the following options

• GitHub: Include issue link
• No issue: Adding a tdsClick event to the table rows

How to test

Provide detailed steps for testing, including any necessary setup.

1. Go to storybook and navigate to the table component > basic row.
2. Check in the console that the event is being triggered upon clicking a row.

Checklist before submission

• All existing tests pass
• I have updated the documentation (if applicable)

Suggested test steps

• Browser testing (Chrome, Safari, Firefox)
• Events

[github-actions]

Playwright test results

 387 passed

Details

 387 tests across 130 suites
 54.3 seconds
 14b56fe

[aws-amplify-eu-north-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-760.d3fazya28914g3.amplifyapp.com

[nathalielindqvist]

Great job, it works well! 🥳 Reading the issue our user submitted they suggest to add a pointer styling to the indicator if the tdsClick event is defined. Is that something we would like to add in this PR?

[mJarsater]

Great job, it works well! 🥳 Reading the issue our user submitted they suggest to add a pointer styling to the indicator if the tdsClick event is defined. Is that something we would like to add in this PR?

I don't think that is gonna work since the tdsClick event is created inside of the component by us and dispatch whether the users adds an event listener or not.

I don't know if you wanna consider making the while row tabable though? If a user is expected to press a row to perform an action I think they should also be able to tab to it, for a11y.

Edit: Making it tabable would create the same problem as abovve though. There is not way (afaik) to know whether an element has an eventlistener attach to it or not. So if you want to make it tablable and use cursor:pointer if there is a click event added I think the only option is to create another prop. Having something like clickable that the use can add if they also attach an eventlistener.

My suspicion is that the user i coming from React or Angular where the event listener would be passed as a prop and we could then simply check if the prop !== undefined. But I don't think that's gonna work with stencil.

[timrombergjakobsson]

Great job, it works well! 🥳 Reading the issue our user submitted they suggest to add a pointer styling to the indicator if the tdsClick event is defined. Is that something we would like to add in this PR?

I don't think that is gonna work since the tdsClick event is created inside of the component by us and dispatch whether the users adds an event listener or not.

I don't know if you wanna consider making the while row tabable though? If a user is expected to press a row to perform an action I think they should also be able to tab to it, for a11y.

Edit: Making it tabable would create the same problem as abovve though. There is not way (afaik) to know whether an element has an eventlistener attach to it or not. So if you want to make it tablable and use cursor:pointer if there is a click event added I think the only option is to create another prop. Having something like clickable that the use can add if they also attach an eventlistener.

My suspicion is that the user i coming from React or Angular where the event listener would be passed as a prop and we could then simply check if the prop !== undefined. But I don't think that's gonna work with stencil.

@mJarsater good catch! Thanks a lot for the feedback. I believe that browsers don’t expose APIs to inspect or retrieve a list of event listeners associated with a particular DOM element? So like you said, it won't work. So I guess we would need to manually ask the user to declare intent (like through a clickable prop). The prop tells the component: "Yes, I want this row to be clickable," without relying on detecting event listeners.

[ckrook]

tab-table.mov

Is this the look we want to have for the table if the clickable is true? (I'm thinking about the outline style on click / Enter keypress)

[theJohnnyMe]

To answer your question about style of focus state:
Instead, you can use mixin from packages/core/src/mixins/_focus-state.scss.

[theJohnnyMe]

I can not get tdsClick working either in preview link or in my local after pulling branch. Not sure what is off, please investigate.
I get this error in console, not sure if it is related to tdsClick not emitting on click:

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[nathalielindqvist]

Has something happened in this PR? There seems to be 67 files changed, was there a rebase that went out of bounce?

[nathalielindqvist]

The tdsClick event returns the tableIds as undefined, is this expected behavior?