chore(card): add keyboard interaction a11y test, clean up docs (#5082)

patternfly · Nov 5, 2020 · 72f6cdd · 72f6cdd
1 parent 603e9b7
commit 72f6cdd
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 30 deletions.
diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md
@@ -6,7 +6,7 @@ propComponents: ['Card', 'CardHeaderMain', 'CardTitle', 'CardBody', 'CardFooter'
 ouia: true
 ---
 
-import pfLogo from './pfLogo.svg'; 
+import pfLogo from './pfLogo.svg';
 
 ## Examples
 ### Basic
@@ -24,8 +24,8 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 ### With image and actions
 ```js
 import React from 'react';
-import { Brand, Card, CardHeader, CardHeaderMain, CardActions, CardTitle, CardBody, CardFooter, Checkbox, Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle } from '@patternfly/react-core'; 
-import pfLogo from './pfLogo.svg'; 
+import { Brand, Card, CardHeader, CardHeaderMain, CardActions, CardTitle, CardBody, CardFooter, Checkbox, Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, KebabToggle } from '@patternfly/react-core';
+import pfLogo from './pfLogo.svg';
 
 class KebabDropdown extends React.Component {
   constructor(props) {
@@ -45,11 +45,11 @@ class KebabDropdown extends React.Component {
       });
     };
     this.onClick = (checked, event) => {
-      const target = event.target; 
-      const value = target.type === 'checkbox' ? target.checked : target.value; 
-      const name = target.name; 
-      this.setState({ [name]: value }); 
-    }; 
+      const target = event.target;
+      const value = target.type === 'checkbox' ? target.checked : target.value;
+      const name = target.name;
+      this.setState({ [name]: value });
+    };
   }
 
   render() {
@@ -107,7 +107,7 @@ class KebabDropdown extends React.Component {
 ### Card header in card head
 ```js
 import React from 'react';
-import { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Checkbox, Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle } from '@patternfly/react-core'; 
+import { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Checkbox, Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, KebabToggle } from '@patternfly/react-core';
 
 class KebabDropdown extends React.Component {
   constructor(props) {
@@ -127,11 +127,11 @@ class KebabDropdown extends React.Component {
       });
     };
     this.onClick = (checked, event) => {
-      const target = event.target; 
-      const value = target.type === 'checkbox' ? target.checked : target.value; 
-      const name = target.name; 
-      this.setState({ [name]: value }); 
-    }; 
+      const target = event.target;
+      const value = target.type === 'checkbox' ? target.checked : target.value;
+      const name = target.name;
+      this.setState({ [name]: value });
+    };
   }
 
   render() {
@@ -186,7 +186,7 @@ class KebabDropdown extends React.Component {
 ### Only actions in card head (no header/footer)
 ```js
 import React from 'react';
-import { Checkbox, Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, Card, CardHeader, CardActions, CardTitle, CardBody } from '@patternfly/react-core'; 
+import { Checkbox, Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, KebabToggle, Card, CardHeader, CardActions, CardTitle, CardBody } from '@patternfly/react-core';
 
 class KebabDropdown extends React.Component {
   constructor(props) {
@@ -206,11 +206,11 @@ class KebabDropdown extends React.Component {
       });
     };
     this.onClick = (checked, event) => {
-      const target = event.target; 
-      const value = target.type === 'checkbox' ? target.checked : target.value; 
-      const name = target.name; 
-      this.setState({ [name]: value }); 
-    }; 
+      const target = event.target;
+      const value = target.type === 'checkbox' ? target.checked : target.value;
+      const name = target.name;
+      this.setState({ [name]: value });
+    };
   }
 
   render() {
@@ -270,7 +270,7 @@ import { Brand, Card, CardBody, CardFooter, CardHeader, CardHeaderMain, CardTitl
     <CardHeaderMain>
       <Brand src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }}/>
     </CardHeaderMain>
-  </CardHeader> 
+  </CardHeader>
   <CardTitle>Header</CardTitle>
   <CardBody>Body</CardBody>
   <CardFooter>Footer</CardFooter>
@@ -280,7 +280,7 @@ import { Brand, Card, CardBody, CardFooter, CardHeader, CardHeaderMain, CardTitl
 ### With no footer
 ```js
 import React from 'react';
-import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+import { Card, CardTitle, CardBody } from '@patternfly/react-core';
 
 <Card>
   <CardTitle>Header</CardTitle>
@@ -291,7 +291,7 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 ### With no header
 ```js
 import React from 'react';
-import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+import { Card, CardBody, CardFooter } from '@patternfly/react-core';
 
 <Card>
   <CardBody>This card has no header</CardBody>
@@ -302,7 +302,7 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 ### With only a content section
 ```js
 import React from 'react';
-import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+import { Card, CardBody } from '@patternfly/react-core';
 
 <Card>
   <CardBody>Body</CardBody>
@@ -364,7 +364,7 @@ import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
 ### Selectable and selected
 ```js
 import React from 'react';
-import { Card, CardHeader, CardActions, CardTitle, CardBody, Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, } from '@patternfly/react-core'; 
+import { Card, CardHeader, CardActions, CardTitle, CardBody, Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, KebabToggle, } from '@patternfly/react-core';
 
 class SelectableCard extends React.Component {
   constructor(props) {
@@ -388,7 +388,7 @@ class SelectableCard extends React.Component {
       this.setState({
         selected: newSelected
       })
-    }; 
+    };
     this.onToggle = (isOpen, event) => {
       event.stopPropagation()
       this.setState({

diff --git a/packages/react-integration/cypress/integration/card.spec.ts b/packages/react-integration/cypress/integration/card.spec.ts
@@ -37,8 +37,16 @@ describe('Card Demo Test', () => {
   });
 
   it('Verify card is flat', () => {
-    cy.get('article')
-      .last()
-      .should('have.class', 'pf-m-flat');
+    cy.get('#flatCard').should('have.class', 'pf-m-flat');
+  });
+
+  it('Verify that selectable card can be selected and unselected with keyboard input', () => {
+    cy.get('#selectableCard').focus();
+    cy.focused().should('have.class', 'pf-m-selectable');
+    cy.focused().should('not.have.class', 'pf-m-selected');
+    cy.focused().type('{enter}');
+    cy.focused().should('have.class', 'pf-m-selected');
+    cy.focused().type('{enter}');
+    cy.focused().should('not.have.class', 'pf-m-selected');
   });
 });
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
@@ -1,8 +1,28 @@
 import React from 'react';
 import { Card, CardTitle, CardBody, CardFooter } from '@patternfly/react-core';
+interface CardDemoState {
+  selected: string;
+}
 
 export class CardDemo extends React.Component {
   static displayName = 'CardDemo';
+
+  state: CardDemoState = {
+    selected: null
+  };
+
+  onKeyDown = (event: any) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    if ([13, 32].includes(event.keyCode)) {
+      const newSelected = event.currentTarget.id === this.state.selected ? null : event.currentTarget.id;
+      this.setState({
+        selected: newSelected
+      });
+    }
+  };
+
   componentDidMount() {
     window.scrollTo(0, 0);
   }
@@ -36,7 +56,18 @@ export class CardDemo extends React.Component {
           <CardFooter>Footer</CardFooter>
         </Card>
         <br></br>
-        <Card isFlat>
+        <Card id="flatCard" isFlat>
+          <CardTitle>Header</CardTitle>
+          <CardBody>Body</CardBody>
+          <CardFooter>Footer</CardFooter>
+        </Card>
+
+        <Card
+          id="selectableCard"
+          isSelectable
+          isSelected={this.state.selected === 'selectableCard'}
+          onKeyDown={this.onKeyDown}
+        >
           <CardTitle>Header</CardTitle>
           <CardBody>Body</CardBody>
           <CardFooter>Footer</CardFooter>