SONAR-12215 Make projects list accessible

3 files changed, 88 insertions, 24 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx
index a7967ec2bcf..d2347e98c46 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx
@@ -21,6 +21,7 @@ import * as React from 'react';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { List, ListRowProps } from 'react-virtualized/dist/commonjs/List';
 import { WindowScroller } from 'react-virtualized/dist/commonjs/WindowScroller';
+import { translate } from 'sonar-ui-common/helpers/l10n';
 import { OnboardingContext } from '../../../app/components/OnboardingContext';
 import EmptySearch from '../../../components/common/EmptySearch';
 import { Query } from '../query';
@@ -74,16 +75,18 @@ export default class ProjectsList extends React.PureComponent<Props> {
     const project = this.props.projects[index];
     const height = this.getCardHeight();
     return (
-      <div key={key} style={{ ...style, height }}>
-        <ProjectCard
-          currentUser={this.props.currentUser}
-          handleFavorite={this.props.handleFavorite}
-          height={height}
-          key={project.key}
-          organization={this.props.organization}
-          project={project}
-          type={this.props.cardType}
-        />
+      <div key={key} role="row" style={{ ...style, height }}>
+        <div role="gridcell">
+          <ProjectCard
+            currentUser={this.props.currentUser}
+            handleFavorite={this.props.handleFavorite}
+            height={height}
+            key={project.key}
+            organization={this.props.organization}
+            project={project}
+            type={this.props.cardType}
+          />
+        </div>
       </div>
     );
   };
@@ -97,6 +100,7 @@ export default class ProjectsList extends React.PureComponent<Props> {
             {({ width }) => (
               <div>
                 <List
+                  aria-label={translate('project_plural')}
                   autoHeight={true}
                   height={height}
                   isScrolling={isScrolling}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsList-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsList-test.tsx
index 160b343c4bf..2a47a54ce70 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsList-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsList-test.tsx
@@ -19,10 +19,27 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
+import { ListRowProps } from 'react-virtualized';
+import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
+import { WindowScroller } from 'react-virtualized/dist/commonjs/WindowScroller';
 import ProjectsList from '../ProjectsList';
 
-it('renders', () => {
-  expect(shallowRender()).toMatchSnapshot();
+jest.mock('react-virtualized/dist/commonjs/AutoSizer');
+jest.mock('react-virtualized/dist/commonjs/WindowScroller');
+
+it('renders correctly', () => {
+  const wrapper = shallowRender();
+  expect(
+    wrapper
+      .find(WindowScroller)
+      .dive()
+      .find(AutoSizer)
+      .dive()
+  ).toMatchSnapshot('list element');
+
+  expect(
+    wrapper.instance().renderRow({ index: 0, key: 'foo-key', style: {} } as ListRowProps)
+  ).toMatchSnapshot('row element');
 });
 
 it('renders different types of "no projects"', () => {
@@ -32,7 +49,7 @@ it('renders different types of "no projects"', () => {
 });
 
 function shallowRender(props?: any) {
-  return shallow(
+  return shallow<ProjectsList>(
     <ProjectsList
       cardType="overall"
       currentUser={{ isLoggedIn: true }}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsList-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsList-test.tsx.snap
index 14bf2862347..beb61d2d3fb 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsList-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectsList-test.tsx.snap
@@ -1,19 +1,62 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders 1`] = `
+exports[`renders correctly: list element 1`] = `
+<div>
+  <List
+    aria-label="project_plural"
+    autoHeight={true}
+    estimatedRowSize={30}
+    height={200}
+    isScrolling={false}
+    noRowsRenderer={[Function]}
+    onRowsRendered={[Function]}
+    onScroll={[Function]}
+    overscanIndicesGetter={[Function]}
+    overscanRowCount={2}
+    rowCount={2}
+    rowHeight={163}
+    rowRenderer={[Function]}
+    scrollToAlignment="auto"
+    scrollToIndex={-1}
+    scrollTop={0}
+    style={
+      Object {
+        "outline": "none",
+      }
+    }
+    width={200}
+  />
+</div>
+`;
+
+exports[`renders correctly: row element 1`] = `
 <div
-  className="projects-list"
+  role="row"
+  style={
+    Object {
+      "height": 143,
+    }
+  }
 >
-  <WindowScroller
-    onResize={[Function]}
-    onScroll={[Function]}
-    scrollElement={[Window]}
-    scrollingResetTimeInterval={150}
-    serverHeight={0}
-    serverWidth={0}
+  <div
+    role="gridcell"
   >
-    <Component />
-  </WindowScroller>
+    <ProjectCard
+      currentUser={
+        Object {
+          "isLoggedIn": true,
+        }
+      }
+      height={143}
+      project={
+        Object {
+          "key": "foo",
+          "name": "Foo",
+        }
+      }
+      type="overall"
+    />
+  </div>
 </div>
 `;