From 04cbacd00003865b146eececc90641b0e747c81a Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 29 May 2020 09:46:07 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Undo=20removal=20of=20f?=
 =?UTF-8?q?ocus=20outline=20for=20rose=20cardlink?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Do not set outline:none on card link element to avoid a11y issues
---
 .../addon/styles/rose/components/card/_link.scss     | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss
index 807bdb587..949734531 100644
--- a/addons/rose/addon/styles/rose/components/card/_link.scss
+++ b/addons/rose/addon/styles/rose/components/card/_link.scss
@@ -20,11 +20,7 @@
     padding: sizing.rems(s);
     // TODO: Figure out better method of defining card dimensions
     min-height: sizing.rems(m) * 6; //6 rems
-    max-width: sizing.rems(m) * 12; //12 rems
-
-    &:focus {
-      outline: none;
-    }
+    width: sizing.rems(m) * 12; //12 rems
   }
 
   &:hover {
@@ -35,14 +31,20 @@
   &:active {
     background-color: var(--ui-gray-subtler-4);
   }
+
   &:focus-within {
     border-color: var(--info);
   }
 
   .rose-card-link-title {
+    $truncate-line-count: 3;
     @include type.type(m, semibold);
     color: var(--stark);
     margin: 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $truncate-line-count;
+    overflow: hidden;
   }
 
   .rose-card-link-subtitle {