fix: migrate storybook to v.6.1.21 [ci visual] (#2169)

BREAKING CHANGE: update role attributes for avatar, generic tile and popover
SAP · Mar 9, 2021 · f5c5cc9 · f5c5cc9
1 parent 3894494
commit f5c5cc9
Show file tree

Hide file tree

Showing 20 changed files with 52,519 additions and 27,840 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,17 +50,17 @@
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/preset-react": "^7.10.4",
     "@sap-theming/theming-base-content": "~11.1.27",
-    "@storybook/addon-a11y": "6.1.11",
-    "@storybook/addon-actions": "6.1.15",
-    "@storybook/addon-cssresources": "6.1.11",
-    "@storybook/addon-docs": "6.1.9",
-    "@storybook/addon-knobs": "6.0.28",
-    "@storybook/addon-links": "6.0.28",
-    "@storybook/addon-storyshots": "6.0.28",
-    "@storybook/addon-toolbars": "6.0.28",
-    "@storybook/addon-viewport": "6.0.28",
-    "@storybook/addons": "6.1.15",
-    "@storybook/html": "6.0.28",
+    "@storybook/addon-a11y": "6.1.21",
+    "@storybook/addon-actions": "6.1.21",
+    "@storybook/addon-cssresources": "6.1.21",
+    "@storybook/addon-docs": "6.1.21",
+    "@storybook/addon-knobs": "6.1.21",
+    "@storybook/addon-links": "6.1.21",
+    "@storybook/addon-storyshots": "6.1.21",
+    "@storybook/addon-toolbars": "6.1.21",
+    "@storybook/addon-viewport": "6.1.21",
+    "@storybook/addons": "6.1.21",
+    "@storybook/html": "6.1.21",
     "@storybook/preset-scss": "^1.0.3",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
@@ -94,8 +94,10 @@
     "pre-commit": "^1.2.2",
     "pretty": "^2.0.0",
     "puppeteer": "5.3.1",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-is": "^17.0.1",
+    "react-scripts": "^4.0.3",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.2",
     "sass-loader": "^10.0.2",

diff --git a/stories/avatar-group/__snapshots__/avatar-group.stories.storyshot b/stories/avatar-group/__snapshots__/avatar-group.stories.storyshot
@@ -69,7 +69,7 @@ exports[`Storyshots Components/Avatar Group Group Type 1`] = `
         <span
           aria-label="John Doe"
           class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
-          role="presentation"
+          role="img"
           style="background-image: url('/assets/images/avatars/1.svg')"
         />
 
@@ -124,7 +124,7 @@ exports[`Storyshots Components/Avatar Group Group Type 1`] = `
         <span
           aria-label="John Doe"
           class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
-          role="presentation"
+          role="img"
           style="background-image: url('/assets/images/avatars/2.svg')"
         />
 
@@ -255,7 +255,7 @@ exports[`Storyshots Components/Avatar Group Group Type 1`] = `
           <span
             aria-label="John Doe"
             class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
-            role="presentation"
+            role="img"
             style="background-image: url('/assets/images/avatars/1.svg')"
           />
 
@@ -310,7 +310,7 @@ exports[`Storyshots Components/Avatar Group Group Type 1`] = `
           <span
             aria-label="John Doe"
             class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
-            role="presentation"
+            role="img"
             style="background-image: url('/assets/images/avatars/2.svg')"
           />
 
@@ -365,7 +365,7 @@ exports[`Storyshots Components/Avatar Group Group Type 1`] = `
           <span
             aria-label="John Doe"
             class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
-            role="presentation"
+            role="img"
             style="background-image: url('/assets/images/avatars/3.svg')"
           />
 
@@ -436,7 +436,7 @@ exports[`Storyshots Components/Avatar Group Group Type 1`] = `
           <span
             aria-label="John Doe"
             class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
-            role="presentation"
+            role="img"
             style="background-image: url('/assets/images/avatars/4.svg')"
           />
 
@@ -977,11 +977,9 @@ exports[`Storyshots Components/Avatar Group Individual Type 1`] = `
         <span
           aria-label="Christian Bow"
           class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
-          role="presentation"
+          role="img"
           style="background-image: url('/assets/images/avatars/1.svg')"
         />
-
-
       </div>
 
 
@@ -1042,7 +1040,7 @@ exports[`Storyshots Components/Avatar Group Individual Type 1`] = `
               <span
                 aria-label="Christian Bow"
                 class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
-                role="presentation"
+                role="img"
                 style="background-image: url('/assets/images/avatars/1.svg')"
               />
 
@@ -1531,7 +1529,7 @@ exports[`Storyshots Components/Avatar Group Individual Type 1`] = `
             <span
               aria-label="John Doe"
               class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border fd-avatar--thumbnail"
-              role="presentation"
+              role="img"
               style="background-image: url('/assets/images/avatars/2.svg')"
             />
 

diff --git a/stories/avatar-group/avatar-group.stories.js b/stories/avatar-group/avatar-group.stories.js
@@ -144,8 +144,7 @@ export const individualType = () => `<div class="fd-avatar-group fd-avatar-group
     <div class="fd-popover">
         <div class="fd-popover__control">
             <div class="fd-avatar-group__item" tabindex="0" aria-haspopup="true" aria-expanded="false" onclick="onPopoverClick('popover_avatar_4ahzcg');">
-               <span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="presentation" aria-label="Christian Bow"></span>
-            </div>
+               <span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="Christian Bow"></span></div>
         </div>
         <div class="fd-popover__body" aria-hidden="true" id="popover_avatar_4ahzcg">
             <div class="fd-quick-view">
@@ -158,7 +157,7 @@ export const individualType = () => `<div class="fd-avatar-group fd-avatar-group
                 <div class="fd-quick-view__content">
                     <div class="fd-bar fd-bar--header-with-subheader">
                         <div class="fd-bar__left">
-                            <span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="presentation" aria-label="Christian Bow"></span>
+                            <span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="Christian Bow"></span>
                             <div class="fd-quick-view__subheader-text">
                                 <h5 class="fd-title fd-title--h5">Christian Bow</h5>
                                 <div class="fd-quick-view__subtitle">Marketing Manager</div>
@@ -260,7 +259,7 @@ export const individualType = () => `<div class="fd-avatar-group fd-avatar-group
                         </span>
                     </div>
                     <div class="fd-avatar-group__item" tabindex="0" aria-haspopup="true" aria-expanded="false">
-                        <span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/2.svg')" role="presentation" aria-label="John Doe"></span>
+                        <span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/2.svg')" role="img" aria-label="John Doe"></span>
                     </div>
                     <div class="fd-avatar-group__item" tabindex="0" aria-haspopup="true" aria-expanded="false">
                         <span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--border" aria-label="John Moe">JM</span>
@@ -301,7 +300,7 @@ export const groupType = () => `<div class="fd-popover">
                 </span>
             </div>
             <div class="fd-avatar-group__item">
-                <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="presentation" aria-label="John Doe"></span>
+                <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="John Doe"></span>
             </div>
             <div class="fd-avatar-group__item">
                 <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" aria-label="Endy Wallace">EW</span>
@@ -312,7 +311,7 @@ export const groupType = () => `<div class="fd-popover">
                 </span>
             </div>
             <div class="fd-avatar-group__item">
-                <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/2.svg')" role="presentation" aria-label="John Doe"></span>
+                <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/2.svg')" role="img" aria-label="John Doe"></span>
             </div>
         
             <button class="fd-button fd-avatar-group__more-button fd-avatar-group__more-button--m" role="button" tabindex="-1">
@@ -341,7 +340,7 @@ export const groupType = () => `<div class="fd-popover">
                     </span>
                 </div>    
                 <div class="fd-avatar-group__item">
-                    <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="presentation" aria-label="John Doe"></span>
+                    <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="John Doe"></span>
                 </div>    
                 <div class="fd-avatar-group__item">
                     <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" aria-label="Endy Wallace">EW</span>
@@ -352,7 +351,7 @@ export const groupType = () => `<div class="fd-popover">
                     </span>
                 </div>    
                 <div class="fd-avatar-group__item">
-                    <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/2.svg')" role="presentation" aria-label="John Doe"></span>
+                    <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/2.svg')" role="img" aria-label="John Doe"></span>
                 </div>    
                 <div class="fd-avatar-group__item">
                     <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" aria-label="Andy Wallace">AW</span>
@@ -363,7 +362,7 @@ export const groupType = () => `<div class="fd-popover">
                     </span>
                 </div>    
                 <div class="fd-avatar-group__item">
-                    <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/3.svg')" role="presentation" aria-label="John Doe"></span>
+                    <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/3.svg')" role="img" aria-label="John Doe"></span>
                 </div>    
                 <div class="fd-avatar-group__item">
                     <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" aria-label="John Moe">JM</span>
@@ -377,7 +376,7 @@ export const groupType = () => `<div class="fd-popover">
                     </span>
                 </div>    
                 <div class="fd-avatar-group__item">
-                    <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/4.svg')" role="presentation" aria-label="John Doe"></span>
+                    <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/4.svg')" role="img" aria-label="John Doe"></span>
                 </div>    
                 <div class="fd-avatar-group__item">
                     <span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--border" aria-label="Fred Bloggs">FB</span>

diff --git a/stories/avatar/__snapshots__/avatar.stories.storyshot b/stories/avatar/__snapshots__/avatar.stories.storyshot
@@ -164,39 +164,39 @@ exports[`Storyshots Components/Avatar Background Image 1`] = `
   <span
     aria-label="John Doe"
     class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
-    role="presentation"
+    role="img"
     style="background-image: url('/assets/images/avatars/1.svg')"
   />
 
 
   <span
     aria-label="John Doe"
     class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail"
-    role="presentation"
+    role="img"
     style="background-image: url('/assets/images/avatars/2.svg')"
   />
 
 
   <span
     aria-label="John Doe"
     class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--thumbnail"
-    role="presentation"
+    role="img"
     style="background-image: url('/assets/images/avatars/3.svg')"
   />
 
 
   <span
     aria-label="John Doe"
     class="fd-avatar fd-avatar--l fd-avatar--circle fd-avatar--thumbnail"
-    role="presentation"
+    role="img"
     style="background-image: url('/assets/images/avatars/4.svg')"
   />
 
 
   <span
     aria-label="John Doe"
     class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--thumbnail"
-    role="presentation"
+    role="img"
     style="background-image: url('/assets/images/avatars/5.svg')"
   />
 

diff --git a/stories/avatar/avatar.stories.js b/stories/avatar/avatar.stories.js
@@ -109,11 +109,11 @@ circle.parameters = {
 };
 
 export const backgroundImage = () => `
-<span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="presentation" aria-label="John Doe"></span>
-<span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/2.svg')" role="presentation" aria-label="John Doe"></span>
-<span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/3.svg')" role="presentation" aria-label="John Doe"></span>
-<span class="fd-avatar fd-avatar--l fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/4.svg')" role="presentation" aria-label="John Doe"></span>
-<span class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/5.svg')" role="presentation" aria-label="John Doe"></span>
+<span class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/1.svg')" role="img" aria-label="John Doe"></span>
+<span class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/2.svg')" role="img" aria-label="John Doe"></span>
+<span class="fd-avatar fd-avatar--m fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/3.svg')" role="img" aria-label="John Doe"></span>
+<span class="fd-avatar fd-avatar--l fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/4.svg')" role="img" aria-label="John Doe"></span>
+<span class="fd-avatar fd-avatar--xl fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/avatars/5.svg')" role="img" aria-label="John Doe"></span>
 `;
 
 backgroundImage.parameters = {

diff --git a/stories/bar/__snapshots__/bar.stories.storyshot b/stories/bar/__snapshots__/bar.stories.storyshot
@@ -162,7 +162,7 @@ exports[`Storyshots Components/Bar Cozy 1`] = `
       <span
         aria-label="John Doe"
         class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
-        role="presentation"
+        role="img"
         style="background-image: url('/assets/images/avatars/1.svg')"
       />
 
@@ -341,7 +341,7 @@ exports[`Storyshots Components/Bar Default 1`] = `
         <span
           aria-label="John Doe"
           class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
-          role="presentation"
+          role="img"
           style="background-image: url('/assets/images/avatars/1.svg')"
         />
 
@@ -516,7 +516,7 @@ exports[`Storyshots Components/Bar Default 1`] = `
         <span
           aria-label="John Doe"
           class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
-          role="presentation"
+          role="img"
           style="background-image: url('/assets/images/avatars/1.svg')"
         />
 
@@ -1004,7 +1004,7 @@ exports[`Storyshots Components/Bar Header 1`] = `
         <span
           aria-label="John Doe"
           class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
-          role="presentation"
+          role="img"
           style="background-image: url('/assets/images/avatars/1.svg')"
         />
 
@@ -1216,7 +1216,7 @@ exports[`Storyshots Components/Bar Header 1`] = `
         <span
           aria-label="John Doe"
           class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
-          role="presentation"
+          role="img"
           style="background-image: url('/assets/images/avatars/1.svg')"
         />
 
@@ -1431,7 +1431,7 @@ exports[`Storyshots Components/Bar Header With Subheader 1`] = `
         <span
           aria-label="John Doe"
           class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
-          role="presentation"
+          role="img"
           style="background-image: url('/assets/images/avatars/1.svg')"
         />
 
@@ -1589,7 +1589,7 @@ exports[`Storyshots Components/Bar Subheader 1`] = `
         <span
           aria-label="John Doe"
           class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
-          role="presentation"
+          role="img"
           style="background-image: url('/assets/images/avatars/1.svg')"
         />