Skip to content

feat(web-components): add slot for an icon in ic-tooltip#4260

Draft
GCHQDeveloper416 wants to merge 5 commits intodevelopfrom
734-tooltip-icon
Draft

feat(web-components): add slot for an icon in ic-tooltip#4260
GCHQDeveloper416 wants to merge 5 commits intodevelopfrom
734-tooltip-icon

Conversation

@GCHQDeveloper416
Copy link
Contributor

Summary of the changes

Add slot for icon within tooltip. Tooltip icon stays on left and aligned with first line of text. Alt-text prop enables text to be added for the icons for screenreaders if alt text is given.

Related issue

#734

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.

@github-actions
Copy link
Contributor

View your branch deployment here: https://mi6.github.io/ic-ui-kit/branches/734-tooltip-icon/web-components
View your React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/734-tooltip-icon/react

@github-actions
Copy link
Contributor

@GCHQDeveloper416 GCHQDeveloper416 force-pushed the 734-tooltip-icon branch 19 times, most recently from 55c7a47 to 72d64a4 Compare February 17, 2026 11:58
Add slot for icon within tooltip. Add prop for alt-text for icon. Storybook updated.
…nd without alt-text added

Updating tests. Test for icon on tooltip with and without alt-text added
Updated tooltip stories in react storybook
@GCHQDeveloper416 GCHQDeveloper416 force-pushed the 734-tooltip-icon branch 2 times, most recently from 445a325 to 06b43f8 Compare February 17, 2026 15:25
update cypress visual regression tests
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant