Feature ever 13205 a11y buttons and links (#311)

* feat: Add Modal component (#309)

* feat: Add Modal component

* cleaned up css class names

* add logic to auto focus and focus trapping in the modal

* Add example of Modal usage

* update unit test by adding snapshot to verify the component renders what is expected in the UI

* fix: Modal focus trap works better with keydown listener, add focus trap tests, upgrade testing-library packages

* fix: use userEvent.type to simulate escape key press

* fixed failing test

Co-authored-by: Boima Konuwa <boima.konuwa@cision.com>
Co-authored-by: Chris Garcia <pixelbandito@gmail.com>

* feat: EVER-13212: a11y colors for buttons and text links

Co-authored-by: bkonuwa <bkonuwa@gmail.com>
Co-authored-by: Boima Konuwa <boima.konuwa@cision.com>

src/components/Avatar/Avatar.module.css

@@ -5,7 +5,7 @@
   justify-content: center;
   align-items: center;
   color: white;
-  background-color: var(--rvr-blue);
+  background-color: var(--rvr-color-primary);
   background-position: center;
   background-size: cover;
 }
@@ -16,7 +16,7 @@
   animation-iteration-count: infinite;
   animation-name: imagePlaceholderShimmer;
   animation-timing-function: linear;
-  background: linear-gradient(to right, var(--rvr-blue) 2%, var(--rvr-blue-lite-1) 18%, var(--rvr-blue) 33%);
+  background: linear-gradient(to right, var(--rvr-color-primary) 2%, var(--rvr-blue-lite-1) 18%, var(--rvr-color-primary) 33%);
   background-size: 1200px 10px;
   position: relative;
 }

src/components/Input/Input.module.css

@@ -38,8 +38,8 @@
 
 .Input.focus,
 .Input:focus {
-  border-color: var(--rvr-color-primary);
-  box-shadow: 0 0 4px var(--rvr-color-primary);
+  border-color: var(--rvr-color-primary-hover);
+  box-shadow: 0 0 4px var(--rvr-color-primary-hover);
   outline: 0 none;
 }
 

src/components/Modal/Modal.module.css

@@ -65,7 +65,7 @@
 
 .Header.level--info {
   background: var(--rvr-blue-lite-2);
-  border-bottom: 1px solid var(--rvr-blue);
+  border-bottom: 1px solid var(--rvr-color-info);
 }
 
 .Header.level--danger {
@@ -98,15 +98,15 @@
 
 .sm {
   width: 340px;
-}	
+}
 
 .md {
   width: 578px;
-}	
+}
 
 .lg {
   width: 815px;
-}	
+}
 
 /*max-height: calc(var(--rvr-baseSize) * 40*/
 @media (max-height: 320px) {
@@ -123,4 +123,3 @@
     justify-content: flex-start;
   }
 }
-

src/components/Pill/Pill.module.css

@@ -16,7 +16,7 @@
   font-family: var(--rvr-base-font-family);
   font-size: var(--rvr-font-size-base);
   line-height: var(--rvr-line-height-sm);
-  color: var(--rvr-blue);
+  color: var(--rvr-color-primary);
   box-shadow: var(--rvr-box-shadow);
   transition:
     background-color 0.2s var(--rvr-easeInOutQuad),
@@ -50,7 +50,7 @@
   flex: 0 0 auto;
   align-self: center;
   margin: 0 var(--rvr-space-xs);
-  color: var(--rvr-blue);
+  color: var(--rvr-color-primary);
   transition: color 0.2s var(--rvr-easeInOutQuad);
 }
 

src/shared/buttons.css

@@ -1,7 +1,7 @@
 :root {
   /* PRIMARY */
   --rvr-btn-color-primary: var(--rvr-white);
-  --rvr-btn-bg-color-primary: var(--rvr-blue);
+  --rvr-btn-bg-color-primary: var(--rvr-color-primary);
   --rvr-btn-border-color-primary: var(--rvr-btn-bg-color-primary);
 
   /* Active */
@@ -30,7 +30,7 @@
   --rvr-btn-border-color-primary-alt-disabled: var(--rvr-btn-border-color-primary-disabled);
 
   /* SECONDARY */
-  --rvr-btn-color-secondary: var(--rvr-blue);
+  --rvr-btn-color-secondary: var(--rvr-color-primary);
   --rvr-btn-bg-color-secondary: var(--rvr-white);
   --rvr-btn-border-color-secondary: var(--rvr-btn-color-secondary);
 
@@ -90,7 +90,7 @@
   --rvr-btn-border-color-danger-disabled: var(--rvr-btn-border-color-secondary-disabled);
 
   /* LINK */
-  --rvr-btn-color-link: var(--rvr-blue);
+  --rvr-btn-color-link: var(--rvr-color-primary);
   --rvr-btn-bg-color-link: transparent;
   --rvr-btn-border-color-link: var(--rvr-btn-bg-color-link);
 

src/shared/colors.css

@@ -3,7 +3,8 @@
   /* Palette */
   --rvr-white: #fff;
   --rvr-black: #000;
-  --rvr-blue: #0092c2;
+  --rvr-blue-base: #0092c2; /* The official brand color, insufficient contrast on white */
+  --rvr-blue: #007fa9; /* The brand color, darkened to pass contrast guidelines */
   --rvr-blue-lite-1: #0ba5d6;
   --rvr-blue-lite-2: #c9e8f2;
   --rvr-blue-lite-3: #e3f6fc;