fix(Toggletip): general a11y / ux improvements (#13112)

* fix(Toggletip): general a11y / ux improvements * style(ToogletipLabel): scope type changes to non-form labels --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 8, 2023 · e328f22 · e328f22
1 parent d8b5d6d
commit e328f22
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 20 deletions.
diff --git a/packages/react/src/components/Toggletip/Toggletip.stories.js b/packages/react/src/components/Toggletip/Toggletip.stories.js
@@ -51,23 +51,53 @@ export default {
 
 export const Default = () => {
   return (
-    <div style={{ display: 'flex', justifyContent: 'center' }}>
-      <ToggletipLabel>Toggletip label</ToggletipLabel>
-      <Toggletip defaultOpen>
-        <ToggletipButton label="Show information">
-          <Information />
-        </ToggletipButton>
-        <ToggletipContent>
-          <p>
-            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
-            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
-          </p>
-          <ToggletipActions>
-            <Link href="#">Link action</Link>
-            <Button size="sm">Button</Button>
-          </ToggletipActions>
-        </ToggletipContent>
-      </Toggletip>
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <ToggletipLabel>Toggletip label</ToggletipLabel>
+        <Toggletip>
+          <ToggletipButton label="Show information">
+            <Information />
+          </ToggletipButton>
+          <ToggletipContent>
+            <p>
+              Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+              do eiusmod tempor incididunt ut fsil labore et dolore magna
+              aliqua.
+            </p>
+            <ToggletipActions>
+              <Link href="#">Link action</Link>
+              <Button size="sm">Button</Button>
+            </ToggletipActions>
+          </ToggletipContent>
+        </Toggletip>
+      </div>
+      <br />
+      <br />
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+        }}>
+        <ToggletipLabel>
+          Toggletip label -- using <code>defaultOpen</code> prop
+        </ToggletipLabel>
+        <Toggletip defaultOpen>
+          <ToggletipButton label="Show information">
+            <Information />
+          </ToggletipButton>
+          <ToggletipContent>
+            <p>
+              Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+              do eiusmod tempor incididunt ut fsil labore et dolore magna
+              aliqua.
+            </p>
+            <ToggletipActions>
+              <Link href="#">Link action</Link>
+              <Button size="sm">Button</Button>
+            </ToggletipActions>
+          </ToggletipContent>
+        </Toggletip>
+      </div>
     </div>
   );
 };
@@ -76,7 +106,9 @@ const PlaygroundStory = (controls) => {
   const { align } = controls;
   return (
     <>
-      <ToggletipLabel>Toggletip label</ToggletipLabel>
+      <ToggletipLabel>
+        Toggletip label -- using <code>defaultOpen</code> prop
+      </ToggletipLabel>
       <Toggletip align={align} defaultOpen>
         <ToggletipButton label="Show information">
           <Information />
@@ -130,7 +162,6 @@ Playground.story = {
         style={{
           display: 'flex',
           alignItems: 'center',
-          justifyContent: 'center',
         }}>
         {story()}
       </div>

diff --git a/packages/react/src/components/Toggletip/index.js b/packages/react/src/components/Toggletip/index.js
@@ -95,9 +95,33 @@ function Toggletip({
   function onKeyDown(event) {
     if (open && match(event, keys.Escape)) {
       actions.close();
+
+      // If the menu is closed while focus is still inside the menu, it should return to the trigger button  (#12922)
+      const button = ref.current.children[0];
+      if (button && button.type === 'button') {
+        button.focus();
+      }
+    }
+  }
+
+  function handleBlur(event) {
+    // Do not close if the menu itself is clicked, should only close on focus out
+    if (open && event.relatedTarget === null) {
+      return;
+    }
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      // The menu should be closed when focus leaves the `Toggletip`  (#12922)
+      actions.close();
     }
   }
 
+  // If the `Toggletip` is the last focusable item in the tab order, it shoudl also close when the browser window loses focus  (#12922)
+  useWindowEvent('blur', () => {
+    if (open) {
+      actions.close();
+    }
+  });
+
   useWindowEvent('click', (event) => {
     if (open && !ref.current.contains(event.target)) {
       actions.close();
@@ -115,6 +139,7 @@ function Toggletip({
         highContrast
         open={open}
         onKeyDown={onKeyDown}
+        onBlur={handleBlur}
         ref={ref}>
         {children}
       </Popover>

diff --git a/packages/styles/scss/components/form/_form.scss b/packages/styles/scss/components/form/_form.scss
@@ -59,6 +59,10 @@ $input-label-weight: 400 !default;
     vertical-align: baseline;
   }
 
+  .#{$prefix}--label .#{$prefix}--toggletip-label {
+    @include type-style('label-01');
+  }
+
   .#{$prefix}--label--no-margin {
     margin-bottom: 0;
   }

diff --git a/packages/styles/scss/components/toggletip/_toggletip.scss b/packages/styles/scss/components/toggletip/_toggletip.scss
@@ -16,7 +16,7 @@
 
 @mixin toggletip() {
   .#{$prefix}--toggletip-label {
-    @include type.type-style('label-01');
+    @include type.type-style('body-01');
 
     margin-right: spacing.$spacing-03;
     color: theme.$text-secondary;