diff --git a/rfcs/2023-use-clear-button.md b/rfcs/2023-use-clear-button.md new file mode 100644 index 00000000000..28d1251cf81 --- /dev/null +++ b/rfcs/2023-use-clear-button.md @@ -0,0 +1,165 @@ + + +- Start Date: 2023-06-10 +- RFC PR: (leave this empty, to be filled in later) +- Authors: Jakob Guddas + +# `useClearButton` + +## Summary + +Creating a new `useClearButton` hook. + +## Motivation + +The goal is to make it easier for people to build accessible input fields, + +I just see way too many WCAG breaking clear buttons. + + + +## Detailed Design + +Just like `useToggleButton` this would also extend `useButton`. + +It would also be great to expose this as `clearButtonProps` from `useTextField`, `useCombobox`, etc. + +```diff + import type { AriaTextFieldProps } from "react-aria"; + import { useTextField } from "react-aria"; + + function TextField(props: AriaTextFieldProps) { + let { label } = props; + let ref = React.useRef(null); + let { + labelProps, + inputProps, + descriptionProps, ++ clearButtonProps, + errorMessageProps, + } = useTextField(props, ref); + + return ( +
+ + ++
+ ); + } + + ; +``` + +### Supported features + +- Localized `aria-label` +- Excluded from tab order `tabindex: -1` +- Clicking the clear button moves focus to input +- Reachable by screen reader +- Escape key clears input as well as space/enter (when focused) + + + +## Documentation + + + +## Drawbacks + + + +## Backwards Compatibility Analysis + + + +## Alternatives + + + +## Open Questions + + + +## Help Needed + + + +## Frequently Asked Questions + + + +## Related Discussions + +