refactor(web): rework product selector

For improving its a11y when using an screen reader. Also makes the PF/Card element clickable as proposed by @lkocman initially ease the selection for mouse users, but keeping the radio inputs as both, visual and keyboard aid.
lkocman · Sep 4, 2024 · ec57cc1 · ec57cc1
1 parent e85aef0
commit ec57cc1
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 28 deletions.
diff --git a/web/src/assets/styles/app.scss b/web/src/assets/styles/app.scss
@@ -43,7 +43,7 @@ button.remove-link:hover {
     height: 20px;
   }
 
-  label {
+  .pf-v5-c-card {
     img {
       width: 80px;
     }

diff --git a/web/src/assets/styles/utilities.scss b/web/src/assets/styles/utilities.scss
@@ -132,6 +132,10 @@
     100% 16px;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 // FIXME: drop as soon as Tip component gets rethought / refactored
 .label-tip .pf-v5-c-label__text {
   display: flex;

diff --git a/web/src/components/product/ProductSelectionPage.jsx b/web/src/components/product/ProductSelectionPage.jsx
@@ -20,11 +20,12 @@
  */
 
 import React, { useState } from "react";
-import { Card, CardBody, Flex, Form, Grid, GridItem, Radio, Split, Stack } from "@patternfly/react-core";
+import { Card, CardBody, Flex, Form, Grid, GridItem, Radio, List, ListItem, Split, Stack, FormGroup } from "@patternfly/react-core";
 import { Page } from "~/components/core";
 import { Center } from "~/components/layout";
 import { useConfigMutation, useProduct } from "~/queries/software";
 import styles from "@patternfly/react-styles/css/utilities/Text/text";
+import { slugify } from "~/utils";
 import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
 
@@ -35,32 +36,35 @@ const ResponsiveGridItem = ({ children }) => (
 );
 
 const Option = ({ product, isChecked, onChange }) => {
+  const id = slugify(product.name);
+  const detailsId = `${id}-details`;
   const logoSrc = `assets/logos/${product.icon}`;
   // TRANSLATORS: %s will be replaced by a product name. E.g., "openSUSE Tumbleweed"
   const logoAltText = sprintf(_("%s logo"), product.name);
 
   return (
-    <ResponsiveGridItem>
-      <Card isRounded>
+    <ListItem>
+      <Card isRounded onClick={onChange} className="cursor-pointer">
         <CardBody>
-          <Radio
-            name="product"
-            id={product.name}
-            label={
-              <Split hasGutter>
-                <img src={logoSrc} alt={logoAltText} />
-                <Stack hasGutter>
-                  <span className={`${styles.fontSizeLg} ${styles.fontWeightBold}`}>{product.name}</span>
-                  <p>{product.description}</p>
-                </Stack>
-              </Split>
-            }
-            isChecked={isChecked}
-            onChange={onChange}
-          />
+          <Split hasGutter>
+            <Radio
+              id={id}
+              name="product"
+              isChecked={isChecked}
+              onChange={onChange}
+              aria-details={detailsId}
+            />
+            <img aria-hidden src={logoSrc} alt={logoAltText} />
+            <Stack hasGutter>
+              <label htmlFor={id} className={`${styles.fontSizeLg} ${styles.fontWeightBold}`}>
+                {product.name}
+              </label>
+              <p id={detailsId}>{product.description}</p>
+            </Stack>
+          </Split>
         </CardBody>
       </Card>
-    </ResponsiveGridItem>
+    </ListItem>
   );
 };
 
@@ -86,14 +90,20 @@ function ProductSelectionPage() {
       <Center>
         <Form id="productSelectionForm" onSubmit={onSubmit}>
           <Grid hasGutter>
-            {products.map((product, index) => (
-              <Option
-                key={index}
-                product={product}
-                isChecked={nextProduct === product}
-                onChange={() => setNextProduct(product)}
-              />
-            ))}
+            <ResponsiveGridItem>
+              <List isPlain>
+                <FormGroup role="radiogroup" label={_("Select a product")}>
+                  {products.map((product, index) => (
+                    <Option
+                      key={index}
+                      product={product}
+                      isChecked={nextProduct === product}
+                      onChange={() => setNextProduct(product)}
+                    />
+                  ))}
+                </FormGroup>
+              </List>
+            </ResponsiveGridItem>
             <ResponsiveGridItem>
               <Flex justifyContent={{ default: "justifyContentFlexEnd" }}>
                 {selectedProduct && !isLoading && <Page.CancelAction navigateTo={-1} />}