Merge pull request #17324 from desktop/focus-clear-button

Make clear button in textboxes keyboard accessible

app/src/ui/diff/diff-search-input.tsx

@@ -32,8 +32,8 @@ export class DiffSearchInput extends React.Component<
     return (
       <div className="diff-search">
         <TextBox
-          placeholder="Search..."
-          type="search"
+          placeholder="Search…"
+          displayClearButton={true}
           autoFocus={true}
           onValueChanged={this.onChange}
           onKeyDown={this.onKeyDown}

app/src/ui/history/compare.tsx

@@ -160,7 +160,7 @@ export class CompareSidebar extends React.Component<
         <div className="compare-form">
           <FancyTextBox
             symbol={OcticonSymbol.gitBranch}
-            type="search"
+            displayClearButton={true}
             placeholder={placeholderText}
             onFocus={this.onTextBoxFocused}
             value={filterText}
@@ -691,8 +691,8 @@ function getPlaceholderText(state: ICompareState) {
     return __DARWIN__ ? 'No Branches to Compare' : 'No branches to compare'
   } else if (formState.kind === HistoryTabMode.History) {
     return __DARWIN__
-      ? 'Select Branch to Compare...'
-      : 'Select branch to compare...'
+      ? 'Select Branch to Compare…'
+      : 'Select branch to compare…'
   } else {
     return undefined
   }

app/src/ui/lib/fancy-text-box.tsx

@@ -45,6 +45,7 @@ export class FancyTextBox extends React.Component<
           disabled={this.props.disabled}
           type={this.props.type}
           placeholder={this.props.placeholder}
+          displayClearButton={this.props.displayClearButton}
           onKeyDown={this.props.onKeyDown}
           onValueChanged={this.props.onValueChanged}
           onSearchCleared={this.props.onSearchCleared}

app/src/ui/lib/filter-list.tsx

@@ -262,7 +262,7 @@ export class FilterList<T extends IFilterListItem> extends React.Component<
     return (
       <TextBox
         ref={this.onTextBoxRef}
-        type="search"
+        displayClearButton={true}
         autoFocus={true}
         placeholder={this.props.placeholderText || 'Filter'}
         className="filter-list-filter-field"

app/src/ui/lib/section-filter-list.tsx

@@ -243,7 +243,7 @@ export class SectionFilterList<
     return (
       <TextBox
         ref={this.onTextBoxRef}
-        type="search"
+        displayClearButton={true}
         autoFocus={true}
         placeholder={this.props.placeholderText || 'Filter'}
         className="filter-list-filter-field"

app/src/ui/lib/text-box.tsx

@@ -2,6 +2,9 @@ import * as React from 'react'
 import classNames from 'classnames'
 import { createUniqueId, releaseUniqueId } from './id-pool'
 import { showContextualMenu } from '../../lib/menu-item'
+import { Octicon } from '../octicons'
+import * as OcticonSymbol from '../octicons/octicons.generated'
+import { AriaLiveContainer } from '../accessibility/aria-live-container'
 
 export interface ITextBoxProps {
   /** The label for the input field. */
@@ -37,6 +40,12 @@ export interface ITextBoxProps {
    */
   readonly displayInvalidState?: boolean
 
+  /**
+   * Whether or not the control displays a clear button when it has text.
+   * Default: false
+   */
+  readonly displayClearButton?: boolean
+
   /**
    * Called when the user changes the value in the input field.
    *
@@ -103,6 +112,11 @@ interface ITextBoxState {
    * Text to display in the underlying input element
    */
   readonly value?: string
+
+  /**
+   * Input just cleared via clear button.
+   */
+  readonly valueCleared: boolean
 }
 
 /** An input element with app-standard styles. */
@@ -113,7 +127,7 @@ export class TextBox extends React.Component<ITextBoxProps, ITextBoxState> {
     const friendlyName = this.props.label || this.props.placeholder
     const inputId = createUniqueId(`TextBox_${friendlyName}`)
 
-    this.setState({ inputId, value: this.props.value })
+    this.setState({ inputId, value: this.props.value, valueCleared: false })
   }
 
   public componentWillUnmount() {
@@ -169,7 +183,9 @@ export class TextBox extends React.Component<ITextBoxProps, ITextBoxState> {
   private onChange = (event: React.FormEvent<HTMLInputElement>) => {
     const value = event.currentTarget.value
 
-    this.setState({ value }, () => {
+    // Even when the new value is '', we don't want to render the aria-live
+    // message saying "input cleared", so we set valueCleared to false.
+    this.setState({ value, valueCleared: false }, () => {
       if (this.props.onValueChanged) {
         this.props.onValueChanged(value)
       }
@@ -177,9 +193,24 @@ export class TextBox extends React.Component<ITextBoxProps, ITextBoxState> {
   }
 
   private onSearchTextCleared = () => {
-    if (this.props.onSearchCleared != null) {
-      this.props.onSearchCleared()
+    this.setState({ valueCleared: true })
+    this.props.onSearchCleared?.()
+  }
+
+  private clearSearchText = () => {
+    if (this.inputElement === null) {
+      return
     }
+
+    this.inputElement.value = ''
+
+    this.setState({ value: '', valueCleared: true }, () => {
+      if (this.props.onValueChanged) {
+        this.props.onValueChanged('')
+      }
+      this.props.onSearchCleared?.()
+      this.focus()
+    })
   }
 
   /**
@@ -260,6 +291,7 @@ export class TextBox extends React.Component<ITextBoxProps, ITextBoxState> {
       <div
         className={classNames('text-box-component', className, {
           'no-invalid-state': this.props.displayInvalidState === false,
+          'display-clear-button': this.props.displayClearButton === true,
         })}
       >
         {label && <label htmlFor={inputId}>{label}</label>}
@@ -284,6 +316,20 @@ export class TextBox extends React.Component<ITextBoxProps, ITextBoxState> {
           aria-describedby={this.props.ariaDescribedBy}
           required={this.props.required}
         />
+        {this.props.displayClearButton &&
+          this.state.value !== undefined &&
+          this.state.value !== '' && (
+            <button
+              className="clear-button"
+              aria-label="Clear"
+              onClick={this.clearSearchText}
+            >
+              <Octicon symbol={OcticonSymbol.x} />
+            </button>
+          )}
+        {this.state.valueCleared && (
+          <AriaLiveContainer message="Input cleared" />
+        )}
       </div>
     )
   }

app/styles/ui/_text-box.scss

@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  position: relative;
 
   & > label {
     overflow-wrap: anywhere;
@@ -37,6 +38,21 @@
     }
   }
 
+  &.display-clear-button input {
+    padding-inline-end: var(--text-field-height);
+  }
+
+  button.clear-button {
+    position: absolute;
+    right: 1px;
+    border: 0;
+    background: none;
+    width: var(--text-field-height);
+    height: calc(100%);
+    color: var(--text-color);
+    padding: 1px 0 0 0;
+  }
+
   &:not(.no-invalid-state) :not(:focus):invalid {
     border-color: var(--error-color);
   }