Fix too low contrast in subtitles for selected RadioGroup.Radios

hypothesis · Sep 3, 2024 · 60cebdb · 60cebdb
1 parent 6b219d8
commit 60cebdb
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 8 deletions.
diff --git a/src/components/input/RadioGroup.tsx b/src/components/input/RadioGroup.tsx
@@ -41,12 +41,15 @@ function Radio<T extends RadioValue>({
       role="radio"
       aria-checked={isSelected}
       aria-disabled={disabled}
-      className={classnames('focus-visible-ring rounded-lg px-3 py-2 grow', {
-        'bg-grey-2': isSelected,
-        'hover:bg-grey-1': !isSelected && !disabled,
-        'opacity-70': disabled,
-        'cursor-pointer': !disabled,
-      })}
+      className={classnames(
+        'focus-visible-ring rounded-lg px-3 py-2 grow group',
+        {
+          'bg-grey-3/50': isSelected,
+          'hover:bg-grey-3/25': !isSelected && !disabled,
+          'opacity-70': disabled,
+          'cursor-pointer': !disabled,
+        },
+      )}
       data-value={value}
       onClick={!disabled ? () => onChange(value) : undefined}
       onKeyDown={
@@ -66,7 +69,14 @@ function Radio<T extends RadioValue>({
         {children}
       </div>
       {subtitle && (
-        <div className="pl-4 ml-1.5 mt-1 text-grey-6 text-sm">{subtitle}</div>
+        <div
+          className={classnames('pl-4 ml-1.5 mt-1 text-sm', {
+            'text-grey-6 group-hover:text-grey-7': !isSelected,
+            'text-grey-7': isSelected,
+          })}
+        >
+          {subtitle}
+        </div>
       )}
     </div>
   );

diff --git a/src/components/input/test/RadioGroup-test.js b/src/components/input/test/RadioGroup-test.js
@@ -183,6 +183,19 @@ describe('RadioGroup', () => {
 
   it(
     'should pass a11y checks',
-    checkAccessibility({ content: createComponent }),
+    checkAccessibility([
+      {
+        name: 'no selected item',
+        content: createComponent,
+      },
+      {
+        name: 'selected item',
+        content: () => createComponent({ selected: 'one' }),
+      },
+      {
+        name: 'selected item with subtitle',
+        content: () => createComponent({ selected: 'four' }),
+      },
+    ]),
   );
 });