feat(plugins/plugin-client-common): improve accessibility of "red" error grid cells

Fixes #4938

Author: starpit

plugins/plugin-client-common/src/components/Content/Table/ErrorCell.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2020 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react'
+
+export default function ErrorCell() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <path fill="var(--color-base0E)" d="M0 0H24V24H0z"></path>
+        <path
+          fill="var(--color-base07)"
+          d="M15.0914286 16L12 12.9085714 8.90857143 16 8 15.0914286 11.0914286 12 8 8.90857143 8.90857143 8 12 11.0914286 15.0914286 8 16 8.90857143 12.9085714 12 16 15.0914286z"
+        ></path>
+      </g>
+    </svg>
+  )
+}

plugins/plugin-client-common/src/components/Content/Table/Grid.tsx

@@ -18,6 +18,7 @@ import { Tab, REPL, Table as KuiTable } from '@kui-shell/core'
 
 import * as React from 'react'
 
+import ErrorCell from './ErrorCell'
 import { onClickForCell } from './TableCell'
 import { NamedDataTableRow } from './kui2carbon'
 
@@ -52,28 +53,29 @@ export default class Grid<P extends Props> extends React.PureComponent<P> {
       <div className="bx--data-table kui--data-table-as-grid" style={style}>
         {response.body.map((kuiRow, kidx) => {
           const badgeCell = gridableColumn !== -1 && kuiRow.attributes[gridableColumn]
-          const title = `${kuiRow.name}: ${badgeCell ? badgeCell.value : ''}`
+          const title = `${kuiRow.name}\n${badgeCell ? badgeCell.value : ''}`
           const css = badgeCell ? badgeCell.css : 'kui--status-unknown'
 
           // cell label, to be displayed inside of the grid cell
           const label = <span className="kui--grid-cell-label">{kuiRow.name.slice(0, 2)}</span>
 
+          const props = {
+            title,
+            key: kuiRow.attributes[gridableColumn].css, // force restart of animation if color changes
+            'data-tag': 'badge-circle',
+            'data-just-updated': this.props.justUpdated[kuiRow.rowKey || kuiRow.name],
+            className: css,
+            onClick: onClickForCell(
+              kuiRow,
+              tab,
+              repl,
+              kuiRow.attributes.find(_ => _.onclick)
+            )
+          }
+
           return (
             <span key={kidx} data-tag="badge" data-entity-name={kuiRow.name}>
-              <span
-                title={title}
-                data-tag="badge-circle"
-                data-just-updated={this.props.justUpdated[kuiRow.rowKey || kuiRow.name]}
-                className={css}
-                onClick={onClickForCell(
-                  kuiRow,
-                  tab,
-                  repl,
-                  kuiRow.attributes.find(_ => _.onclick)
-                )}
-              >
-                {label}
-              </span>
+              <span {...props}>{/red-background/.test(css) ? <ErrorCell /> : label}</span>
             </span>
           )
         })}

plugins/plugin-client-common/src/components/Content/Table/TableCell.tsx

@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
-import { Cell as KuiCell, Row as KuiRow, Tab, REPL } from '@kui-shell/core'
-
 import * as React from 'react'
 import { TableCell, DataTableCell } from 'carbon-components-react'
+import { Cell as KuiCell, Row as KuiRow, Tab, REPL } from '@kui-shell/core'
+
+import ErrorCell from './ErrorCell'
 
 /**
  * Generate an onclick handler for a cell
@@ -79,6 +80,8 @@ export default function renderCell(kuiRow: KuiRow, justUpdated: boolean, tab: Ta
         ? (kuiRow.css || '') + (kuiRow.onclick ? ' clickable' : '')
         : (kuiRow.attributes[cidx - 1].css || '') + (kuiRow.attributes[cidx - 1].onclick ? ' clickable' : ''))
 
+    const css = cidx > 0 ? kuiRow.attributes[cidx - 1].css : undefined
+
     // the text value of the cell
     const innerText = (kuiRow.attributes[cidx - 1] && kuiRow.attributes[cidx - 1].valueDom) || cell.value
 
@@ -96,12 +99,14 @@ export default function renderCell(kuiRow: KuiRow, justUpdated: boolean, tab: Ta
         >
           {tag === 'badge' && (
             <span
-              key={kuiRow.attributes[cidx - 1].css /* force restart of animation if color changes */}
+              key={css /* force restart of animation if color changes */}
               title={innerText}
+              className={css || 'kui--status-unknown'}
               data-tag="badge-circle"
-              className={kuiRow.attributes[cidx - 1].css}
               data-just-updated={justUpdated || undefined}
-            />
+            >
+              {/red-background/.test(css) ? <ErrorCell /> : undefined}
+            </span>
           )}
           <span className="kui--cell-inner-text">{innerText}</span>
         </span>