SONAR-15901 Make SelectList component more accessible

3 files changed, 44 insertions, 29 deletions

diff --git a/server/sonar-web/src/main/js/components/controls/SelectListListElement.tsx b/server/sonar-web/src/main/js/components/controls/SelectListListElement.tsx
index a3d3aac73f2..d839989e101 100644
--- a/server/sonar-web/src/main/js/components/controls/SelectListListElement.tsx
+++ b/server/sonar-web/src/main/js/components/controls/SelectListListElement.tsx
@@ -27,7 +27,7 @@ interface Props {
   element: string;
   onSelect: (element: string) => Promise<void>;
   onUnselect: (element: string) => Promise<void>;
-  renderElement: (element: string) => React.ReactNode;
+  renderElement: (element: string) => React.ReactNode | [React.ReactNode, React.ReactNode];
   selected: boolean;
 }
 
@@ -60,23 +60,28 @@ export default class SelectListListElement extends React.PureComponent<Props, St
   };
 
   render() {
+    let item = this.props.renderElement(this.props.element);
+    let extra;
+    if (Array.isArray(item)) {
+      extra = item[1];
+      item = item[0];
+    }
     return (
       <li
-        className={classNames({
+        className={classNames('display-flex-center', {
           'select-list-list-disabled': this.props.disabled
         })}>
         <Checkbox
           checked={this.props.selected}
-          className={classNames('select-list-list-checkbox display-flex-center', {
+          className={classNames('select-list-list-checkbox flex-1', {
             active: this.props.active
           })}
           disabled={this.props.disabled}
           loading={this.state.loading}
           onCheck={this.handleCheck}>
-          <span className="little-spacer-left flex-1">
-            {this.props.renderElement(this.props.element)}
-          </span>
+          <span className="little-spacer-left">{item}</span>
         </Checkbox>
+        {extra && <span className="select-list-list-extra">{extra}</span>}
       </li>
     );
   }
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/SelectListListElement-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/SelectListListElement-test.tsx
index ca127222e04..e2e060f40ad 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/SelectListListElement-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/SelectListListElement-test.tsx
@@ -22,26 +22,36 @@ import * as React from 'react';
 import { waitAndUpdate } from '../../../helpers/testUtils';
 import SelectListListElement from '../SelectListListElement';
 
-const listElement = (
-  <SelectListListElement
-    element="foo"
-    key="foo"
-    onSelect={jest.fn(() => Promise.resolve())}
-    onUnselect={jest.fn(() => Promise.resolve())}
-    renderElement={(foo: string) => foo}
-    selected={false}
-  />
-);
-
 it('should display a loader when checking', async () => {
-  const wrapper = shallow<SelectListListElement>(listElement);
-  expect(wrapper).toMatchSnapshot();
+  const wrapper = shallowRender();
+  expect(wrapper).toMatchSnapshot('default');
   expect(wrapper.state().loading).toBe(false);
 
-  (wrapper.instance() as SelectListListElement).handleCheck(true);
+  wrapper.instance().handleCheck(true);
   expect(wrapper.state().loading).toBe(true);
-  expect(wrapper).toMatchSnapshot();
+  expect(wrapper).toMatchSnapshot('loading');
 
   await waitAndUpdate(wrapper);
   expect(wrapper.state().loading).toBe(false);
 });
+
+it('should correctly handle a render callback that returns 2 elements', () => {
+  const wrapper = shallowRender({
+    renderElement: (foo: string) => [foo, 'extra info']
+  });
+  expect(wrapper.find('.select-list-list-extra').exists()).toBe(true);
+});
+
+function shallowRender(props: Partial<SelectListListElement['props']> = {}) {
+  return shallow<SelectListListElement>(
+    <SelectListListElement
+      element="foo"
+      key="foo"
+      onSelect={jest.fn(() => Promise.resolve())}
+      onUnselect={jest.fn(() => Promise.resolve())}
+      renderElement={(foo: string) => foo}
+      selected={false}
+      {...props}
+    />
+  );
+}
diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SelectListListElement-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SelectListListElement-test.tsx.snap
index 0b05a479c5c..9acb0969df1 100644
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SelectListListElement-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/SelectListListElement-test.tsx.snap
@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should display a loader when checking 1`] = `
+exports[`should display a loader when checking: default 1`] = `
 <li
-  className=""
+  className="display-flex-center"
 >
   <Checkbox
     checked={false}
-    className="select-list-list-checkbox display-flex-center"
+    className="select-list-list-checkbox flex-1"
     loading={false}
     onCheck={[Function]}
     thirdState={false}
   >
     <span
-      className="little-spacer-left flex-1"
+      className="little-spacer-left"
     >
       foo
     </span>
@@ -20,19 +20,19 @@ exports[`should display a loader when checking 1`] = `
 </li>
 `;
 
-exports[`should display a loader when checking 2`] = `
+exports[`should display a loader when checking: loading 1`] = `
 <li
-  className=""
+  className="display-flex-center"
 >
   <Checkbox
     checked={false}
-    className="select-list-list-checkbox display-flex-center"
+    className="select-list-list-checkbox flex-1"
     loading={true}
     onCheck={[Function]}
     thirdState={false}
   >
     <span
-      className="little-spacer-left flex-1"
+      className="little-spacer-left"
     >
       foo
     </span>