starting side nav

src/components/UIShell/UIShellRightPanel/ActionComponent.svelte

@@ -19,8 +19,13 @@
   <button
     aria-label={type}
     class={cx('--header__action', componentIsActive && '--header__action--active')}
-    type="button">
-    <Icon {...icon} render={icon[0].render} />
+    type="button"
+    on:keydown={({ key }) => {
+      if (key === 'Enter') {
+        componentIsActive = !componentIsActive;
+      }
+    }}>
+    <Icon {...icon[0]} render={icon[0].render} />
   </button>
   {#if componentIsActive}
     <div

src/components/UIShell/UIShellRightPanel/ActionLink.svelte

@@ -41,17 +41,18 @@
   }
 
   .subject-divider {
-    color: #c6c6c6;
+    color: #525252;
     padding-bottom: 4px;
     border-bottom: 1px solid #525252;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: rgb(82, 82, 82);
     margin: 32px 1rem 8px;
+  }
+
+  .subject-divider span {
     font-size: 0.75rem;
     font-weight: 400;
     line-height: 1rem;
     letter-spacing: 0.32px;
+    color: #c6c6c6;
   }
 </style>
 
@@ -61,14 +62,19 @@
     class={cx('--header__action', linkIsActive && '--header__action--active')}
     class:action-link={true}
     {href}>
-    <Icon {...icon} render={icon.render} />
+    <Icon {...icon} />
   </a>
 {:else}
   <button
     aria-label={type}
     class={cx('--header__action', linkIsActive && '--header__action--active')}
-    type="button">
-    <Icon {...icon} render={icon.render} />
+    type="button"
+    on:keydown={({ key }) => {
+      if (key === 'Enter') {
+        linkIsActive = !linkIsActive;
+      }
+    }}>
+    <Icon {...icon} />
   </button>
   {#if linkIsActive && type === leftPanelTypes.links}
     <div
@@ -77,7 +83,7 @@
       <ul class={cx('--switcher__item')}>
         {#each content as subject}
           {#if subject.subject}
-            <li class={cx('--switcher__item')} class:subject-divider={true}>
+            <li class="subject-divider">
               <span>{subject.subject}</span>
             </li>
           {/if}

src/components/UIShell/UIShellRightPanel/ActionSearch.svelte

@@ -145,8 +145,13 @@
     class:btn-search={true}
     class:btn-search-disabled={searchIsActive}
     on:click={() => dispatch('focusInputSearch')}
-    type="button">
-    <Icon {...icon} render={icon.render} />
+    type="button"
+    on:keydown={({ key }) => {
+      if (key === 'Enter') {
+        searchIsActive = !searchIsActive;
+      }
+    }}>
+    <Icon {...icon} />
   </button>
   <input
     bind:this={inputSearchField}
@@ -168,8 +173,13 @@
     class:btn-clear-hidden={!searchIsActive}
     type="button"
     aria-label="Clear search"
-    on:click={() => searchStore.clear()}>
-    <Icon {...closeIcon} render={closeIcon.render} />
+    on:click={() => searchStore.clear()}
+    on:keydown={({ key }) => {
+      if (key === 'Enter') {
+        searchIsActive = !searchIsActive;
+      }
+    }}>
+    <Icon {...closeIcon} />
   </button>
 </div>
 {#if showResults}