@patternfly/react-core 4.198.13 → 4.198.16

package/src/components/Tile/Tile.tsx

@@ -33,6 +33,9 @@ export const Tile: React.FunctionComponent<TileProps> = ({
   ...props
 }: TileProps) => (
   <div
+    role="option"
+    aria-selected={isSelected}
+    {...(isDisabled && { 'aria-disabled': isDisabled })}
     className={css(
       styles.tile,
       isSelected && styles.modifiers.selected,

package/src/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Tile basic 1`] = `
 <div>
   <div
     class="pf-c-tile"
+    role="option"
     tabindex="0"
   >
     <div
@@ -22,7 +23,9 @@ exports[`Tile basic 1`] = `
 exports[`Tile renders disabled 1`] = `
 <div>
   <div
+    aria-disabled="true"
     class="pf-c-tile pf-m-disabled"
+    role="option"
     tabindex="0"
   >
     <div
@@ -41,7 +44,9 @@ exports[`Tile renders disabled 1`] = `
 exports[`Tile renders selected 1`] = `
 <div>
   <div
+    aria-selected="true"
     class="pf-c-tile pf-m-selected"
+    role="option"
     tabindex="0"
   >
     <div
@@ -61,6 +66,7 @@ exports[`Tile renders with icon 1`] = `
 <div>
   <div
     class="pf-c-tile"
+    role="option"
     tabindex="0"
   >
     <div
@@ -97,6 +103,7 @@ exports[`Tile renders with stacked icon 1`] = `
 <div>
   <div
     class="pf-c-tile"
+    role="option"
     tabindex="0"
   >
     <div
@@ -133,6 +140,7 @@ exports[`Tile renders with stacked large icon 1`] = `
 <div>
   <div
     class="pf-c-tile pf-m-display-lg"
+    role="option"
     tabindex="0"
   >
     <div
@@ -169,6 +177,7 @@ exports[`Tile renders with subtext 1`] = `
 <div>
   <div
     class="pf-c-tile"
+    role="option"
     tabindex="0"
   >
     <div

package/src/components/Tile/examples/Tile.md

@@ -9,7 +9,6 @@ beta: true
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
-
 ## Examples
 
 Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/documentation/react/demos/tiledemo).
@@ -20,29 +19,30 @@ Keyboard interaction patterns and a11y is implemented in the Tile demos, located
 import React from 'react';
 import { Tile } from '@patternfly/react-core';
 
-<React.Fragment>
-  <Tile title="Default" />
+<div role="listbox" aria-label="Basic tiles">
+  <Tile title="Default" isSelected={false} />
   <Tile title="Selected" isSelected />
-  <Tile title="Disabled" isDisabled />
-</React.Fragment>
+  <Tile title="Disabled" isDisabled isSelected={false} />
+</div>;
 ```
 
-
 ### With subtext
 
 ```js
 import React from 'react';
 import { Tile } from '@patternfly/react-core';
 
-<React.Fragment>
-  <Tile title="Default">Subtext goes here</Tile>{' '}
+<div role="listbox" aria-label="Tiles with subtext">
+  <Tile title="Default" isSelected={false}>
+    Subtext goes here
+  </Tile>{' '}
   <Tile title="Selected" isSelected>
     Subtext goes here
   </Tile>{' '}
-  <Tile title="Disabled" isDisabled>
+  <Tile title="Disabled" isDisabled isSelected={false}>
     Subtext goes here
   </Tile>
-</React.Fragment>
+</div>;
 ```
 
 ### With icon
@@ -52,17 +52,17 @@ import React from 'react';
 import { Tile } from '@patternfly/react-core';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
-<React.Fragment>
-  <Tile title="Default" icon={<PlusIcon />}>
+<div role="listbox" aria-label="Tiles with icon">
+  <Tile title="Default" icon={<PlusIcon />} isSelected={false}>
     Subtext goes here
   </Tile>{' '}
   <Tile title="Selected" icon={<PlusIcon />} isSelected>
     Subtext goes here
   </Tile>{' '}
-  <Tile title="Disabled" icon={<PlusIcon />} isDisabled>
+  <Tile title="Disabled" icon={<PlusIcon />} isDisabled isSelected={false}>
     Subtext goes here
   </Tile>
-</React.Fragment>
+</div>;
 ```
 
 ### Stacked
@@ -72,17 +72,17 @@ import React from 'react';
 import { Tile } from '@patternfly/react-core';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
-<React.Fragment>
-  <Tile title="Default" icon={<BellIcon />} isStacked>
+<div role="listbox" aria-label="Stacked tiles">
+  <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
     Subtext goes here
   </Tile>{' '}
   <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
     Subtext goes here
   </Tile>{' '}
-  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled>
+  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
     Subtext goes here
   </Tile>
-</React.Fragment>
+</div>;
 ```
 
 ### Stacked with large icons
@@ -92,17 +92,17 @@ import React from 'react';
 import { Tile } from '@patternfly/react-core';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
-<React.Fragment>
-  <Tile title="Default" icon={<BellIcon />} isStacked isDisplayLarge>
+<div role="listbox" aria-label="Stacked tiles with large icons">
+  <Tile title="Default" icon={<BellIcon />} isStacked isDisplayLarge isSelected={false}>
     Subtext goes here
   </Tile>{' '}
   <Tile title="Selected" icon={<BellIcon />} isStacked isDisplayLarge isSelected>
     Subtext goes here
   </Tile>{' '}
-  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisplayLarge isDisabled>
+  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisplayLarge isDisabled isSelected={false}>
     Subtext goes here
   </Tile>
-</React.Fragment>
+</div>;
 ```
 
 ### With extra content
@@ -112,22 +112,24 @@ import React from 'react';
 import { Tile, Flex } from '@patternfly/react-core';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
-<Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <Tile title="Default" icon={<BellIcon />} isStacked>
-      This is really really long subtext that goes on for so long that it has to wrap to the next line. This is really
-      really long subtext that goes on for so long that it has to wrap to the next line.
-    </Tile>
-  </Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <Tile title="Selected" icon={<BellIcon />} isStacked>
-      This is really really long subtext that goes on for so long that it has to wrap to the next line.
-    </Tile>
-  </Flex>
-  <Flex flex={{ default: 'flex_1' }}>
-    <Tile title="Disabled" icon={<BellIcon />} isStacked>
-      Subtext goes here
-    </Tile>
+<div role="listbox" aria-label="Tiles with extra content">
+  <Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
+        This is really really long subtext that goes on for so long that it has to wrap to the next line. This is really
+        really long subtext that goes on for so long that it has to wrap to the next line.
+      </Tile>
+    </Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
+        This is really really long subtext that goes on for so long that it has to wrap to the next line.
+      </Tile>
+    </Flex>
+    <Flex flex={{ default: 'flex_1' }}>
+      <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
+        Subtext goes here
+      </Tile>
+    </Flex>
   </Flex>
-</Flex>
+</div>;
 ```

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -28,31 +28,26 @@ Composable menus currently require consumer keyboard handling and use of our und
 ### Composable simple dropdown
 
 ```ts file="./examples/ComposableSimpleDropdown.tsx"
-
 ```
 
 ### Composable actions menu
 
 ```ts file="./examples/ComposableActionsMenu.tsx"
-
 ```
 
 ### Composable simple select
 
 ```ts file="./examples/ComposableSimpleSelect.tsx"
-
 ```
 
 ### Composable drilldown menu
 
 ```ts isBeta file="./examples/ComposableDrilldownMenu.tsx"
-
 ```
 
 ### Composable tree view menu
 
 ```ts file="./examples/ComposableTreeViewMenu.tsx"
-
 ```
 
 ### Composable flyout
@@ -60,29 +55,29 @@ Composable menus currently require consumer keyboard handling and use of our und
 The flyout will automatically position to the left or top if it would otherwise go outside the window. The menu must be placed in a container outside the main content like Popper, [Popover](/components/popover) or [Tooltip](/components/tooltip) since it may go over the side nav.
 
 ```ts isBeta file="./examples/ComposableFlyout.tsx"
-
 ```
 
 ### Composable application launcher
 
 ```ts file="./examples/ComposableApplicationLauncher.tsx"
-
 ```
 
 ### Composable context selector
 
 ```ts file="./examples/ComposableContextSelector.tsx"
-
 ```
 
 ### Composable options menu variants
 
 ```ts file="./examples/ComposableOptionsMenuVariants.tsx"
-
 ```
 
 ### Composable dropdown variants
 
 ```ts file="./examples/ComposableDropdwnVariants.tsx"
+```
+
+### Composable date select
 
+```ts file="./examples/ComposableDateSelect.tsx"
 ```

package/src/demos/ComposableMenu/examples/ComposableDateSelect.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
+
+export const ComposableSimpleDropdown: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const toggleRef = React.useRef<HTMLButtonElement>();
+  const menuRef = React.useRef<HTMLDivElement>();
+  const [selected, setSelected] = React.useState<number>(0);
+
+  const handleMenuKeys = (event: KeyboardEvent) => {
+    if (!isOpen) {
+      return;
+    }
+    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+      if (event.key === 'Escape' || event.key === 'Tab') {
+        setIsOpen(!isOpen);
+        toggleRef.current.focus();
+      }
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClickOutside);
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen, menuRef]);
+
+  const onToggleClick = (ev: React.MouseEvent) => {
+    ev.stopPropagation(); // Stop handleClickOutside from handling
+    setTimeout(() => {
+      if (menuRef.current) {
+        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
+        firstElement && (firstElement as HTMLElement).focus();
+      }
+    }, 0);
+    setIsOpen(!isOpen);
+  };
+
+  const monthStrings = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ];
+
+  const dateString = (date: Date) => `${monthStrings[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
+
+  const date = new Date();
+
+  const toggleText = {
+    0: 'Today ',
+    1: 'Yesterday ',
+    2: 'Last 7 days ',
+    3: 'Last 14 days '
+  };
+
+  const dateText = {
+    0: <small className="pf-u-color-200">({dateString(date)})</small>,
+    1: (
+      <small className="pf-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 1)))} - {dateString(date)})
+      </small>
+    ),
+    2: (
+      <small className="pf-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 7)))} - {dateString(date)})
+      </small>
+    ),
+    3: (
+      <small className="pf-u-color-200">
+        ({dateString(new Date(new Date().setDate(date.getDate() - 14)))} - {dateString(date)})
+      </small>
+    )
+  };
+
+  const toggle = (
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen} style={{ minWidth: '250px' }}>
+      <span style={{ verticalAlign: 'middle', marginRight: '8px' }}>{toggleText[selected]}</span>
+      {dateText[selected]}
+    </MenuToggle>
+  );
+  const menu = (
+    // eslint-disable-next-line no-console
+    <Menu ref={menuRef} onSelect={(_ev, itemId) => setSelected(itemId as number)} selected={selected}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId={0}>Today</MenuItem>
+          <MenuItem itemId={1}>Yesterday</MenuItem>
+          <MenuItem itemId={2}>Last 7 days</MenuItem>
+          <MenuItem itemId={3}>Last 14 days</MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
+};

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -16,6 +16,11 @@ import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-
 
 ## Demos
 
+- Focus must be manually managed when the NotificationDrawer component is opened:
+
+  1. Create a React `ref` and pass it into the NotificationDrawer component's `ref` attribute
+  2. Pass in a function to the `onNotificationDrawerExpand` prop of the Page component that will place focus on the first interact-able element inside the NotificationDrawer component via the previously created `ref`
+
 ### Basic
 
 ```js isFullscreen
@@ -87,6 +92,7 @@ import { Table, TableHeader, TableBody } from '@patternfly/react-table';
 class BasicNotificationDrawer extends React.Component {
   constructor(props) {
     super(props);
+    this.drawerRef = React.createRef();
     this.state = {
       isDropdownOpen: false,
       isKebabDropdownOpen: false,
@@ -179,6 +185,11 @@ class BasicNotificationDrawer extends React.Component {
         showNotifications: showNotifications
       });
     };
+
+    this.focusDrawer = () => {
+      const firstTabbableItem = this.drawerRef.current.querySelector('a, button');
+      firstTabbableItem.focus();
+    };
   }
 
   render() {
@@ -359,7 +370,7 @@ class BasicNotificationDrawer extends React.Component {
     ];
 
     const notificationDrawer = (
-      <NotificationDrawer>
+      <NotificationDrawer ref={this.drawerRef}>
         <NotificationDrawerHeader count={this.getNumberUnread()} onClose={this.onCloseNotificationDrawer}>
           <Dropdown
             onSelect={this.onSelect}
@@ -499,6 +510,7 @@ class BasicNotificationDrawer extends React.Component {
           sidebar={Sidebar}
           isManagedSidebar
           notificationDrawer={notificationDrawer}
+          onNotificationDrawerExpand={this.focusDrawer}
           isNotificationDrawerExpanded={isDrawerExpanded}
           skipToContent={PageSkipToContent}
           breadcrumb={PageBreadcrumb}
@@ -525,6 +537,8 @@ class BasicNotificationDrawer extends React.Component {
 
 ### Grouped
 
+When using the NotificationDrawerGroupList and related components, the function that is passed in to the `onNotificationDrawerExpand` prop on the Page component must also ensure the NotificationDrawer component only receives focus when it is initially opened. Otherwise any time a drawer group item is opened the NotificationDrawer component will receive focus, which would be unexpected behavior for users.
+
 ```js isFullscreen
 import React from 'react';
 import {
@@ -597,6 +611,7 @@ import { Table, TableHeader, TableBody } from '@patternfly/react-table';
 class GroupedNotificationDrawer extends React.Component {
   constructor(props) {
     super(props);
+    this.drawerRef = React.createRef();
     this.state = {
       isDropdownOpen: false,
       isKebabDropdownOpen: false,
@@ -736,6 +751,14 @@ class GroupedNotificationDrawer extends React.Component {
         thirdDrawerGroupExpanded: value
       });
     };
+
+    this.focusDrawer = () => {
+      // Prevent the NotificationDrawer from receiving focus if a drawer group item is opened
+      if (!document.activeElement.closest(`.${this.drawerRef.current.className}`)) {
+        const firstTabbableItem = this.drawerRef.current.querySelector('a, button');
+        firstTabbableItem.focus();
+      }
+    };
   }
 
   render() {
@@ -919,7 +942,7 @@ class GroupedNotificationDrawer extends React.Component {
     ];
 
     const notificationDrawer = (
-      <NotificationDrawer>
+      <NotificationDrawer ref={this.drawerRef}>
         <NotificationDrawerHeader count={this.getNumberUnread()} onClose={this.onCloseNotificationDrawer}>
           <Dropdown
             onSelect={this.onSelect}
@@ -1214,6 +1237,7 @@ class GroupedNotificationDrawer extends React.Component {
           isManagedSidebar
           notificationDrawer={notificationDrawer}
           isNotificationDrawerExpanded={isDrawerExpanded}
+          onNotificationDrawerExpand={this.focusDrawer}
           skipToContent={PageSkipToContent}
           breadcrumb={PageBreadcrumb}
           mainContainerId={pageId}

package/src/demos/TileDemo.md

@@ -13,11 +13,11 @@ import { Tile } from '@patternfly/react-core';
 
 const TileSingleSelect: React.FunctionComponent = () => {
   const [selectedId, setSelectedId] = React.useState<string>('');
-  
-  const onSelect = (event: React.MouseEvent) => {``
+
+  const onSelect = (event: React.MouseEvent) => {
     setSelectedId(event.currentTarget.id);
   };
-  
+
   const onKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === ' ' || event.key === 'Enter') {
       event.preventDefault();
@@ -26,32 +26,14 @@ const TileSingleSelect: React.FunctionComponent = () => {
   };
 
   return (
-    <div>
-      <Tile
-        title="Tile 1"
-        id="tile-1"
-        onClick={onSelect}
-        onKeyDown={onKeyDown}
-        isSelected={selectedId === 'tile-1'}
-      />
-      <Tile
-        title="Tile 2"
-        id="tile-2"
-        onClick={onSelect}
-        onKeyDown={onKeyDown}
-        isSelected={selectedId === 'tile-2'}
-      />
-      <Tile title="Tile 3" id="tile-3" isDisabled />
-      <Tile
-        title="Tile 4"
-        id="tile-4"
-        onClick={onSelect}
-        onKeyDown={onKeyDown}
-        isSelected={selectedId === 'tile-4'}
-      />
+    <div role="listbox" aria-label="Single selection tiles">
+      <Tile title="Tile 1" id="tile-1" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-1'} />
+      <Tile title="Tile 2" id="tile-2" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-2'} />
+      <Tile title="Tile 3" id="tile-3" isDisabled isSelected={selectedId === 'tile-3'} />
+      <Tile title="Tile 4" id="tile-4" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-4'} />
     </div>
   );
-}
+};
 ```
 
 ### Tiles with multiple selection
@@ -62,18 +44,18 @@ import { Tile } from '@patternfly/react-core';
 
 const TileMultiSelect: React.FunctionComponent = () => {
   const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
-  
+
   const onSelect = (event: React.MouseEvent | React.KeyboardEvent) => {
     const targetId = event.currentTarget.id;
     setSelectedIds(prevSelectedIds => {
-      const newSelectedIds = prevSelectedIds.includes(targetId) ? 
-        prevSelectedIds.filter(id => id !== targetId) : 
-        [...prevSelectedIds, targetId] 
+      const newSelectedIds = prevSelectedIds.includes(targetId)
+        ? prevSelectedIds.filter(id => id !== targetId)
+        : [...prevSelectedIds, targetId];
       console.log('tile selections: ', newSelectedIds);
       return newSelectedIds;
     });
   };
-  
+
   const onKeyDown = (event: React.KeyboardEvent) => {
     console.log(event.key);
     if (event.key === ' ' || event.key === 'Enter') {
@@ -81,9 +63,9 @@ const TileMultiSelect: React.FunctionComponent = () => {
       onSelect(event);
     }
   };
-    
+
   return (
-    <div>
+    <div role="listbox" aria-multiselectable={true} aria-label="Multiselectable tiles">
       <Tile
         title="Tile 1"
         id="tile-1"
@@ -108,5 +90,5 @@ const TileMultiSelect: React.FunctionComponent = () => {
       />
     </div>
   );
-}
+};
 ```