[EuiBasicTable][EuiInMemoryTable] Enable more action props to accept an optional callback + fix missing tooltips on collapsed actions

[cee-chen]

Summary

@alvarezmelissa87 is working on a table that needs conditional action descriptions. She was previously attempting to use custom rendered actions to achieve this, but it would be much cleaner all around for their use case for EUI to simply allow actions.description to be a callback which we pass the current item to.

I also added this functionality to the href and data-test-subj keys while here, because why not/it seems useful! Example usage:

<EuiBasicTable
  columns={[
    // ... columns
   {
      name: 'Actions',
      actions: [{
        name: (item) => `Delete ${item.name}`,
        description: (item) => item.someCondition ? 'This does X' : 'This does Y',
        href: (item) => `/delete/${item.id}`,
        'data-test-subj': (item) => `delete-${item.id}`,
      }],
    },
  ]}
/>

Actions tooltip bugfix

While here, I noticed that the action descriptions (which normally renders as a delayed tooltip) was not correctly showing in the collapsed popover menu when they should be, so I added that in d29b623:

Doing this required adding a new toolTipsProps prop to EuiContextMenu so we could pass delay="long" to match the other actions tooltips (ba28dc0)

As always, please review by commit (because I found a few more bugs even more bugs after that 🙈)

QA

• Go to https://eui.elastic.co/pr_7373/#/tabular-content/tables#adding-actions-to-table
• Hover or focus on a non-disabled link action (online rows are enabled, offline rows are disabled)
• Confirm the action description tooltip shows the row name
• Toggle the "Multiple Actions" switch in the top left corner
• Confirm that keyboard tabbing into the actions column correctly makes the action buttons visible, unlike production
• When clicking the "All actions" button, confirm that actions in the popover menu have tooltips, unlike production

General checklist

• Browser QA
  - [ ] Checked in both light and dark modes
  - [ ] Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Updated documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
    - [ ] Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
    - [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  - [ ] Updated the Figma library counterpart

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7373/
• Storybook: https://eui.elastic.co/pr_7373/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 32bce13

History

• 💚 Build #1075 succeeded 86af956
• 💔 Build #1073 failed f65cd36

[1Copenut]

👍 LGTM! I left a couple comments about Safari + VO not honoring tooltips anymore, but that appears to be a change / bug introduced by Apple.

[1Copenut]

This will go a long way to ensuring screen reader users have context when tooltips appear. Users will know exactly what their next keypress will do in terms of adding / editing / deleting.

[1Copenut]

VoiceOver on Safari has changed the way it announces and handles aria-describedby and I haven't found much to explain why. This combination doesn't announce the tooltip text at all, though VoiceOver + Firefox does. Windows screen readers announce the tooltips properly.

The only thing I could find was this issue ticket filed last year that references the WCAG samples not working correctly.

[cee-chen]

I noticed this as well when I was testing tooltips on Safari+VO! But I found the same behavior on the EuiToolTip page as well so I concluded it wasn't my changes causing it 😬 I do worry a bit that maybe something we did on EUI caused it, let me try to dig into it a bit more separately from this PR