Add keyboard support for filter bar (#9236)

Author: dhruvisompura

src/vs/platform/positronActionBar/browser/components/actionBarFilter.tsx

@@ -50,6 +50,16 @@ export const ActionBarFilter = forwardRef<ActionBarFilterHandle, ActionBarFilter
 		inputRef.current.value = '';
 		setFilterText('');
 		props.onFilterTextChanged('');
+		// Move focus back to the input after clearing the text.
+		inputRef.current.focus();
+	};
+
+	// Button clear key down handler.
+	const buttonClearKeyDownHandler = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+		if (e.code === 'Enter' || e.code === 'Space') {
+			e.preventDefault();
+			buttonClearClickHandler();
+		}
 	};
 
 	useImperativeHandle(ref, () => ({
@@ -67,16 +77,21 @@ export const ActionBarFilter = forwardRef<ActionBarFilterHandle, ActionBarFilter
 				<input
 					ref={inputRef}
 					className='text-input'
-					placeholder={(() => localize('positronFilterPlaceholder', "filter"))()}
+					placeholder={(() => localize('positronFilterPlaceholder', "Filter"))()}
 					type='text'
 					value={filterText}
 					onBlur={() => setFocused(false)}
 					onChange={changeHandler}
 					onFocus={() => setFocused(true)}
 				/>
 				{filterText !== '' && (
-					<button className='clear-button'>
-						<div className={'codicon codicon-positron-search-cancel'} onClick={buttonClearClickHandler} />
+					<button
+						aria-label={(() => localize('positronClearFilter', "Clear filter"))()}
+						className='clear-button'
+						onClick={buttonClearClickHandler}
+						onKeyDown={buttonClearKeyDownHandler}
+					>
+						<div className={'codicon codicon-positron-search-cancel'} />
 					</button>
 				)}
 			</div>