refactor(publicationCard): add links and fix accessibily issue

eea · Jul 18, 2022 · 80adf6c · 80adf6c
1 parent ab512be
commit 80adf6c
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 11 deletions.
diff --git a/src/ui/Card/PublicationCard.stories.jsx b/src/ui/Card/PublicationCard.stories.jsx
@@ -28,10 +28,21 @@ export default {
 const Template = (args) => (
   <Container>
     <Card className="publication tertiary">
-      <Image src={args.image} wrapped ui={false} alt="card image" />
+      <Image
+        as="a"
+        href={args.href}
+        src={args.image}
+        wrapped
+        ui={false}
+        alt="card image"
+      />
       <Card.Content>
-        <Card.Meta>{args.tag}</Card.Meta>
-        <Card.Description>{args.description}</Card.Description>
+        <Card.Meta>
+          <a href={args.href}>{args.tag}</a>
+        </Card.Meta>
+        <Card.Description>
+          <a href={args.href}>{args.description}</a>
+        </Card.Description>
       </Card.Content>
     </Card>
   </Container>
@@ -43,4 +54,5 @@ PublicationCard.args = {
   description:
     'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
   image: imageUrl,
+  href: '/#',
 };
diff --git a/src/ui/Card/RelatedContent/RelatedContent.jsx b/src/ui/Card/RelatedContent/RelatedContent.jsx
@@ -32,11 +32,22 @@ RelatedContent.Grid = ({ children, ...rest }) => {
               mobile={12}
             >
               {row.map((item, index) => (
-                <Card className="publication" key={index}>
-                  <Image src={item.image} wrapped ui={false} alt="card image" />
+                <Card className="publication tertiary" key={index}>
+                  <Image
+                    as="a"
+                    href={item.href}
+                    src={item.image}
+                    wrapped
+                    ui={false}
+                    alt="card image"
+                  />
                   <Card.Content>
-                    <Card.Meta>{item.tag}</Card.Meta>
-                    <Card.Description>{item.description}</Card.Description>
+                    <Card.Meta>
+                      <a href={item.href}>{item.tag}</a>
+                    </Card.Meta>
+                    <Card.Description>
+                      <a href={item.href}>{item.description}</a>
+                    </Card.Description>
                   </Card.Content>
                 </Card>
               ))}
@@ -50,11 +61,22 @@ RelatedContent.Grid = ({ children, ...rest }) => {
               tablet={12}
               mobile={12}
             >
-              <Card className="publication">
-                <Image src={item.image} wrapped ui={false} alt="card image" />
+              <Card className="publication tertiary">
+                <Image
+                  as="a"
+                  href={item.href}
+                  src={item.image}
+                  wrapped
+                  ui={false}
+                  alt="card image"
+                />
                 <Card.Content>
-                  <Card.Meta>{item.tag}</Card.Meta>
-                  <Card.Description>{item.description}</Card.Description>
+                  <Card.Meta>
+                    <a href={item.href}>{item.tag}</a>
+                  </Card.Meta>
+                  <Card.Description>
+                    <a href={item.href}>{item.description}</a>
+                  </Card.Description>
                 </Card.Content>
               </Card>
             </Grid.Column>

diff --git a/src/ui/Card/RelatedContent/RelatedContent.stories.jsx b/src/ui/Card/RelatedContent/RelatedContent.stories.jsx
@@ -31,29 +31,34 @@ DefaultEven.args = {
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description: 'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       image: imageUrl,
+      href: '/#',
     },
   ],
   buttonText: 'See All',
@@ -104,17 +109,20 @@ DefaultOdd.args = {
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description: 'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
       image: imageUrl,
+      href: '/#',
     },
     {
       tag: '#Publication',
       description:
         'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
       image: imageUrl,
+      href: '/#',
     },
   ],
   buttonText: 'See All',
@@ -190,6 +198,7 @@ function TabWithRelatedContent({ panes }) {
         menu={{
           secondary: true,
           pointing: true,
+          tabIndex: 0,
         }}
       />
     </Container>
@@ -209,6 +218,7 @@ RelatedContentInTab.args = {
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
       ],
       buttonText: 'See All',
@@ -222,12 +232,14 @@ RelatedContentInTab.args = {
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
           image: imageUrl,
+          href: '/#',
         },
       ],
       buttonText: 'See All',
@@ -241,18 +253,21 @@ RelatedContentInTab.args = {
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
           image: imageUrl,
+          href: '/#',
         },
       ],
       buttonText: 'See All',
@@ -266,30 +281,35 @@ RelatedContentInTab.args = {
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat.',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. ',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis. ',
           image: imageUrl,
+          href: '/#',
         },
         {
           tag: '#Publication',
           description:
             'Leo fermentum sollicitudin suspendisse iaculis feugiat. Eget tellus blandit aenean mattis.',
           image: imageUrl,
+          href: '/#',
         },
       ],
       buttonText: 'See All',