From fa8ea6c82a8aedc01a4fe7ecdf1e000b53a07f54 Mon Sep 17 00:00:00 2001
From: Charles Wahome <thewahome.cw@gmail.com>
Date: Tue, 3 Aug 2021 10:36:43 +0300
Subject: [PATCH 1/2] activate scroll on hover using css

---
 src/app/views/sidebar/Sidebar.styles.ts       | 10 ++-
 .../sidebar/sample-queries/SampleQueries.tsx  | 67 +++++++------------
 2 files changed, 31 insertions(+), 46 deletions(-)

diff --git a/src/app/views/sidebar/Sidebar.styles.ts b/src/app/views/sidebar/Sidebar.styles.ts
index 07661c73d..bc83111f1 100644
--- a/src/app/views/sidebar/Sidebar.styles.ts
+++ b/src/app/views/sidebar/Sidebar.styles.ts
@@ -21,10 +21,14 @@ export const sidebarStyles = (theme: ITheme) => {
       cursor: 'pointer',
       maxHeight: pageHeightInVh,
       minHeight: pageHeightInVh,
-      overflowY: 'auto',
-      overflowX: 'auto',
+      overflow: 'hidden',
       fontSize: FontSizes.medium,
-      background: 'inherit'
+      background: 'inherit',
+      selectors: {
+        ':hover': {
+          overflow: 'scroll',
+        },
+      },
     },
     pullLeft: {
       float: 'left'
diff --git a/src/app/views/sidebar/sample-queries/SampleQueries.tsx b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
index 6268624db..67a76451a 100644
--- a/src/app/views/sidebar/sample-queries/SampleQueries.tsx
+++ b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
@@ -1,21 +1,7 @@
 import {
-  Announced,
-  DetailsList,
-  DetailsRow,
-  FontSizes,
-  FontWeights,
-  getId,
-  GroupHeader,
-  IColumn,
-  Icon,
-  MessageBar,
-  MessageBarType,
-  SearchBox,
-  SelectionMode,
-  Spinner,
-  SpinnerSize,
-  styled,
-  TooltipHost,
+  Announced, DetailsList, DetailsRow, FontSizes, FontWeights, getId,
+  GroupHeader, IColumn, Icon, MessageBar, MessageBarType, SearchBox,
+  SelectionMode, Spinner, SpinnerSize, styled, TooltipHost
 } from 'office-ui-fabric-react';
 import React, { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
@@ -48,7 +34,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
   constructor(props: ISampleQueriesProps) {
     super(props);
     this.state = {
-      sampleQueries: [],
+      sampleQueries: []
     };
   }
 
@@ -437,31 +423,26 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
         <Announced
           message={`${sampleQueries.length} search results available.`}
         />
-        <div role='navigation'
-          onMouseEnter={() => this.setState({ isHoverOverSampleQueriesList: true })}
-          onMouseLeave={() => this.setState({ isHoverOverSampleQueriesList: false })}>
-          <DetailsList
-            styles={this.state.isHoverOverSampleQueriesList ? { root: { overflow: 'scroll' } } : { root: { overflow: 'hidden' } }}
-            className={classes.queryList}
-            cellStyleProps={{
-              cellRightPadding: 0,
-              cellExtraRightPadding: 0,
-              cellLeftPadding: 0,
-            }}
-            onRenderItemColumn={this.renderItemColumn}
-            items={sampleQueries}
-            selectionMode={SelectionMode.none}
-            columns={columns}
-            groups={groups}
-            groupProps={{
-              showEmptyGroups: true,
-              onRenderHeader: this.renderGroupHeader,
-            }}
-            onRenderRow={this.renderRow}
-            onRenderDetailsHeader={this.renderDetailsHeader}
-            onItemInvoked={this.querySelected}
-          />
-        </div>
+        <DetailsList
+          className={classes.queryList}
+          cellStyleProps={{
+            cellRightPadding: 0,
+            cellExtraRightPadding: 0,
+            cellLeftPadding: 0,
+          }}
+          onRenderItemColumn={this.renderItemColumn}
+          items={sampleQueries}
+          selectionMode={SelectionMode.none}
+          columns={columns}
+          groups={groups}
+          groupProps={{
+            showEmptyGroups: true,
+            onRenderHeader: this.renderGroupHeader,
+          }}
+          onRenderRow={this.renderRow}
+          onRenderDetailsHeader={this.renderDetailsHeader}
+          onItemInvoked={this.querySelected}
+        />
       </div>
     );
   }

From 837d8e5ee855bd8ca358ae5f9f7bf84e51b24814 Mon Sep 17 00:00:00 2001
From: Charles Wahome <thewahome.cw@gmail.com>
Date: Tue, 3 Aug 2021 11:13:32 +0300
Subject: [PATCH 2/2] add accessibility role attribute

---
 .../sidebar/sample-queries/SampleQueries.tsx  | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/app/views/sidebar/sample-queries/SampleQueries.tsx b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
index 67a76451a..1bedc777a 100644
--- a/src/app/views/sidebar/sample-queries/SampleQueries.tsx
+++ b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
@@ -423,26 +423,28 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
         <Announced
           message={`${sampleQueries.length} search results available.`}
         />
-        <DetailsList
-          className={classes.queryList}
-          cellStyleProps={{
-            cellRightPadding: 0,
-            cellExtraRightPadding: 0,
-            cellLeftPadding: 0,
-          }}
-          onRenderItemColumn={this.renderItemColumn}
-          items={sampleQueries}
-          selectionMode={SelectionMode.none}
-          columns={columns}
-          groups={groups}
-          groupProps={{
-            showEmptyGroups: true,
-            onRenderHeader: this.renderGroupHeader,
-          }}
-          onRenderRow={this.renderRow}
-          onRenderDetailsHeader={this.renderDetailsHeader}
-          onItemInvoked={this.querySelected}
-        />
+        <div role="navigation">
+          <DetailsList
+            className={classes.queryList}
+            cellStyleProps={{
+              cellRightPadding: 0,
+              cellExtraRightPadding: 0,
+              cellLeftPadding: 0,
+            }}
+            onRenderItemColumn={this.renderItemColumn}
+            items={sampleQueries}
+            selectionMode={SelectionMode.none}
+            columns={columns}
+            groups={groups}
+            groupProps={{
+              showEmptyGroups: true,
+              onRenderHeader: this.renderGroupHeader,
+            }}
+            onRenderRow={this.renderRow}
+            onRenderDetailsHeader={this.renderDetailsHeader}
+            onItemInvoked={this.querySelected}
+          />
+        </div>
       </div>
     );
   }