Uds 2104 - Update news and event cards for accessibility

packages/component-events/README.md

@@ -3,7 +3,6 @@ ASU Web Standards-based implementation of events component.
 
 This component is the React implementation of the old D8 Events component(https://github.com/ASU-CLAS/asu-react-d8events) but reusing a lot of the components already developed in `components-core` and `component-carousel`, taking in cosideration good practises, scalability and performance.
 
-
 The job of this component is listing all the events fetched to the api url provided by the user. It also display a customizable, optional header with a title and a button.
 
 ## Architecture details

packages/component-news/README.md

@@ -3,6 +3,7 @@ ASU Web Standards-based implementation of news component.
 
 This component is the React implementation of the old News component(https://github.com/ASU-CLAS/asu-react-news-list) but reusing a lot of the components already developed in `components-core` and `component-carousel`, taking in cosideration good practises, scalability and performance.
 
+
 The job of this component is listing all the news fetched to the api url provided by the user. It also display a customizable, optional header with a title and a button.
 
 ## Architecture details

packages/unity-bootstrap-theme/src/scss/extends/_cards.scss

@@ -228,6 +228,8 @@ Cards - Table of Contents
   //   }
   // }
 
+
+
 @include media-breakpoint-up(lg) {
   .col-lg-6 .card {
     .card-img-top {
@@ -435,6 +437,66 @@ Cards - Table of Contents
   margin-right: 8px;
 }
 
+/*
+  Arrow link CTA for event and news cards.
+  Replaces button CTAs with a single right-arrow link.
+*/
+.card-arrow-link {
+  align-items: center;
+  justify-content: center;
+  width: 2.1rem;
+  height: 2.1rem;
+  float: right;
+  color: $asu-gray-2;
+  text-decoration: none;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+
+  &:hover, &:focus, &:focus-visible, &:active {
+    box-shadow: $uds-color-base-maroon;
+    .fa-arrow-right {
+      color: $uds-color-base-maroon;
+    }
+  }
+
+  .fa-arrow-right {
+    width: .875rem;
+    height: .875rem;
+    color: $asu-gray-4;
+  }
+
+  &:hover {
+    color: $uds-color-base-maroon;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $uds-color-base-bluefocus;
+    outline-offset: 2px;
+  }
+
+  @include media-breakpoint-down(md) {
+    color: $uds-color-base-maroon;
+    border-color: $uds-color-base-maroon;
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+
+    .fa-arrow-right {
+      color: inherit;
+    }
+
+  }
+}
+
 .card-horizontal {
   flex-direction: row;
 }

packages/unity-react-core/src/components/Card/Card.jsx

@@ -20,6 +20,8 @@ const gaDefaultObject = {
   region: "main content",
 };
 
+const isEventOrNewsCard = (type) => type === "event" || type === "news";
+
 /**
  * @typedef {import('../../core/types/card-types').CardProps} CardProps
  */
@@ -185,58 +187,43 @@ const BaseCard = ({
     [`borderless`]: !showBorders,
   });
 
+  const shouldShowImage = isEventOrNewsCard(type) ? !!image : true;
+  const shouldIncludeCardLink = !isEventOrNewsCard(type);
+
   return (
-    <>
-      <CardWrapper className={cardClass} data-testid="card-container">
-        {!!image && (
-          <Image
-            src={image}
-            alt={imageAltText}
-            dataTestId="card-image"
-            cssClasses={["card-img-top"]}
-            cardLink={cardLink}
-            title={title}
-          />
-        )}
-        {!image && icon && (
-          <i
-            className={`${icon?.[0]} fa-${icon?.[1]} fa-2x card-icon-top`}
-            data-testid="card-icon"
-          />
-        )}
-        {horizontal ? (
-          <div className="card-content-wrapper">
-            <CardContent
-              type={type}
-              body={body}
-              eventFormat={eventFormat}
-              eventLocation={eventLocation}
-              eventTime={eventTime}
-              title={title}
-              buttons={buttons}
-              linkLabel={linkLabel}
-              linkUrl={linkUrl}
-              tags={tags}
-              cardLink={cardLink}
-            />
-          </div>
-        ) : (
-          <CardContent
-            type={type}
-            body={body}
-            eventFormat={eventFormat}
-            eventLocation={eventLocation}
-            eventTime={eventTime}
-            title={title}
-            buttons={buttons}
-            linkLabel={linkLabel}
-            linkUrl={linkUrl}
-            tags={tags}
-            cardLink={cardLink}
-          />
-        )}
-      </CardWrapper>
-    </>
+    <CardWrapper className={cardClass} data-testid="card-container">
+      {shouldShowImage && (
+        <Image
+          src={image}
+          alt={imageAltText}
+          dataTestId="card-image"
+          cssClasses={["card-img-top"]}
+          title={title}
+          cardLink={shouldIncludeCardLink ? cardLink : undefined}
+        />
+      )}
+      {!image && icon && (
+        <i
+          className={`${icon?.[0]} fa-${icon?.[1]} fa-2x card-icon-top`}
+          data-testid="card-icon"
+        />
+      )}
+      <div className={horizontal ? "card-content-wrapper" : undefined}>
+        <CardContent
+          type={type}
+          body={body}
+          eventFormat={eventFormat}
+          eventLocation={eventLocation}
+          eventTime={eventTime}
+          title={title}
+          buttons={buttons}
+          linkLabel={linkLabel}
+          linkUrl={linkUrl}
+          tags={tags}
+          cardLink={cardLink}
+        />
+      </div>
+    </CardWrapper>
   );
 };
 
@@ -291,83 +278,107 @@ const CardContent = ({
   linkUrl = undefined,
   tags = undefined,
   cardLink,
-}) => (
-  <>
-    {!!title && (
+}) => {
+  const isEventOrNews = isEventOrNewsCard(type);
+  const showTitleLink = cardLink && !isEventOrNews;
+  const showArrowLink = isEventOrNews && cardLink;
+  const showEventInfo = type === "event" && (eventTime || eventLocation);
+
+  return (
+    <>
       <div className="card-header" data-testid="card-title">
         <h3 className="card-title">
-          {cardLink ? <a href={cardLink}>{title}</a> : title}
+          {showTitleLink ? <a href={cardLink}>{title}</a> : title}
         </h3>
       </div>
-    )}
-    {!!body && (
-      <div className="card-body" data-testid="card-body">
-        {}
-        <div dangerouslySetInnerHTML={sanitizeDangerousMarkup(body)} />
-      </div>
-    )}
-    {type === "event" && (eventTime || eventLocation) && (
-      <EventInfo
-        eventFormat={eventFormat}
-        eventTime={eventTime}
-        eventLocation={eventLocation}
-      />
-    )}
-    {buttons && (
-      <div className="card-buttons">
-        {buttons.map(button => (
-          <div
-            className="card-button"
-            data-testid="card-button"
-            key={`${button.label}-${button.href}`}
+      {body && (
+        <div className="card-body" data-testid="card-body">
+          <div dangerouslySetInnerHTML={sanitizeDangerousMarkup(body)} />
+        </div>
+      )}
+      {showEventInfo && (
+        <EventInfo
+          eventFormat={eventFormat}
+          eventTime={eventTime}
+          eventLocation={eventLocation}
+        />
+      )}
+      {showArrowLink ? (
+        <div className="card-link" data-testid="card-link">
+          <GaEventWrapper
+            gaData={{
+              ...gaDefaultObject,
+              text: title,
+            }}
           >
-            {/* @ts-ignore */}
-            <Button
-              ariaLabel={button.ariaLabel}
-              color={button.color}
-              icon={button.icon}
-              href={button.href}
-              label={button.label}
-              onClick={button.onClick}
-              size={button.size}
-              target={button.target}
+            <a
+              href={cardLink}
+              className="card-arrow-link"
+              aria-label={title}
+            >
+              <i className="fas fa-arrow-right" aria-hidden="true" />
+            </a>
+          </GaEventWrapper>
+        </div>
+      ) : (
+        <>
+          {buttons && (
+            <div className="card-buttons">
+              {buttons.map(button => (
+                <div
+                  className="card-button"
+                  data-testid="card-button"
+                  key={`${button.label}-${button.href}`}
+                >
+                  <Button
+                    ariaLabel={button.ariaLabel}
+                    color={button.color}
+                    icon={button.icon}
+                    href={button.href}
+                    label={button.label}
+                    onClick={button.onClick}
+                    size={button.size}
+                    target={button.target}
+                    cardTitle={title}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+          {linkUrl && linkLabel && (
+            <div className="card-link" data-testid="card-link">
+              <GaEventWrapper
+                gaData={{
+                  ...gaDefaultObject,
+                  section: title,
+                  text: linkLabel,
+                }}
+              >
+                <a href={emailAddressParser(linkUrl)}>{linkLabel}</a>
+              </GaEventWrapper>
+            </div>
+          )}
+        </>
+      )}
+      {tags && (
+        <div className="card-tags" data-testid="card-tags">
+          {tags.map(tag => (
+            // @ts-ignore
+            <ButtonTag
+              key={`${tag.label}-${tag.href}`}
+              ariaLabel={tag.ariaLabel}
+              color={tag.color}
+              href={tag.href}
+              label={tag.label}
+              onClick={tag.onClick}
               cardTitle={title}
             />
-          </div>
-        ))}
-      </div>
-    )}
-    {linkUrl && linkLabel && (
-      <div className="card-link" data-testid="card-link">
-        <GaEventWrapper
-          gaData={{
-            ...gaDefaultObject,
-            section: title,
-            text: linkLabel,
-          }}
-        >
-          <a href={emailAddressParser(linkUrl)}>{linkLabel}</a>
-        </GaEventWrapper>
-      </div>
-    )}
-    {tags && (
-      <div className="card-tags" data-testid="card-tags">
-        {tags.map(tag => (
-          // @ts-ignore
-          <ButtonTag
-            key={`${tag.label}-${tag.href}`}
-            ariaLabel={tag.ariaLabel}
-            color={tag.color}
-            href={tag.href}
-            label={tag.label}
-            onClick={tag.onClick}
-            cardTitle={title}
-          />
-        ))}
-      </div>
-    )}
-  </>
-);
+          ))}
+        </div>
+      )}
+    </>
+  );
+};
 
 CardContent.propTypes = {
   type: PropTypes.oneOf(["default", "degree", "event", "news", "story"]),
@@ -415,7 +426,6 @@ const EventInfo = ({
             <div>
               <i className="far fa-calendar" />
             </div>
-            {}
             <div dangerouslySetInnerHTML={sanitizeDangerousMarkup(eventTime)} />
           </div>
         )}
@@ -442,7 +452,6 @@ const EventInfo = ({
             <div>
               <i className="far fa-calendar" />
             </div>
-            {}
             <div dangerouslySetInnerHTML={sanitizeDangerousMarkup(eventTime)} />
           </div>
         </div>