add tooltip for expand buttons, closes #5566

control/src/dictionary.ts

@@ -1,3 +1,4 @@
+// TODO make it so keys can be strings in addition to functions
 export interface Dictionary {
     valueAdded(itemLabel: string): string;
     noSearchResults(): string;
@@ -6,6 +7,7 @@ export interface Dictionary {
     clearButtonTitle(): string;
     minimumCharactersMessage(len: number, min: number): string;
     multiSelectInstructions(): string;
+    expandButtonTitle(): string;
 }
 
 const EN_US: Dictionary = {
@@ -36,6 +38,10 @@ const EN_US: Dictionary = {
 
     multiSelectInstructions(): string {
         return "Items can be removed from this list box by selecting them and activating 'Remove selected values' button. Items can be added by selecting them in the adjacent combobox.";
+    },
+
+    expandButtonTitle(): string {
+        return 'Expand';
     }
 };
 

control/src/multi-select.tsx

@@ -188,7 +188,13 @@ export class MultiSelect extends AbstractSelect<Props, State> {
                             onFocus={this.onSearchFocus}
                             placeholder={placeholder}
                         />
-                        <div className={cn(style.toggle)} aria-hidden={true} tabIndex={-1} onClick={this.onToggleClick}>
+                        <div
+                            className={cn(style.toggle)}
+                            aria-hidden={true}
+                            tabIndex={-1}
+                            onClick={this.onToggleClick}
+                            title={dictionary.expandButtonTitle()}
+                        >
                             <Toggle height={20} width={20} />
                         </div>
                     </div>

control/src/single-select.tsx

@@ -128,7 +128,7 @@ export class SingleSelect extends AbstractSelect<Props, State> {
                                 </button>
                             );
                         })}
-                        <div className={style.toggle} aria-hidden={true}>
+                        <div className={style.toggle} aria-hidden={true} title={dictionary.expandButtonTitle()}>
                             <Toggle height={20} width={20} />
                         </div>
                     </div>

control/test/__snapshots__/multi-select.unit.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`MultiSelect renders with empty values 1`] = `
       <input type="text" value class="s25-search" role="combobox"
       aria-label="Add Value" aria-autocomplete="list" aria-haspopup="true" aria-owns="s25-0-results"
       aria-controls="s25-0-results" aria-expanded="false" />
-      <div class="s25-toggle" aria-hidden tabIndex="-1">
+      <div class="s25-toggle" aria-hidden tabIndex="-1" title="Expand">
         <Toggle height="20" width="20"></Toggle>
       </div>
     </div>
@@ -55,7 +55,7 @@ exports[`MultiSelect renders with values 1`] = `
       <input type="text" value class="s25-search" role="combobox"
       aria-label="Add Value" aria-autocomplete="list" aria-haspopup="true" aria-owns="s25-1-results"
       aria-controls="s25-1-results" aria-expanded="false" />
-      <div class="s25-toggle" aria-hidden tabIndex="-1">
+      <div class="s25-toggle" aria-hidden tabIndex="-1" title="Expand">
         <Toggle height="20" width="20"></Toggle>
       </div>
     </div>