2934 add elements to end of cells in icdatatable

[ec1467]

Summary of the changes

Added action-element to ICDataTable cells that can be passed in through the data.

The action-element can be any HTMLElement, so a lot of the checklist would seem to not be applicable. Happy to help with any issues that arise and listen to any comments.

Storybook:

Related issue

#2847
2934

Checklist

General

• Changes to docs package checked and committed.
• All acceptance criteria reviewed and met.

Testing

• Relevant unit tests and visual regression tests added.
• Visual testing against Figma component specification completed.
• Playground stories in React Storybook up to date, with any prop changes and additions addressed.
• Compare performance of modified components against develop using Performance addon in React Storybook.

Accessibility

• Accessibility Insights FastPass performed.
• A11y unit test added and yields no issues.
• A11y plug-in on Storybook yields no issues.
• Manual screen reader testing performed using NVDA and VoiceOver.
• Manual keyboard testing for keyboard controls and logical focus order.
• Correct roles used and ARIA attributes used correctly where required.
• Logical heading structure is maintained, and the HTML elements used for headings can be changed to fit within the wider page structure.

Resize/zoom behaviour

• Page can be zoomed to 400% with no loss of content.
• Screen magnifier used with no issues.
• Text resized to 200% with no loss of content.
• Text spacing increased as per the WCAG 1.4.12 success criterion with no loss of content.

System modes

• Browser setting 'prefers reduced motion' tested. No animations or motion visible whilst this setting is on.
• Windows High Contrast mode tested with no loss of content.
• System light and dark mode tested with no loss of content.
• Browser support tested (Chrome, Safari, Firefox and Edge).

Testing content extremes

• Min/max content examples tested with no loss of content or overflow.
• All prop combinations work without issue.
• Tested for FOUC (Flash of Unstyled Content) in both SSR (Server-Side Rendering) and SSG (Static Site Generation) settings.
• Controlled and uncontrolled input components tested.
• Props/slots can be updated after initial render.

[CLAassistant]

All committers have signed the CLA.

[github-actions]

Welcome 👋

Welcome to the ic-ui-kit repo, thank you for submitting a pull request!

How to contribute

Please read our CONTRIBUTING.md, which explains our ways of working and guidelines for contributions.

Code of Conduct

We'd appreciate it if you could read and abide by our Code of Conduct, as we wish to foster an inclusive and respectful community.

Targeting your pull request

We use develop rather than main as the base for contributions - please make sure your PR is targeting develop.

Signing the CLA

We require all contributors to sign our Contributor License Agreement (CLA) before we can accept a contribution. If you are contributing on behalf of an organization please follow your organization's policies in signing CLAs.

Associated issue

Please make sure that your pull request has an issue open - this allows us to keep track of changes made and offer support where needed.

[ad9242]

Currently seems to be failing due to prettier errors. Please can you run npm run prettier:fix in the root directory & commit any changes it makes (squashing into the appropriate scope commits please)

[ad9242]

Please can you also ensure there is only 1 commit per scope eg, 1 for canary-web-components, 1 for canary-react?

[ad9242]

the audit issue on the repo should be resolved by #2918. please sync your fork & then rebase your branch off develop

[ec1467]

Commits are now squashed. Of the three tasks remaining: not sure what the first one is or if it's relevant? The second one, we don't have any specific Figma designs to compare with. Third one, it has been tested on Chrome and Firefox - currently unable to test on Safari or Edge.

Thanks for your help!