#6913: grid cards keyboard navigation (#10150)

Makes grid cards keyboard navigable and accessible again

On Behalf of DB Systel

Co-authored-by: Florian Kellner <florian.fl.kellner@deutschebahn.com>

web/client/components/misc/GridCard.jsx

@@ -47,7 +47,11 @@ class GridCard extends React.Component {
         return (<div
             style={this.props.style}
             className={"gridcard" + (this.props.className ? " " + this.props.className : "")}
-            onClick={this.props.onClick}>
+            onClick={this.props.onClick}
+            role={this.props.onClick ? "link" : ""}
+            tabIndex={0}
+            onKeyDown={(e) => e.key === 'Enter' ? this.props.onClick(e) : null}
+        >
             {!isNil(this.props.header) ? <div style={this.props.titleStyle} className="gridcard-title bg-primary">{this.props.header}</div> : null}
             {this.props.children}
             {this.renderActions()}

web/client/components/misc/__tests__/GridCard-test.jsx

@@ -61,4 +61,13 @@ describe('This test for GridCard', () => {
         );
         expect(button).toExist();
     });
+
+    it('enter triggers onClick event', (done) => {
+        const container = document.getElementById('container');
+        const testName = "test";
+        const testDescription = "testDescription";
+        ReactDOM.render(
+            <GridCard header={testName} onClick={() => {done();}}>{testDescription}</GridCard>, container);
+        TestUtils.Simulate.keyDown(container.firstElementChild, {key: 'Enter'});
+    });
 });

web/client/components/misc/style/gridcard.css

@@ -3,7 +3,7 @@
     transition: box-shadow 250ms;
 }
 
-.gridcard:hover {
+.gridcard:hover, .gridcard:focus {
     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }
 

web/client/themes/default/less/maps-properties.less

@@ -338,7 +338,7 @@
         .gridcard {
             height: @square-btn-size * 4.5;
             transition: all 0.3s;
-            &:hover {
+            &:hover, &:focus {
                 .shadow-far;
                 cursor: pointer;
                 z-index: 10;