@patternfly/react-core 4.198.12 → 4.198.15

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -8,6 +8,7 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
@@ -15,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
@@ -77,6 +83,7 @@ import { css } from '@patternfly/react-styles';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
@@ -85,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,
@@ -177,6 +185,11 @@ class BasicNotificationDrawer extends React.Component {
         showNotifications: showNotifications
       });
     };
+
+    this.focusDrawer = () => {
+      const firstTabbableItem = this.drawerRef.current.querySelector('a, button');
+      firstTabbableItem.focus();
+    };
   }
 
   render() {
@@ -257,7 +270,7 @@ class BasicNotificationDrawer extends React.Component {
                 </ToolbarItem>
                 <ToolbarItem>
                   <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-                    <HelpIcon />
+                    <QuestionCircleIcon />
                   </Button>
                 </ToolbarItem>
               </ToolbarGroup>
@@ -357,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}
@@ -497,6 +510,7 @@ class BasicNotificationDrawer extends React.Component {
           sidebar={Sidebar}
           isManagedSidebar
           notificationDrawer={notificationDrawer}
+          onNotificationDrawerExpand={this.focusDrawer}
           isNotificationDrawerExpanded={isDrawerExpanded}
           skipToContent={PageSkipToContent}
           breadcrumb={PageBreadcrumb}
@@ -523,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 {
@@ -587,6 +603,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
@@ -594,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,
@@ -733,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() {
@@ -816,7 +842,7 @@ class GroupedNotificationDrawer extends React.Component {
                 </ToolbarItem>
                 <ToolbarItem>
                   <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-                    <HelpIcon />
+                    <QuestionCircleIcon />
                   </Button>
                 </ToolbarItem>
               </ToolbarGroup>
@@ -916,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}
@@ -1211,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/Page/Page.md

@@ -7,6 +7,7 @@ import { css } from '@patternfly/react-styles';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
@@ -81,6 +82,7 @@ import { css } from '@patternfly/react-styles';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
@@ -240,7 +242,7 @@ class PageLayoutGrouped extends React.Component {
               </ToolbarItem>
               <ToolbarItem>
                 <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-                  <HelpIcon />
+                  <QuestionCircleIcon />
                 </Button>
               </ToolbarItem>
             </ToolbarGroup>
@@ -420,6 +422,7 @@ import { css } from '@patternfly/react-styles';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgBrand from './imgBrand.svg';
 import imgAvatar from './imgAvatar.svg';
 
@@ -518,7 +521,7 @@ class PageLayoutGrouped extends React.Component {
           </PageHeaderToolsItem>
           <PageHeaderToolsItem>
             <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-              <HelpIcon />
+              <QuestionCircleIcon />
             </Button>
           </PageHeaderToolsItem>
         </PageHeaderToolsGroup>
@@ -662,6 +665,7 @@ import { css } from '@patternfly/react-styles';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgBrand from './imgBrand.svg';
 import imgAvatar from './imgAvatar.svg';
 
@@ -739,7 +743,7 @@ class PageLayoutGroupedAlt extends React.Component {
           </PageHeaderToolsItem>
           <PageHeaderToolsItem>
             <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-              <HelpIcon />
+              <QuestionCircleIcon />
             </Button>
           </PageHeaderToolsItem>
         </PageHeaderToolsGroup>

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>
   );
-}
+};
 ```

package/src/demos/examples/DashboardHeader.js

@@ -24,6 +24,7 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import imgBrand from './pfColorLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
@@ -134,7 +135,7 @@ export default class DashboardHeader extends React.Component {
               </ToolbarItem>
               <ToolbarItem>
                 <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-                  <HelpIcon />
+                  <QuestionCircleIcon />
                 </Button>
               </ToolbarItem>
             </ToolbarGroup>