Fix buttons on focus

Author: rebeccaalpert

packages/module/src/MessageBox/JumpButton.scss

@@ -44,6 +44,28 @@
     inset-block-end: var(--pf-t--global--spacer--md) !important;
   }
 
+  // inclusively hidden: stay in tab order but reveal on keyboard focus
+  // https://css-tricks.com/inclusively-hidden/
+  &--hidden:not(:focus):not(:focus-visible):not(:active) {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px !important;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 1px !important;
+  }
+
+  &--hidden:focus,
+  &--hidden:focus-visible,
+  &--hidden:active {
+    clip: auto;
+    clip-path: none;
+    height: 2rem !important;
+    overflow: visible;
+    white-space: normal;
+    width: 2rem !important;
+  }
+
   // allows for zoom conditions; try zooming to 200% to see
   @media screen and (max-height: 518px) {
     display: none;

packages/module/src/MessageBox/JumpButton.test.tsx

@@ -21,14 +21,14 @@ describe('JumpButton', () => {
   it('should remain in the DOM but visually hidden when isHidden is used', () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
     const button = screen.getByRole('button', { name: /Back to bottom/i });
-    expect(button).toHaveClass('pf-chatbot-m-hidden');
+    expect(button).toHaveClass('pf-chatbot__jump--hidden');
   });
 
   it('should become visible when focused while hidden', () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
     const button = screen.getByRole('button', { name: /Back to bottom/i });
     button.focus();
     expect(button).toHaveFocus();
-    expect(button).toHaveClass('pf-chatbot-m-hidden');
+    expect(button).toHaveClass('pf-chatbot__jump--hidden');
   });
 });

packages/module/src/MessageBox/JumpButton.tsx

@@ -37,7 +37,7 @@ const JumpButton: FunctionComponent<JumpButtonProps> = ({
   >
     <Button
       variant="plain"
-      className={`pf-chatbot__jump pf-chatbot__jump--${position} ${isHidden ? 'pf-chatbot-m-hidden' : ''}`}
+      className={`pf-chatbot__jump pf-chatbot__jump--${position} ${isHidden ? 'pf-chatbot__jump--hidden' : ''}`}
       aria-label={`Back to ${position}`}
       onClick={onClick}
       {...jumpButtonProps}

packages/module/src/MessageBox/MessageBox.test.tsx

@@ -378,8 +378,8 @@ describe('MessageBox', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: /Back to top/i })).toHaveClass('pf-chatbot-m-hidden');
-      expect(screen.getByRole('button', { name: /Back to bottom/i })).not.toHaveClass('pf-chatbot-m-hiddenn');
+      expect(screen.getByRole('button', { name: /Back to top/i })).toHaveClass('pf-chatbot__jump--hidden');
+      expect(screen.getByRole('button', { name: /Back to bottom/i })).not.toHaveClass('pf-chatbot__jump--hidden');
     });
   });
 
@@ -400,8 +400,8 @@ describe('MessageBox', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByRole('button', { name: /Back to top/i })).not.toHaveClass('pf-chatbot-m-hidden');
-      expect(screen.getByRole('button', { name: /Back to bottom/i })).toHaveClass('pf-chatbot-m-hidden');
+      expect(screen.getByRole('button', { name: /Back to top/i })).not.toHaveClass('pf-chatbot__jump--hidden');
+      expect(screen.getByRole('button', { name: /Back to bottom/i })).toHaveClass('pf-chatbot__jump--hidden');
     });
   });
 });