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

@@ -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() {

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,

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>
 `;
 

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.
         `
     }
 };