Merge branch 'main' into fix/card-in-card-8300

carbon-design-system · Feb 24, 2022 · 6136ea7 · 6136ea7
2 parents f2335e3 + af2a7af
commit 6136ea7
Show file tree

Hide file tree

Showing 21 changed files with 367 additions and 335 deletions.
diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
diff --git a/packages/react/src/components/TableOfContents/TOCDesktop.js b/packages/react/src/components/TableOfContents/TOCDesktop.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -72,9 +72,17 @@ const TOCDesktop = ({ menuItems, selectedId }) => {
    */
   function triggerFocus(elem) {
     const element = document.querySelector(elem);
+
+    const handleFocusOut = event => {
+      const focusoutTarget = event.target;
+      focusoutTarget.removeAttribute('tabindex');
+    };
+
     element.setAttribute('tabindex', '0');
     element.focus({ preventScroll: true });
-    element.removeAttribute('tabindex');
+    element.addEventListener('focusout', handleFocusOut, {
+      once: true,
+    });
   }
 
   return (

diff --git a/packages/react/src/components/TableOfContents/TOCMobile.js b/packages/react/src/components/TableOfContents/TOCMobile.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -39,8 +39,31 @@ const TOCMobile = ({ menuItems, selectedId, menuLabel, updateState }) => {
     updateState(id, title);
     const selector = `a[name="${id}"]`;
     smoothScroll(null, selector, 50);
+    triggerFocus(selector);
   };
 
+  /**
+   * Trigger the focus on screen readers, so they can read the target paragraph
+   *
+   * @param {*} elem Selector to find the item
+   */
+  function triggerFocus(elem) {
+    const element = document.querySelector(elem);
+
+    if (element) {
+      const handleFocusOut = event => {
+        const focusoutTarget = event.target;
+        focusoutTarget.removeAttribute('tabindex');
+      };
+
+      element.setAttribute('tabindex', '0');
+      element.focus({ preventScroll: true });
+      element.addEventListener('focusout', handleFocusOut, {
+        once: true,
+      });
+    }
+  }
+
   /**
    * Handle OnBlur event
    *

diff --git a/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js b/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -19,8 +19,7 @@ export const headings = [
 ];
 
 // eslint-disable-next-line max-len
-export const LOREM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
-nisl.`;
+export const LOREM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.`;
 
 const generateCopySections = n => [...Array(n)].map(() => <p>{LOREM}</p>);
 

diff --git a/packages/styles/scss/components/tableofcontents/_tableofcontents.scss b/packages/styles/scss/components/tableofcontents/_tableofcontents.scss
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -217,7 +217,7 @@ $hover-transition-timing: 95ms;
   }
 
   .#{$prefix}--tableofcontents__contents {
-    a[name] {
+    [name] {
       display: block;
       color: $text-01;
       transform: translateY(calc(-1 * #{$layout-03}));
@@ -237,15 +237,9 @@ $hover-transition-timing: 95ms;
   }
 
   .#{$prefix}--tableofcontents-horizontal__contents {
-    a[name] {
+    [name] {
       display: block;
-      color: $text-01;
-      transform: translateY(calc(-1 * #{$layout-03}));
-      padding-top: 1rem;
-
-      > * {
-        transform: translateY($layout-03);
-      }
+      padding-top: $spacing-09;
     }
   }
 

diff --git a/packages/web-components/src/components/card/__stories__/card.stories.react.tsx b/packages/web-components/src/components/card/__stories__/card.stories.react.tsx
@@ -107,14 +107,11 @@ Pictogram.story = {
     knobs: {
       PictogramCard: ({ groupId }) => {
         const pictogramPlacement = select('Pictogram position:', pictogramPlacements, pictogramPlacements.top, groupId);
-        const copy =
-          pictogramPlacement === pictogramPlacements.bottom
-            ? textNullable(
-                'Body copy:',
-                'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat',
-                groupId
-              )
-            : null;
+        const copy = textNullable(
+          'Body copy:',
+          'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat',
+          groupId
+        );
         return {
           pictogramPlacement,
           heading: textNullable('Heading:', 'Aerospace and defence', groupId),

diff --git a/packages/web-components/src/components/expressive-modal/expressive-modal.scss b/packages/web-components/src/components/expressive-modal/expressive-modal.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -65,7 +65,7 @@
 }
 
 :host(#{$dds-prefix}-expressive-modal-close-button) {
-  display: contents;
+  display: inline;
 }
 
 :host(#{$dds-prefix}-expressive-modal-body),