better a11y for `<ProjectTypeCard />` + story #4961

dimaMachina · 2024-06-12T13:08:24Z

I think border on selected radio button should have primary color and not white

Screen.Recording.2024-06-12.at.15.09.00.mov

changeset-bot · 2024-06-12T13:08:28Z

⚠️ No Changeset found

Latest commit: 64b8c9a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2024-06-12T13:10:47Z

📚 Storybook Deployment

The latest changes are available as preview in: https://76327512.hive-storybook.pages.dev

dimaMachina · 2024-06-12T13:12:48Z

integration-tests/testkit/auth.ts

- email: string | string,
+ email: string,


github-actions · 2024-06-12T13:14:17Z

🐋 This PR was built and pushed to the following Docker images (tag: 64b8c9a13b8a621642a9d36c0c49d2149dd5b425):

Docker Bake metadata

{
"app": {
  "buildx.build.ref": "builder-5186ecb6-7695-481c-accc-508cff224650/builder-5186ecb6-7695-481c-accc-508cff2246500/i3o1rhccrmz2r5u1fv9basslj",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:c9c779c3d2bfbaf7ba465780da33a59d4a21ec9843662f01cd8ab3b3de403ea0",
    "size": 685
  },
  "containerimage.digest": "sha256:c9c779c3d2bfbaf7ba465780da33a59d4a21ec9843662f01cd8ab3b3de403ea0",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/app:64b8c9a13b8a621642a9d36c0c49d2149dd5b425,ghcr.io/kamilkisiela/graphql-hive/app:radio_group_a11y"
},
"composition-federation-2": {
  "buildx.build.ref": "builder-5186ecb6-7695-481c-accc-508cff224650/builder-5186ecb6-7695-481c-accc-508cff2246500/ldxi5orm3tiy6e2jgh22h74xe",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:a4dbe9bfcac5aa64c41d14c9b77286a12ae82ad17f890c1321d4c4fc79741b74",
    "size": 685
  },
  "containerimage.digest": "sha256:a4dbe9bfcac5aa64c41d14c9b77286a12ae82ad17f890c1321d4c4fc79741b74",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/composition-federation-2:64b8c9a13b8a621642a9d36c0c49d2149dd5b425,ghcr.io/kamilkisiela/graphql-hive/composition-federation-2:radio_group_a11y"
},
"emails": {
  "buildx.build.ref": "builder-5186ecb6-7695-481c-accc-508cff224650/builder-5186ecb6-7695-481c-accc-508cff2246500/ulmmr56huwa45cbkq1rglpf1n",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:b20fbce9807ad7543528f46b05a8616c21c6d4e24c5cda22e9bce67530b221a5",
    "size": 685
  },
  "containerimage.digest": "sha256:b20fbce9807ad7543528f46b05a8616c21c6d4e24c5cda22e9bce67530b221a5",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/emails:64b8c9a13b8a621642a9d36c0c49d2149dd5b425,ghcr.io/kamilkisiela/graphql-hive/emails:radio_group_a11y"
},
"policy": {
  "buildx.build.ref": "builder-5186ecb6-7695-481c-accc-508cff224650/builder-5186ecb6-7695-481c-accc-508cff2246500/iba53591y3xysjdq0pjdumk8t",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:27d6ebb7727bad7a501644579c3ea9417c71385c1c6bae951f766d791a8ad76c",
    "size": 685
  },
  "containerimage.digest": "sha256:27d6ebb7727bad7a501644579c3ea9417c71385c1c6bae951f766d791a8ad76c",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/policy:64b8c9a13b8a621642a9d36c0c49d2149dd5b425,ghcr.io/kamilkisiela/graphql-hive/policy:radio_group_a11y"
},
"rate-limit": {
  "buildx.build.ref": "builder-5186ecb6-7695-481c-accc-508cff224650/builder-5186ecb6-7695-481c-accc-508cff2246500/e3qrcifbei680l5rgmz752lnw",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:a9faa286f0157cd0327884c35ef520e28d3134ddd1a22f616086018297637670",
    "size": 685
  },
  "containerimage.digest": "sha256:a9faa286f0157cd0327884c35ef520e28d3134ddd1a22f616086018297637670",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/rate-limit:64b8c9a13b8a621642a9d36c0c49d2149dd5b425,ghcr.io/kamilkisiela/graphql-hive/rate-limit:radio_group_a11y"
},
"schema": {
  "buildx.build.ref": "builder-5186ecb6-7695-481c-accc-508cff224650/builder-5186ecb6-7695-481c-accc-508cff2246500/z5r01a1m3j9wcnfpsshwzgin9",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:b8ae0cd3ba448ec06bf73094605bb296bc211459766882fd8b0e7e5d4163622b",
    "size": 685
  },
  "containerimage.digest": "sha256:b8ae0cd3ba448ec06bf73094605bb296bc211459766882fd8b0e7e5d4163622b",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/schema:64b8c9a13b8a621642a9d36c0c49d2149dd5b425,ghcr.io/kamilkisiela/graphql-hive/schema:radio_group_a11y"
},
"server": {
  "buildx.build.ref": "builder-5186ecb6-7695-481c-accc-508cff224650/builder-5186ecb6-7695-481c-accc-508cff2246500/scugqtklbfbg7822wngja9euo",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:d4a2e34d89a32ec2c8fe403906c317c429dfb4c01f22812291f351d1b3a64b18",
    "size": 685
  },
  "containerimage.digest": "sha256:d4a2e34d89a32ec2c8fe403906c317c429dfb4c01f22812291f351d1b3a64b18",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/server:64b8c9a13b8a621642a9d36c0c49d2149dd5b425,ghcr.io/kamilkisiela/graphql-hive/server:radio_group_a11y"
},
"storage": {
  "buildx.build.ref": "builder-5186ecb6-7695-481c-accc-508cff224650/builder-5186ecb6-7695-481c-accc-508cff2246500/qj3vpfewomvg93lj8p2b33afh",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:17e2bb16f2ad37cafdd609885139515729c998b373230758f074a5d58baa7004",
    "size": 685
  },
  "containerimage.digest": "sha256:17e2bb16f2ad37cafdd609885139515729c998b373230758f074a5d58baa7004",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/storage:64b8c9a13b8a621642a9d36c0c49d2149dd5b425,ghcr.io/kamilkisiela/graphql-hive/storage:radio_group_a11y"
},
"stripe-billing": {
  "buildx.build.ref": "builder-5186ecb6-7695-481c-accc-508cff224650/builder-5186ecb6-7695-481c-accc-508cff2246500/2u1f4iiahdwj3pobnpgev8od7",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:de748084df4998feb640c49c31c30bfded3701f1f432f8a295cf3900332babb2",
    "size": 685
  },
  "containerimage.digest": "sha256:de748084df4998feb640c49c31c30bfded3701f1f432f8a295cf3900332babb2",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/stripe-billing:64b8c9a13b8a621642a9d36c0c49d2149dd5b425,ghcr.io/kamilkisiela/graphql-hive/stripe-billing:radio_group_a11y"
},
"tokens": {
  "buildx.build.ref": "builder-5186ecb6-7695-481c-accc-508cff224650/builder-5186ecb6-7695-481c-accc-508cff2246500/g308pyj06ksypm0v3wo3hic9r",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:fea3c5d6e76e664bc4068dd0bfe8451f37716c56c03cb022fe0ca2a86bb390f2",
    "size": 685
  },
  "containerimage.digest": "sha256:fea3c5d6e76e664bc4068dd0bfe8451f37716c56c03cb022fe0ca2a86bb390f2",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/tokens:64b8c9a13b8a621642a9d36c0c49d2149dd5b425,ghcr.io/kamilkisiela/graphql-hive/tokens:radio_group_a11y"
},
"usage": {
  "buildx.build.ref": "builder-5186ecb6-7695-481c-accc-508cff224650/builder-5186ecb6-7695-481c-accc-508cff2246500/irdllzj537zp9flxs4sbezx4a",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:8f2c488337dc1d1ef981c6b82f332c671adba4c8e7e213b4d7be90c696f10355",
    "size": 685
  },
  "containerimage.digest": "sha256:8f2c488337dc1d1ef981c6b82f332c671adba4c8e7e213b4d7be90c696f10355",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/usage:64b8c9a13b8a621642a9d36c0c49d2149dd5b425,ghcr.io/kamilkisiela/graphql-hive/usage:radio_group_a11y"
},
"usage-estimator": {
  "buildx.build.ref": "builder-5186ecb6-7695-481c-accc-508cff224650/builder-5186ecb6-7695-481c-accc-508cff2246500/ng6026pl2tyb7sfgdh69udcll",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:fa367566ca0d920bd905e8b19eb1ce0c2f9d0078a1c4aa2958d3e1f1320d6279",
    "size": 685
  },
  "containerimage.digest": "sha256:fa367566ca0d920bd905e8b19eb1ce0c2f9d0078a1c4aa2958d3e1f1320d6279",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/usage-estimator:64b8c9a13b8a621642a9d36c0c49d2149dd5b425,ghcr.io/kamilkisiela/graphql-hive/usage-estimator:radio_group_a11y"
},
"usage-ingestor": {
  "buildx.build.ref": "builder-5186ecb6-7695-481c-accc-508cff224650/builder-5186ecb6-7695-481c-accc-508cff2246500/192xllgh0ku6bd3kj9mgcxqgw",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:d9dc9c9a111d4b486849099e7d44ba56c5c1e1883dd5c167cef7c65eb5408d25",
    "size": 685
  },
  "containerimage.digest": "sha256:d9dc9c9a111d4b486849099e7d44ba56c5c1e1883dd5c167cef7c65eb5408d25",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/usage-ingestor:64b8c9a13b8a621642a9d36c0c49d2149dd5b425,ghcr.io/kamilkisiela/graphql-hive/usage-ingestor:radio_group_a11y"
},
"webhooks": {
  "buildx.build.ref": "builder-5186ecb6-7695-481c-accc-508cff224650/builder-5186ecb6-7695-481c-accc-508cff2246500/lbh4hwzjt9u2fr02kfnmd26uf",
  "containerimage.descriptor": {
    "mediaType": "application/vnd.docker.distribution.manifest.list.v2+json",
    "digest": "sha256:b7be4bca7b0e9e69b6ec455227c42279fe88788c202a2cb0a95919f5e05ea961",
    "size": 685
  },
  "containerimage.digest": "sha256:b7be4bca7b0e9e69b6ec455227c42279fe88788c202a2cb0a95919f5e05ea961",
  "image.name": "ghcr.io/kamilkisiela/graphql-hive/webhooks:64b8c9a13b8a621642a9d36c0c49d2149dd5b425,ghcr.io/kamilkisiela/graphql-hive/webhooks:radio_group_a11y"
}
}

n1ru4l · 2024-06-13T13:30:39Z

packages/web/app/src/components/ui/radio-group.tsx

 const RadioGroupItem = React.forwardRef<
 React.ElementRef<typeof RadioGroupPrimitive.Item>,
 React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, children: _children, ...props }, ref) => {
+>(({ className, children, ...props }, ref) => {
 return (
 <RadioGroupPrimitive.Item
 ref={ref}
 className={cn(
- 'border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+ 'focus-visible:ring-ring relative flex h-full w-full items-center focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50',
 className,
 )}
 {...props}
 >
- <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
- <Circle className="size-2.5 fill-current text-current" />
- </RadioGroupPrimitive.Indicator>
+ <RadioGroupPrimitive.Indicator className="border-primary absolute left-0 size-full rounded-md border-2" />
+ {children}
 </RadioGroupPrimitive.Item>
 );
 });


We don't modify shadcn components (https://ui.shadcn.com/docs/components/radio-group). Instead, it might be better to introduce a new component (e.g. CardRadioGroup/CardRadioGroupItem) for this specific UI.

n1ru4l

See review comments

better a11y for <ProjectTypeCard /> + story

64b8c9a

dimaMachina commented Jun 12, 2024

View reviewed changes

integration-tests/testkit/auth.ts

email: string | string,

email: string,

Copy link

Collaborator Author

dimaMachina Jun 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

duplicate

n1ru4l reviewed Jun 13, 2024

View reviewed changes

n1ru4l requested changes Jun 13, 2024

View reviewed changes

dimaMachina marked this pull request as draft June 13, 2024 13:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

better a11y for `<ProjectTypeCard />` + story #4961

better a11y for `<ProjectTypeCard />` + story #4961

dimaMachina commented Jun 12, 2024 •

edited

Loading

changeset-bot bot commented Jun 12, 2024

github-actions bot commented Jun 12, 2024

dimaMachina Jun 12, 2024

github-actions bot commented Jun 12, 2024

n1ru4l Jun 13, 2024

n1ru4l left a comment

better a11y for <ProjectTypeCard /> + story #4961

Are you sure you want to change the base?

better a11y for <ProjectTypeCard /> + story #4961

Conversation

dimaMachina commented Jun 12, 2024 • edited Loading

changeset-bot bot commented Jun 12, 2024

⚠️ No Changeset found

github-actions bot commented Jun 12, 2024

📚 Storybook Deployment

dimaMachina Jun 12, 2024

Choose a reason for hiding this comment

github-actions bot commented Jun 12, 2024

n1ru4l Jun 13, 2024

Choose a reason for hiding this comment

n1ru4l left a comment

Choose a reason for hiding this comment

better a11y for `<ProjectTypeCard />` + story #4961

better a11y for `<ProjectTypeCard />` + story #4961

dimaMachina commented Jun 12, 2024 •

edited

Loading