Make link cover whole card, remove unnecesary aria

statisticsnorway · Jun 29, 2023 · 071629e · 071629e
1 parent 6ef15f1
commit 071629e
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 52 deletions.
diff --git a/lib/bundle.css b/lib/bundle.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap");
 @import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
 @import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:700&display=swap");
 @keyframes fadein {
@@ -324,10 +324,6 @@ a {
   outline: #9272fc solid 2px;
   outline-offset: 2px;
 }
-.ssb-btn-tertiary .button-header.open .button-grid .header-text {
-  color: #00824d;
-  text-decoration: underline;
-}
 .ssb-btn-tertiary .button-header .button-grid {
   cursor: pointer;
   min-height: 44px;
@@ -336,19 +332,21 @@ a {
   justify-content: flex-start;
   grid-column-gap: 6px;
 }
-.ssb-btn-tertiary .button-header .expand-icon * {
+.ssb-btn-tertiary .button-header svg {
   color: #00824d;
   font-size: 20px;
 }
 .ssb-btn-tertiary .button-header .header-text {
   color: #162327;
 }
-.ssb-btn-tertiary .button-header:hover .header-text {
+.ssb-btn-tertiary .button-header:hover .header-text, .ssb-btn-tertiary .button-header:focus .header-text {
   color: #00824d;
   text-decoration: underline;
+  text-underline-position: under;
 }
 .ssb-btn-tertiary .button-header.no-icon {
   text-decoration: underline;
+  text-underline-position: under;
 }
 .ssb-btn-tertiary .button-header:disabled .button-grid {
   cursor: not-allowed;
@@ -378,7 +376,7 @@ a {
 .ssb-btn-tertiary.negative .button-header .button-grid .header-text {
   color: #fff;
 }
-.ssb-btn-tertiary.negative .button-header .button-grid .expand-icon * {
+.ssb-btn-tertiary.negative .button-header .button-grid svg {
   color: #b6e8b8;
 }
 .ssb-btn-tertiary.negative .button-header:disabled .button-grid {
@@ -388,8 +386,11 @@ a {
   color: #2d6975 !important;
   text-decoration: none;
 }
+.ssb-btn-tertiary.negative .button-header:disabled .button-grid svg {
+  color: #2d6975;
+}
 .ssb-btn-tertiary.negative .button-header:disabled .button-grid .expand-icon * {
-  color: #2d6975 !important;
+  color: #2d6975;
 }
 .ssb-btn-tertiary.negative .button-header:disabled.no-icon .button-grid .header-text {
   text-decoration: underline;
@@ -415,8 +416,9 @@ a {
   padding: 0;
   text-align: left;
   width: 100%;
+  position: relative;
 }
-.ssb-card .clickable:focus {
+.ssb-card .clickable:focus-within {
   outline: #9272fc solid 2px;
   outline-offset: 2px;
 }
@@ -559,6 +561,17 @@ a {
   margin-top: 12px;
   padding: 4px;
 }
+.ssb-card .card-content .card-action:focus, .ssb-card .card-content .card-title:focus {
+  outline: none;
+}
+.ssb-card .card-content .card-action::after, .ssb-card .card-content .card-title::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
 .ssb-card .card-content .card-action {
   font-family: "Open Sans", sans-serif !important;
   font-stretch: normal;
@@ -1117,12 +1130,22 @@ a {
   user-select: none;
   width: 100%;
 }
-.ssb-glossary .glossary-popup .content-box .ssb-glossary-closing .icon {
+.ssb-glossary .glossary-popup .content-box .ssb-glossary-closing div {
+  all: unset;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.ssb-glossary .glossary-popup .content-box .ssb-glossary-closing div:focus {
+  outline: #b6e8b8 5px auto;
+  padding: 0 0.3rem;
+}
+.ssb-glossary .glossary-popup .content-box .ssb-glossary-closing div .icon {
   color: #274247;
   fill: #b6e8b8;
   font-size: 16px;
 }
-.ssb-glossary .glossary-popup .content-box .ssb-glossary-closing span {
+.ssb-glossary .glossary-popup .content-box .ssb-glossary-closing div span {
   line-height: 1.43;
   margin-left: 2px;
 }
@@ -2120,6 +2143,11 @@ a {
 .ssb-tabs .navigation-item:not(:last-of-type) {
   margin-right: 40px;
 }
+@media screen and (max-width: 767px) {
+  .ssb-tabs .navigation-item:not(:last-of-type) {
+    margin-right: 0;
+  }
+}
 .ssb-tabs .navigation-item::before {
   background: #274247;
   bottom: 0;
@@ -2135,6 +2163,12 @@ a {
   background: #1a9d49;
   height: 4px;
 }
+@media screen and (max-width: 767px) {
+  .ssb-tabs .navigation-item {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
 .ssb-tabs .navigation-item:hover::before, .ssb-tabs .navigation-item:focus::before {
   height: 4px;
 }

diff --git a/src/components/Card/_card.scss b/src/components/Card/_card.scss
@@ -3,9 +3,10 @@
   width: 100%;
 
   .clickable {
-    @include focus-marker;
+    @include focus-within-marker;
     @include reset-button;
     width: 100%;
+    position: relative;
 
     .card-image {
       display: flex;
@@ -179,6 +180,20 @@
       padding: 4px;
     }
 
+    .card-action, .card-title {
+      &:focus {
+        outline: none;
+      }
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+      }
+    }
+
     .card-action {
       @include open-sans;
       align-items: center;

diff --git a/src/components/Card/index.jsx b/src/components/Card/index.jsx
@@ -4,49 +4,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ArrowRight, Download, ExternalLink } from 'react-feather';
 import { useId } from '../../utils/useId';
-import {
-	KEY_ENTER,
-	KEY_SPACE,
-} from '../../utils/keybindings';
 
 const Card = ({
-	ariaDescribedBy, ariaLabel, children, className, external, downloadText, fileLocation, href, hrefText, id, icon, image, imagePlacement, profiled, subTitle, title,
+	children, className, external, downloadText, fileLocation, href, hrefText, id, icon, image, imagePlacement, profiled, subTitle, title,
 }) => {
 	const cardId = id || useId();
 
-	const openLink = () => {
-		const link = document.createElement('a');
-		link.href = href;
-		if (external) {
-			link.target = '_blank';
-			link.rel = 'noreferrer';
-		}
-		link.click();
-	};
-
-	const handleEnterKey = e => {
-		if (e.keyCode === KEY_ENTER || e.key == 'Enter' || e.keyCode === KEY_SPACE || e.key == 'Space') {
-			const link = document.createElement('a');
-			link.href = href;
-			if (external) {
-				link.target = '_blank';
-				link.rel = 'noreferrer';
-			}
-			link.click();
-		}
-	};
-
 	return (
 		<div className={`ssb-card${className ? ` ${className}` : ''}`}>
-			<div
-				className={`clickable ${imagePlacement === 'left' ? 'left-orientation' : 'top-orientation'}`}
-				onClick={() => openLink()}
-				onKeyDown={handleEnterKey}
-				role="link"
-				tabIndex={0}
-				aria-label={ariaLabel || title || hrefText || undefined}
-				aria-describedby={ariaDescribedBy ? `${cardId}-${ariaDescribedBy}` : undefined}
-			>
+			<div className={`clickable ${imagePlacement === 'left' ? 'left-orientation' : 'top-orientation'}`}>
 
 				{image && <div className="card-image">{image}</div>}
 
@@ -60,7 +26,6 @@ const Card = ({
 							className="card-title"
 							target={external ? '_blank' : undefined}
 							rel={external ? 'noreferrer' : undefined}
-							tabIndex={-1}
 						>{title}
 						</a>
 					)}
@@ -110,8 +75,6 @@ Card.defaultProps = {
 };
 
 Card.propTypes = {
-	ariaDescribedBy: PropTypes.oneOf(['subtitle', 'text']),
-	ariaLabel: PropTypes.string,
 	children: PropTypes.node.isRequired,
 	className: PropTypes.string,
 	downloadText: PropTypes.string,

diff --git a/src/style/_variables.scss b/src/style/_variables.scss
@@ -82,3 +82,10 @@ $max-readable-width: 580px;
     @include focus-ring;
   }
 }
+
+@mixin focus-within-marker {
+
+  &:focus-within {
+    @include focus-ring;
+  }
+}