Merge pull request #18227 from desktop/Add-accessibility-setting

Add Accessibility Setting to toggling diff checkmarks

app/src/lib/stores/app-store.ts

@@ -238,7 +238,11 @@ import {
 } from './updates/changes-state'
 import { ManualConflictResolution } from '../../models/manual-conflict-resolution'
 import { BranchPruner } from './helpers/branch-pruner'
-import { enableLinkUnderlines, enableMoveStash } from '../feature-flag'
+import {
+  enableDiffCheckMarks,
+  enableLinkUnderlines,
+  enableMoveStash,
+} from '../feature-flag'
 import { Banner, BannerType } from '../../models/banner'
 import { ComputedAction } from '../../models/computed-action'
 import {
@@ -2223,10 +2227,9 @@ export class AppStore extends TypedBaseStore<IAppState> {
       ? getBoolean(underlineLinksKey, underlineLinksDefault)
       : false
 
-    this.showDiffCheckMarks = getBoolean(
-      showDiffCheckMarksKey,
-      showDiffCheckMarksDefault
-    )
+    this.showDiffCheckMarks = enableDiffCheckMarks()
+      ? getBoolean(showDiffCheckMarksKey, showDiffCheckMarksDefault)
+      : false
 
     this.emitUpdateNow()
 
@@ -7948,6 +7951,14 @@ export class AppStore extends TypedBaseStore<IAppState> {
       this.emitUpdate()
     }
   }
+
+  public _updateShowDiffCheckMarks(showDiffCheckMarks: boolean) {
+    if (showDiffCheckMarks !== this.showDiffCheckMarks) {
+      this.showDiffCheckMarks = showDiffCheckMarks
+      setBoolean(showDiffCheckMarksKey, showDiffCheckMarks)
+      this.emitUpdate()
+    }
+  }
 }
 
 /**

app/src/ui/app.tsx

@@ -1661,6 +1661,7 @@ export class App extends React.Component<IAppProps, IAppState> {
             repositoryIndicatorsEnabled={this.state.repositoryIndicatorsEnabled}
             onOpenFileInExternalEditor={this.openFileInExternalEditor}
             underlineLinks={this.state.underlineLinks}
+            showDiffCheckMarks={this.state.showDiffCheckMarks}
           />
         )
       case PopupType.RepositorySettings: {

app/src/ui/diff/side-by-side-diff-row.tsx

@@ -234,7 +234,10 @@ export class SideBySideDiffRow extends React.Component<
       isDiffSelectable,
     } = this.props
     const baseRowClasses = classNames('row', {
-      'has-check-all-control': enableGroupDiffCheckmarks() && isDiffSelectable,
+      'has-check-all-control':
+        enableGroupDiffCheckmarks() &&
+        this.props.showDiffCheckMarks &&
+        isDiffSelectable,
     })
     const beforeClasses = classNames('before', ...beforeClassNames)
     const afterClasses = classNames('after', ...afterClassNames)
@@ -599,7 +602,7 @@ export class SideBySideDiffRow extends React.Component<
         style={style}
       >
         <span className="focus-handle">
-          {!enableGroupDiffCheckmarks() && (
+          {(!enableGroupDiffCheckmarks() || !this.props.showDiffCheckMarks) && (
             <div className="increased-hover-surface" style={{ height }} />
           )}
           {!onlyOneLine && this.getCheckAllOcticon(selectionState)}
@@ -647,7 +650,7 @@ export class SideBySideDiffRow extends React.Component<
   }
 
   private getCheckAllOcticon = (selectionState: DiffSelectionType) => {
-    if (!enableGroupDiffCheckmarks()) {
+    if (!enableGroupDiffCheckmarks() || !this.props.showDiffCheckMarks) {
       return null
     }
 

app/src/ui/diff/side-by-side-diff.tsx

@@ -580,6 +580,7 @@ export class SideBySideDiff extends React.Component<
                 afterTokens={this.state.afterTokens}
                 temporarySelection={this.state.temporarySelection}
                 hoveredHunk={this.state.hoveredHunk}
+                showDiffCheckMarks={this.props.showDiffCheckMarks}
                 isSelectable={canSelect(this.props.file)}
                 fileSelection={this.getSelection()}
                 // rows are memoized and include things like the

app/src/ui/dispatcher/dispatcher.ts

@@ -3917,4 +3917,8 @@ export class Dispatcher {
   public setUnderlineLinksSetting(underlineLinks: boolean) {
     return this.appStore._updateUnderlineLinks(underlineLinks)
   }
+
+  public setDiffCheckMarksSetting(diffCheckMarks: boolean) {
+    return this.appStore._updateShowDiffCheckMarks(diffCheckMarks)
+  }
 }

app/src/ui/preferences/accessibility.tsx

@@ -5,6 +5,9 @@ import { Checkbox, CheckboxValue } from '../lib/checkbox'
 interface IAccessibilityPreferencesProps {
   readonly underlineLinks: boolean
   readonly onUnderlineLinksChanged: (value: boolean) => void
+
+  readonly showDiffCheckMarks: boolean
+  readonly onShowDiffCheckMarksChanged: (value: boolean) => void
 }
 
 export class Accessibility extends React.Component<
@@ -36,6 +39,25 @@ export class Accessibility extends React.Component<
             messages, comments, and other text fields. This can help make links
             easier to distinguish. {this.renderExampleLink()}
           </p>
+
+          <Checkbox
+            label="Show check marks in the diff"
+            value={
+              this.props.showDiffCheckMarks
+                ? CheckboxValue.On
+                : CheckboxValue.Off
+            }
+            onChange={this.onShowDiffCheckMarksChanged}
+            ariaDescribedBy="diff-checkmarks-setting-description"
+          />
+          <p
+            id="diff-checkmarks-setting-description"
+            className="git-settings-description"
+          >
+            When enabled, check marks will be displayed along side the line
+            numbers and groups of line numbers in the diff when committing. When
+            disabled, the line number controls will be less prominent.
+          </p>
         </div>
       </DialogContent>
     )
@@ -59,4 +81,10 @@ export class Accessibility extends React.Component<
   ) => {
     this.props.onUnderlineLinksChanged(event.currentTarget.checked)
   }
+
+  private onShowDiffCheckMarksChanged = (
+    event: React.FormEvent<HTMLInputElement>
+  ) => {
+    this.props.onShowDiffCheckMarksChanged(event.currentTarget.checked)
+  }
 }

app/src/ui/preferences/preferences.tsx

@@ -70,6 +70,7 @@ interface IPreferencesProps {
   readonly repositoryIndicatorsEnabled: boolean
   readonly onOpenFileInExternalEditor: (path: string) => void
   readonly underlineLinks: boolean
+  readonly showDiffCheckMarks: boolean
 }
 
 interface IPreferencesState {
@@ -114,6 +115,8 @@ interface IPreferencesState {
   readonly globalGitConfigPath: string | null
 
   readonly underlineLinks: boolean
+
+  readonly showDiffCheckMarks: boolean
 }
 
 /** The app-level preferences component. */
@@ -154,6 +157,7 @@ export class Preferences extends React.Component<
       isLoadingGitConfig: true,
       globalGitConfigPath: null,
       underlineLinks: this.props.underlineLinks,
+      showDiffCheckMarks: this.props.showDiffCheckMarks,
     }
   }
 
@@ -440,6 +444,8 @@ export class Preferences extends React.Component<
         View = (
           <Accessibility
             underlineLinks={this.state.underlineLinks}
+            showDiffCheckMarks={this.state.showDiffCheckMarks}
+            onShowDiffCheckMarksChanged={this.onShowDiffCheckMarksChanged}
             onUnderlineLinksChanged={this.onUnderlineLinksChanged}
           />
         )
@@ -550,6 +556,10 @@ export class Preferences extends React.Component<
     this.setState({ underlineLinks })
   }
 
+  private onShowDiffCheckMarksChanged = (showDiffCheckMarks: boolean) => {
+    this.setState({ showDiffCheckMarks })
+  }
+
   private renderFooter() {
     const hasDisabledError = this.state.disallowedCharactersMessage != null
 
@@ -672,6 +682,10 @@ export class Preferences extends React.Component<
 
     this.props.dispatcher.setUnderlineLinksSetting(this.state.underlineLinks)
 
+    this.props.dispatcher.setDiffCheckMarksSetting(
+      this.state.showDiffCheckMarks
+    )
+
     this.props.onDismissed()
   }