experiment: Make input clear button keyboard-accessible

Author: avinashbot

pages/autosuggest/permutations.page.tsx

@@ -23,6 +23,7 @@ const permutations = createPermutations<AutosuggestProps>([
       undefined,
     ],
     enteredTextLabel: [enteredTextLabel],
+    clearAriaLabel: ['Clear'],
   },
   {
     ariaLabel: ['some label'],
@@ -36,6 +37,7 @@ const permutations = createPermutations<AutosuggestProps>([
       </>,
     ],
     enteredTextLabel: [enteredTextLabel],
+    clearAriaLabel: ['Clear'],
   },
   {
     ariaLabel: ['some label'],
@@ -44,27 +46,31 @@ const permutations = createPermutations<AutosuggestProps>([
     value: ['', 'Some option'],
     placeholder: ['Enter some data'],
     enteredTextLabel: [enteredTextLabel],
+    clearAriaLabel: ['Clear'],
   },
   {
     ariaLabel: ['some label'],
     readOnly: [true],
     value: ['', 'Some option'],
     placeholder: ['Enter some data'],
     enteredTextLabel: [enteredTextLabel],
+    clearAriaLabel: ['Clear'],
   },
   {
     value: [''],
     ariaLabel: ['some label'],
     statusType: ['loading'],
     loadingText: ['Loading more items', undefined],
     enteredTextLabel: [enteredTextLabel],
+    clearAriaLabel: ['Clear'],
   },
   {
     value: [''],
     ariaLabel: ['some label'],
     statusType: ['error'],
     errorText: ['Error while loading', undefined],
     enteredTextLabel: [enteredTextLabel],
+    clearAriaLabel: ['Clear'],
   },
   {
     value: ['', 'op', 'Option 2', 'tag1', 'this is a label tag', 'thisisafilteringtag'],
@@ -119,16 +125,19 @@ const permutations = createPermutations<AutosuggestProps>([
       ],
     ],
     enteredTextLabel: [enteredTextLabel],
+    clearAriaLabel: ['Clear'],
   },
   {
     value: [''],
     enteredTextLabel: [enteredTextLabel],
+    clearAriaLabel: ['Clear'],
     options: [range(20).map(i => ({ value: `option${i}`, label: `Option ${i}` }))],
     virtualScroll: [true, false],
   },
   {
     value: ['some value'],
     enteredTextLabel: [enteredTextLabel],
+    clearAriaLabel: ['Clear'],
     options: [[]],
     virtualScroll: [true, false],
   },

pages/input/permutations.page.tsx

@@ -16,6 +16,7 @@ const permutations = createPermutations<InputProps>([
       'Short value',
       'Long value, enough to extend beyond the input width.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
     ],
+    clearAriaLabel: ['Clear'],
   },
   {
     value: [''],
@@ -25,24 +26,28 @@ const permutations = createPermutations<InputProps>([
       'Short placeholder',
       'Long placeholder, enough to extend beyond the input width.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
     ],
+    clearAriaLabel: ['Clear'],
   },
   {
     disabled: [false, true],
     type: ['text', 'password', 'search', 'email', 'url'] as const,
     value: ['Non-empty value: Placeholder should be hidden'],
     placeholder: ['Short placeholder'],
+    clearAriaLabel: ['Clear'],
   },
   {
     disabled: [false, true],
     type: ['number'] as const,
     value: ['-1', '1'],
     placeholder: ['Short placeholder'],
+    clearAriaLabel: ['Clear'],
   },
   {
     readOnly: [true],
     type: ['text', 'password', 'search', 'number', 'email', 'url'] as const,
     value: ['100000000'],
     placeholder: ['Short placeholder'],
+    clearAriaLabel: ['Clear'],
   },
 ]);
 

pages/property-filter/common-props.tsx

@@ -147,6 +147,7 @@ export const i18nStrings: PropertyFilterProps.I18nStrings = {
   cancelActionText: 'Cancel',
   applyActionText: 'Apply',
   allPropertiesLabel: 'All properties',
+  clearAriaLabel: 'Clear',
 
   tokenLimitShowMore: 'Show more',
   tokenLimitShowFewer: 'Show fewer',

pages/property-filter/property-filter-autosuggest.page.tsx

@@ -29,6 +29,7 @@ export default function PropertyFilterAutosuggestPage() {
         onChange={event => setValue(event.detail.value)}
         enteredTextLabel={enteredTextLabel}
         ariaLabel={'internal autosuggest'}
+        clearAriaLabel="Clear"
         virtualScroll={true}
       />
     </div>

pages/tag-editor/shared.ts

@@ -32,6 +32,7 @@ export const I18N_STRINGS: TagEditorProps.I18nStrings = {
   invalidValueError:
     'Invalid value. Values can only contain alphanumeric characters, spaces and any of the following: _.:/=+@-',
   awsPrefixError: 'Cannot start with aws:',
+  clearAriaLabel: 'Clear',
   tagLimit: (availableTags, tagLimit) =>
     availableTags === tagLimit
       ? `You can up to ${tagLimit} tags.`

pages/text-filter/permutations.page.tsx

@@ -12,6 +12,7 @@ const permutations = createPermutations<TextFilterProps>([
     countText: [undefined, 'N matches'],
     filteringText: ['', 'query'],
     filteringPlaceholder: [undefined, 'Filter instances...'],
+    clearAriaLabel: ['Clear'],
   },
 ]);
 

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -1385,6 +1385,12 @@ scrolled out of the viewport.",
       "optional": true,
       "type": "string",
     },
+    Object {
+      "description": "Adds an \`aria-label\` to the clear button inside the search input.",
+      "name": "clearAriaLabel",
+      "optional": true,
+      "type": "string",
+    },
     Object {
       "description": "Specifies the ID of the native form element. You can use it to relate
 a label element's \`for\` attribute to this control.
@@ -4431,6 +4437,12 @@ scrolled out of the viewport.",
       "optional": true,
       "type": "string",
     },
+    Object {
+      "description": "Adds an \`aria-label\` to the clear button inside the search input.",
+      "name": "clearAriaLabel",
+      "optional": true,
+      "type": "string",
+    },
     Object {
       "description": "Specifies the ID of the native form element. You can use it to relate
 a label element's \`for\` attribute to this control.
@@ -6250,6 +6262,12 @@ scrolled out of the viewport.",
       "optional": true,
       "type": "string",
     },
+    Object {
+      "description": "Adds an \`aria-label\` to the clear button inside the search input.",
+      "name": "clearAriaLabel",
+      "optional": true,
+      "type": "string",
+    },
     Object {
       "description": "Specifies the ID of the native form element. You can use it to relate
 a label element's \`for\` attribute to this control.
@@ -8872,6 +8890,11 @@ operations are communicated to the user in another way.",
             "optional": false,
             "type": "string",
           },
+          Object {
+            "name": "clearAriaLabel",
+            "optional": true,
+            "type": "string",
+          },
           Object {
             "name": "clearFiltersText",
             "optional": false,
@@ -11310,6 +11333,11 @@ character validation. You should use this property only when absolutely necessar
             "optional": false,
             "type": "string",
           },
+          Object {
+            "name": "clearAriaLabel",
+            "optional": true,
+            "type": "string",
+          },
           Object {
             "name": "duplicateKeyError",
             "optional": false,
@@ -11610,6 +11638,12 @@ period of time. If you want a delayed handler to invoke a filtering API call, yo
       "optional": true,
       "type": "string",
     },
+    Object {
+      "description": "Label for the input clear button.",
+      "name": "clearAriaLabel",
+      "optional": true,
+      "type": "string",
+    },
     Object {
       "description": "Accepts a human-readable, localized string that indicates the number of results. For example, \\"1 match\\" or \\"165 matches.\\"
 If the total number of results is unknown, also include an indication that there may be more results than
@@ -11857,6 +11891,12 @@ scrolled out of the viewport.",
       "optional": true,
       "type": "string",
     },
+    Object {
+      "description": "Adds an \`aria-label\` to the clear button inside the search input.",
+      "name": "clearAriaLabel",
+      "optional": true,
+      "type": "string",
+    },
     Object {
       "description": "Specifies the ID of the native form element. You can use it to relate
 a label element's \`for\` attribute to this control.
@@ -12200,6 +12240,12 @@ scrolled out of the viewport.",
       "optional": true,
       "type": "string",
     },
+    Object {
+      "description": "Adds an \`aria-label\` to the clear button inside the search input.",
+      "name": "clearAriaLabel",
+      "optional": true,
+      "type": "string",
+    },
     Object {
       "description": "Specifies the ID of the native form element. You can use it to relate
 a label element's \`for\` attribute to this control.

src/autosuggest/__integ__/events-autosuggest.test.ts

@@ -64,7 +64,7 @@ describe.each<boolean>([false, true])('Autosuggest events (expandToViewport=%s)'
       await page.keys(['o']);
       await page.clearEventList();
 
-      await page.keys(['Tab']);
+      await page.keys(['Tab', 'Tab']);
       await page.assertEventsFired(['onBlur']);
     })
   );
@@ -76,7 +76,7 @@ describe.each<boolean>([false, true])('Autosuggest events (expandToViewport=%s)'
       await page.keys(['o', 'ArrowDown', 'ArrowDown', 'Enter']);
       await page.clearEventList();
 
-      await page.keys(['b', 'Tab']);
+      await page.keys(['b', 'Tab', 'Tab']);
       await page.assertEventsFired(['onChange', 'onBlur']);
     })
   );

src/autosuggest/internal.tsx

@@ -43,6 +43,7 @@ const InternalAutosuggest = React.forwardRef((props: InternalAutosuggestProps, r
     statusType = 'finished',
     recoveryText,
     placeholder,
+    clearAriaLabel,
     name,
     disabled,
     disableBrowserAutocorrect = false,
@@ -172,6 +173,7 @@ const InternalAutosuggest = React.forwardRef((props: InternalAutosuggestProps, r
       autoFocus={autoFocus}
       ariaLabel={ariaLabel}
       ariaRequired={ariaRequired}
+      clearAriaLabel={clearAriaLabel}
       disableBrowserAutocorrect={disableBrowserAutocorrect}
       expandToViewport={expandToViewport}
       ariaControls={listId}

src/input/index.tsx

@@ -37,6 +37,7 @@ const Input = React.forwardRef(
       ariaDescribedby,
       invalid,
       controlId,
+      clearAriaLabel,
       ...rest
     }: InputProps,
     ref: Ref<InputProps.Ref>
@@ -88,6 +89,7 @@ const Input = React.forwardRef(
           ariaLabelledby,
           invalid,
           controlId,
+          clearAriaLabel,
         }}
         className={clsx(styles.root, baseProps.className)}
         __inheritFormFieldProps={true}