Merge pull request #6094 from aschlaep/search-tab-index

Add tab navigation to the search box

packages/documentsearch/src/searchoverlay.tsx

@@ -26,6 +26,9 @@ const DOWN_BUTTON_CLASS = 'jp-DocumentSearch-down-button';
 const CLOSE_BUTTON_CLASS = 'jp-DocumentSearch-close-button';
 const REGEX_ERROR_CLASS = 'jp-DocumentSearch-regex-error';
 
+const BUTTON_CONTENT_CLASS = 'jp-DocumentSearch-button-content';
+const BUTTON_WRAPPER_CLASS = 'jp-DocumentSearch-button-wrapper';
+
 interface ISearchEntryProps {
   onCaseSensitiveToggled: Function;
   onRegexToggled: Function;
@@ -71,16 +74,29 @@ class SearchEntry extends React.Component<ISearchEntryProps> {
           value={this.props.inputText}
           onChange={e => this.props.onChange(e)}
           onKeyDown={e => this.props.onKeydown(e)}
+          tabIndex={1}
           ref="searchInputNode"
         />
         <button
-          className={caseButtonToggleClass}
+          className={BUTTON_WRAPPER_CLASS}
           onClick={() => this.props.onCaseSensitiveToggled()}
-        />
+          tabIndex={2}
+        >
+          <span
+            className={`${caseButtonToggleClass} ${BUTTON_CONTENT_CLASS}`}
+            tabIndex={-1}
+          />
+        </button>
         <button
-          className={regexButtonToggleClass}
+          className={BUTTON_WRAPPER_CLASS}
           onClick={() => this.props.onRegexToggled()}
-        />
+          tabIndex={3}
+        >
+          <span
+            className={`${regexButtonToggleClass} ${BUTTON_CONTENT_CLASS}`}
+            tabIndex={-1}
+          />
+        </button>
       </div>
     );
   }
@@ -95,13 +111,25 @@ function UpDownButtons(props: IUpDownProps) {
   return (
     <div className={UP_DOWN_BUTTON_WRAPPER_CLASS}>
       <button
-        className={UP_BUTTON_CLASS}
+        className={BUTTON_WRAPPER_CLASS}
         onClick={() => props.onHighlightPrevious()}
-      />
+        tabIndex={4}
+      >
+        <span
+          className={`${UP_BUTTON_CLASS} ${BUTTON_CONTENT_CLASS}`}
+          tabIndex={-1}
+        />
+      </button>
       <button
-        className={DOWN_BUTTON_CLASS}
+        className={BUTTON_WRAPPER_CLASS}
         onClick={() => props.onHightlightNext()}
-      />
+        tabIndex={5}
+      >
+        <span
+          className={`${DOWN_BUTTON_CLASS} ${BUTTON_CONTENT_CLASS}`}
+          tabIndex={-1}
+        />
+      </button>
     </div>
   );
 }
@@ -218,11 +246,17 @@ class SearchOverlay extends React.Component<
         onHightlightNext={() => this._executeSearch(true)}
         key={2}
       />,
-      <div
-        className={CLOSE_BUTTON_CLASS}
+      <button
+        className={BUTTON_WRAPPER_CLASS}
         onClick={() => this.onClose()}
+        tabIndex={6}
         key={3}
-      />,
+      >
+        <span
+          className={`${CLOSE_BUTTON_CLASS} ${BUTTON_CONTENT_CLASS}`}
+          tabIndex={-1}
+        />
+      </button>,
       <div
         className={REGEX_ERROR_CLASS}
         hidden={this.state.errorMessage && this.state.errorMessage.length === 0}

packages/documentsearch/style/index.css

@@ -6,6 +6,7 @@
   border: none;
   outline: none;
   font-size: var(--jp-ui-font-size1);
+  background-color: var(--jp-layout-color0);
 }
 
 .jp-DocumentSearch-overlay {
@@ -27,29 +28,47 @@
 
 .jp-DocumentSearch-overlay * {
   color: var(--jp-ui-font-color0);
+  background-position: center;
 }
 
-.jp-DocumentSearch-input-wrapper {
-  border: var(--jp-border-width) solid var(--jp-border-color0);
-  border-radius: var(--jp-border-radius);
-  display: flex;
-  background-color: var(--jp-layout-color0);
-}
-
-.jp-DocumentSearch-input-wrapper * {
-  background-color: var(--jp-layout-color0);
+.jp-DocumentSearch-button-content {
+  display: inline-block;
+  cursor: pointer;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
 }
 
-.jp-DocumentSearch-input-wrapper button {
+.jp-DocumentSearch-button-wrapper {
+  all: initial;
+  overflow: hidden;
+  display: inline-block;
   outline: 0;
   border: none;
   width: 20px;
   height: 20px;
   box-sizing: border-box;
-  background-color: var(--jp-layout-color0);
   background-repeat: no-repeat;
 }
 
+.jp-DocumentSearch-button-wrapper:focus {
+  outline: var(--jp-border-width) solid
+    var(--jp-cell-editor-active-border-color);
+  outline-offset: -1px;
+}
+
+.jp-DocumentSearch-button-wrapper,
+.jp-DocumentSearch-button-content:focus {
+  outline: none;
+}
+
+.jp-DocumentSearch-input-wrapper {
+  border: var(--jp-border-width) solid var(--jp-border-color0);
+  border-radius: var(--jp-border-radius);
+  display: flex;
+  background-color: var(--jp-layout-color0);
+}
+
 .jp-DocumentSearch-regex-button {
   background-image: var(--jp-icon-search-regex);
 }
@@ -88,13 +107,9 @@
 }
 
 .jp-DocumentSearch-up-down-wrapper button {
-  outline: 0;
-  border: none;
-  width: 20px;
-  height: 20px;
-  padding-bottom: 5px;
   background-color: var(--jp-layout-color0);
-  background-repeat: no-repeat;
+  vertical-align: middle;
+  background-position: center;
 }
 
 .jp-DocumentSearch-up-button {
@@ -107,13 +122,11 @@
 
 .jp-DocumentSearch-close-button {
   display: inline-block;
-  margin-left: 4px;
   background-size: 16px;
-  height: 16px;
-  width: 16px;
   background-image: var(--jp-icon-close);
-  background-position: center;
   background-repeat: no-repeat;
+  background-position: center;
+  vertical-align: middle;
 }
 
 .jp-DocumentSearch-close-button:hover {