@patternfly/react-core 4.198.14 → 4.198.15

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