fix(various): IFD accessibility call-outs (#595)

Adjusted default aria-labels on history button, search box label, jump buttons. Jump buttons now also allow more customization via prop passage. The history drawer can also make announcements when content changes (demo included).

Author: rebeccaalpert

packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx

@@ -1,4 +1,4 @@
-import { useState, FunctionComponent } from 'react';
+import { useState, useEffect, useRef, FunctionComponent } from 'react';
 import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotConversationHistoryNav, {
   Conversation
@@ -71,8 +71,28 @@ export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
   const [hasError, setHasError] = useState(false);
   const [isEmpty, setIsEmpty] = useState(false);
   const [hasNoResults, setHasNoResults] = useState(false);
+  const [announcement, setAnnouncement] = useState('');
+  const [debouncedAnnouncement, setDebouncedAnnouncement] = useState('');
+  const announcementTimeoutRef = useRef<NodeJS.Timeout>();
   const displayMode = ChatbotDisplayMode.embedded;
 
+  // Debounce announcement updates to prevent screen reader overload
+  useEffect(() => {
+    if (announcementTimeoutRef.current) {
+      clearTimeout(announcementTimeoutRef.current);
+    }
+
+    announcementTimeoutRef.current = setTimeout(() => {
+      setDebouncedAnnouncement(announcement);
+    }, 500);
+
+    return () => {
+      if (announcementTimeoutRef.current) {
+        clearTimeout(announcementTimeoutRef.current);
+      }
+    };
+  }, [announcement]);
+
   const findMatchingItems = (targetValue: string) => {
     const filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
       const filteredItems = items.filter((item) => item.text.toLowerCase().includes(targetValue.toLowerCase()));
@@ -168,12 +188,23 @@ export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
         handleTextInputChange={(value: string) => {
           if (value === '') {
             setConversations(initialConversations);
+            setAnnouncement('');
+            setDebouncedAnnouncement('');
+            setHasNoResults(false);
+          } else {
+            // this is where you would perform search on the items in the drawer
+            // and update the state
+            const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value);
+            const totalCount = Object.values(newConversations).flat().length;
+            const newAnnouncement =
+              totalCount === 1
+                ? `${totalCount} conversation matches "${value}"`
+                : `${totalCount} conversations match "${value}"`;
+            setAnnouncement(newAnnouncement);
+            setConversations(newConversations);
           }
-          // this is where you would perform search on the items in the drawer
-          // and update the state
-          const newConversations: { [key: string]: Conversation[] } = findMatchingItems(value);
-          setConversations(newConversations);
         }}
+        searchInputScreenReaderText={debouncedAnnouncement}
         drawerContent={<div>Drawer content</div>}
         isLoading={isLoading}
         errorState={hasError ? ERROR : undefined}

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -2,6 +2,18 @@
 // Chatbot Header - Menu
 // ============================================================================
 .pf-chatbot__history {
+  // hide from view but not assistive technologies
+  // https://css-tricks.com/inclusively-hidden/
+  .pf-chatbot__filter-announcement {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
   .pf-chatbot__drawer-backdrop {
     position: absolute;
     border-radius: var(--pf-t--global--border--radius--medium);

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -348,7 +348,7 @@ describe('ChatbotConversationHistoryNav', () => {
     ).toBeTruthy();
     expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
     expect(screen.getByRole('button', { name: /Loading... Reload/i })).toBeTruthy();
-    expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+    expect(screen.getByRole('textbox', { name: /Search previous conversations/i })).toBeTruthy();
     expect(screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
   });
 
@@ -372,7 +372,7 @@ describe('ChatbotConversationHistoryNav', () => {
     ).toBeTruthy();
     expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
     expect(screen.queryByRole('button', { name: /Loading... Reload/i })).toBeFalsy();
-    expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+    expect(screen.getByRole('textbox', { name: /Search previous conversations/i })).toBeTruthy();
     expect(screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
   });
 

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -141,6 +141,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   navTitleIcon?: React.ReactNode;
   /** Title header level */
   navTitleProps?: Partial<TitleProps>;
+  /** Visually hidden text that gets announced by assistive technologies. Should be used to convey the result count when the search input value changes. */
+  searchInputScreenReaderText?: string;
 }
 
 export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -157,7 +159,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   onNewChat,
   newChatButtonProps,
   searchInputPlaceholder = 'Search previous conversations...',
-  searchInputAriaLabel = 'Filter menu items',
+  searchInputAriaLabel = 'Search previous conversations',
   searchInputProps,
   handleTextInputChange,
   displayMode,
@@ -179,6 +181,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   title = 'Chat history',
   navTitleProps,
   navTitleIcon = <OutlinedClockIcon />,
+  searchInputScreenReaderText,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -309,6 +312,9 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
                 placeholder={searchInputPlaceholder}
                 {...searchInputProps}
               />
+              {searchInputScreenReaderText && (
+                <div className="pf-chatbot__filter-announcement">{searchInputScreenReaderText}</div>
+              )}
             </div>
           )}
         </div>

packages/module/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx

@@ -12,7 +12,7 @@ describe('ChatbotHeaderMenu', () => {
   it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
     const onMenuToggle = jest.fn();
     render(<ChatbotHeaderMenu className="custom-header-menu" onMenuToggle={onMenuToggle} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Toggle menu' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Chat history menu' }));
 
     expect(onMenuToggle).toHaveBeenCalled();
   });

packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -25,9 +25,9 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
   className,
   onMenuToggle,
   tooltipProps,
-  menuAriaLabel = 'Toggle menu',
+  menuAriaLabel = 'Chat history menu',
   innerRef,
-  tooltipContent = 'Menu',
+  tooltipContent = 'Chat history menu',
   isCompact,
   ...props
 }: ChatbotHeaderMenuProps) => (

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

@@ -6,20 +6,20 @@ import userEvent from '@testing-library/user-event';
 describe('JumpButton', () => {
   it('should render top button correctly', () => {
     render(<JumpButton position="top" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Jump top/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Back to top/i })).toBeTruthy();
   });
   it('should render bottom button correctly', () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} />);
-    expect(screen.getByRole('button', { name: /Jump bottom/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Back to bottom/i })).toBeTruthy();
   });
   it('should call onClick appropriately', async () => {
     const spy = jest.fn();
     render(<JumpButton position="bottom" onClick={spy} />);
-    await userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Back to bottom/i }));
     expect(spy).toHaveBeenCalledTimes(1);
   });
   it('should be hidden if isHidden prop is used', async () => {
     render(<JumpButton position="bottom" onClick={jest.fn()} isHidden />);
-    expect(screen.queryByRole('button', { name: /Jump bottom/i })).toBeFalsy();
+    expect(screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
   });
 });

packages/module/src/MessageBox/JumpButton.tsx

@@ -4,7 +4,7 @@
 import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
-import { Button, Tooltip, Icon } from '@patternfly/react-core';
+import { Button, Tooltip, Icon, TooltipProps, ButtonProps } from '@patternfly/react-core';
 
 import { ArrowUpIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-up-icon';
 import { ArrowDownIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-down-icon';
@@ -16,16 +16,32 @@ export interface JumpButtonProps {
   onClick: () => void;
   /** Flag to change the visibilty of the button */
   isHidden?: boolean;
+  /** Additional props passed to jump buttons */
+  jumpButtonProps?: ButtonProps;
+  /** Additional props passed to tooltip */
+  jumpButtonTooltipProps?: TooltipProps;
 }
 
-const JumpButton: FunctionComponent<JumpButtonProps> = ({ position, isHidden, onClick }: JumpButtonProps) =>
+const JumpButton: FunctionComponent<JumpButtonProps> = ({
+  position,
+  isHidden,
+  onClick,
+  jumpButtonProps,
+  jumpButtonTooltipProps
+}: JumpButtonProps) =>
   isHidden ? null : (
-    <Tooltip id={`pf-chatbot__tooltip--jump-${position}`} content={`Back to ${position}`} position="top">
+    <Tooltip
+      id={`pf-chatbot__tooltip--jump-${position}`}
+      content={`Back to ${position}`}
+      position="top"
+      {...jumpButtonTooltipProps}
+    >
       <Button
         variant="plain"
         className={`pf-chatbot__jump pf-chatbot__jump--${position}`}
-        aria-label={`Jump ${position}`}
+        aria-label={`Back to ${position}`}
         onClick={onClick}
+        {...jumpButtonProps}
       >
         <Icon iconSize="lg" isInline>
           {position === 'top' ? <ArrowUpIcon /> : <ArrowDownIcon />}

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

@@ -61,7 +61,7 @@ describe('MessageBox', () => {
     });
 
     await waitFor(() => {
-      userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
+      userEvent.click(screen.getByRole('button', { name: /Back to bottom/i }));
       expect(spy).toHaveBeenCalled();
     });
   });
@@ -85,7 +85,7 @@ describe('MessageBox', () => {
       region.dispatchEvent(new Event('scroll'));
     });
     await waitFor(() => {
-      userEvent.click(screen.getByRole('button', { name: /Jump top/i }));
+      userEvent.click(screen.getByRole('button', { name: /Back to top/i }));
       expect(spy).toHaveBeenCalled();
     });
   });

packages/module/src/MessageBox/MessageBox.tsx

@@ -18,6 +18,7 @@ import {
   WheelEventHandler
 } from 'react';
 import JumpButton from './JumpButton';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
 
 export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
   /** Content that can be announced, such as a new message, for screen readers */
@@ -38,6 +39,14 @@ export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
   onScrollToBottomClick?: () => void;
   /** Flag to enable automatic scrolling when new messages are added */
   enableSmartScroll?: boolean;
+  /** Props passed to top jump button */
+  jumpButtonTopProps?: ButtonProps;
+  /** Props passed to bottom jump button */
+  jumpButtonBottomProps?: ButtonProps;
+  /** Props passed to top jump button tooltip */
+  jumpButtonTopTooltipProps?: TooltipProps;
+  /** Props passed to top jump button tooltip */
+  jumpButtonBottomTooltipProps?: TooltipProps;
 }
 
 export interface MessageBoxHandle extends HTMLDivElement {
@@ -60,6 +69,10 @@ export const MessageBox = forwardRef(
       onScrollToTopClick,
       onScrollToBottomClick,
       enableSmartScroll = false,
+      jumpButtonTopProps,
+      jumpButtonBottomProps,
+      jumpButtonBottomTooltipProps,
+      jumpButtonTopTooltipProps,
       ...props
     }: MessageBoxProps,
     ref: ForwardedRef<MessageBoxHandle | null>
@@ -305,7 +318,13 @@ export const MessageBox = forwardRef(
 
     return (
       <>
-        <JumpButton position="top" isHidden={isOverflowing && atTop} onClick={scrollToTop} />
+        <JumpButton
+          position="top"
+          isHidden={isOverflowing && atTop}
+          onClick={scrollToTop}
+          jumpButtonProps={jumpButtonTopProps}
+          jumpButtonTooltipProps={jumpButtonTopTooltipProps}
+        />
         <div
           role="region"
           tabIndex={0}
@@ -324,6 +343,8 @@ export const MessageBox = forwardRef(
           position="bottom"
           isHidden={isOverflowing && atBottom}
           onClick={() => scrollToBottom({ resumeSmartScroll: true })}
+          jumpButtonProps={jumpButtonBottomProps}
+          jumpButtonTooltipProps={jumpButtonBottomTooltipProps}
         />
       </>
     );