From b70444060534c08cb5a04ae85df2ee505138fc2d Mon Sep 17 00:00:00 2001
From: jmarkowski <jedrzej.markowski@sap.com>
Date: Tue, 30 Mar 2021 21:30:29 +0200
Subject: [PATCH] fix: list docs, focus colors on menu and object list (#2222)

* fix: list docs, focus colors on menu and object list [ci visual]

* update storyshot

* [ci visual]

Co-authored-by: InnaAtanasova <i.atanasova@sap.com>
---
 src/menu.scss                                         |  4 ++++
 src/object-list.scss                                  |  2 ++
 .../__snapshots__/standard-list.stories.storyshot     |  6 ++++--
 stories/list/standard/standard-list.stories.js        | 11 ++++++-----
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/menu.scss b/src/menu.scss
index c438beb780..fe0515da75 100644
--- a/src/menu.scss
+++ b/src/menu.scss
@@ -157,6 +157,10 @@ $block: #{$fd-namespace}-menu;
       .#{$block}__addon-after {
         color: var(--sapList_Active_TextColor);
       }
+
+      @include fd-focus() {
+        outline-color: var(--sapContent_ContrastFocusColor);
+      }
     }
 
     @include fd-disabled() {
diff --git a/src/object-list.scss b/src/object-list.scss
index 8c88dfd067..9fa1bf6634 100644
--- a/src/object-list.scss
+++ b/src/object-list.scss
@@ -21,6 +21,8 @@ $block: #{$fd-namespace}-object-list;
 
     .#{$fd-namespace}-list__link {
       @include fd-active() {
+        background: var(--sapList_Active_Background);
+
         .#{$block}__intro,
         .#{$block}__object-attribute,
         .#{$fd-namespace}-avatar,
diff --git a/stories/list/standard/__snapshots__/standard-list.stories.storyshot b/stories/list/standard/__snapshots__/standard-list.stories.storyshot
index 632b92890b..c7c847e042 100644
--- a/stories/list/standard/__snapshots__/standard-list.stories.storyshot
+++ b/stories/list/standard/__snapshots__/standard-list.stories.storyshot
@@ -1019,10 +1019,10 @@ exports[`Storyshots Components/List/Standard Icon 1`] = `
 </ul>
 `;
 
-exports[`Storyshots Components/List/Standard Interractive 1`] = `
+exports[`Storyshots Components/List/Standard Interactive 1`] = `
 <section>
   <h4>
-    Interractive Items
+    Interactive Items
   </h4>
   
 
@@ -1118,6 +1118,8 @@ exports[`Storyshots Components/List/Standard Interractive 1`] = `
     
 
   </ul>
+  
+
 </section>
 `;
 
diff --git a/stories/list/standard/standard-list.stories.js b/stories/list/standard/standard-list.stories.js
index 3ace245282..4208369000 100644
--- a/stories/list/standard/standard-list.stories.js
+++ b/stories/list/standard/standard-list.stories.js
@@ -93,7 +93,7 @@ unread.parameters = {
     }
 };
 
-export const interractive = () => `<h4>Interractive Items</h4>
+export const interactive = () => `<h4>Interactive Items</h4>
 <ul class="fd-list" role="list">
   <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
       <span class="fd-list__title">List item 1</span>
@@ -110,16 +110,17 @@ export const interractive = () => `<h4>Interractive Items</h4>
   <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive is-selected">
       <span class="fd-list__title">List item 5 - with .is-selected</span>
   </li>
+</ul>
 `;
 
-interractive.storyName = 'Interractive';
+interactive.storyName = 'Interactive';
 
-interractive.parameters = {
+interactive.parameters = {
     docs: {
         iframeHeight: 445,
         storyDescription: `
-            The \`fd-list__item--interractive\` will force list item to handle hover and active states. 
-            Usage of this modifier is not needed on \`Selection\`, \`Navigation\` and \`Action\` modes.
+The \`fd-list__item--interractive\` will force list item to handle hover and active states. 
+Usage of this modifier is not needed on \`Selection\`, \`Navigation\` and \`Action\` modes.
         `
     }
 };