Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix horizontal card Safari image size bug #2896

Merged
merged 6 commits into from
Dec 13, 2024

Conversation

GCHQ-Developer-847
Copy link
Contributor

@GCHQ-Developer-847 GCHQ-Developer-847 commented Dec 12, 2024

Summary of the changes

Change horizontal card styles so image size is set directly on image to fix issue in Safari where the images were being displayed smaller than they should (you can see this bug on the horizontal card Sizes story in Safari).

The behaviour of the images now matches the behaviour in Chrome.

Also added fixes for audit failures.

Related issue

N/A

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.

Copy link
Contributor

github-actions bot commented Dec 12, 2024

@GCHQ-Developer-847 GCHQ-Developer-847 force-pushed the fix/horizontal-card-image-size-safari branch from 565ab2d to 021a05e Compare December 12, 2024 14:45
@GCHQ-Developer-847 GCHQ-Developer-847 marked this pull request as draft December 12, 2024 15:31
…n image to fix Safari issue

Set horizontal card image size directly on image to fix issue in Safari where image was being
displayed smaller than it should. Add audit fixes.
@GCHQ-Developer-847 GCHQ-Developer-847 force-pushed the fix/horizontal-card-image-size-safari branch from 021a05e to 665a816 Compare December 12, 2024 15:47
@GCHQ-Developer-847 GCHQ-Developer-847 changed the title fix(canary-web-components): set horizontal card image height to 100% … Fix horizontal card Safari image size bug Dec 12, 2024
@GCHQ-Developer-847 GCHQ-Developer-847 marked this pull request as ready for review December 12, 2024 15:57
@mi6 mi6 deleted a comment from github-actions bot Dec 12, 2024
@GCHQ-Developer-847 GCHQ-Developer-847 merged commit 69d7148 into develop Dec 13, 2024
15 of 17 checks passed
@GCHQ-Developer-847 GCHQ-Developer-847 deleted the fix/horizontal-card-image-size-safari branch December 13, 2024 10:30
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.

3 participants