From 2cf7805bd3d3fbe927a805089ded1182d3489d8d Mon Sep 17 00:00:00 2001 From: Stephen Lee Date: Thu, 25 Apr 2024 11:48:47 -0700 Subject: [PATCH] Add to README --- packages/password-input/README.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/password-input/README.md b/packages/password-input/README.md index 576632af0b..b41a093d65 100644 --- a/packages/password-input/README.md +++ b/packages/password-input/README.md @@ -102,7 +102,6 @@ import { PasswordInput } from '@leafygreen-ui/password-input'; | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | | `id` | `string` | id associated with the password input. | | | `label` | `string` | Text shown above the password input. | | -| `aria` | `string` | Text shown above the password input. | | | `value` | `string` | The controlled value of the password input. | | | `disabled` | `boolean` | Disables the password input but still allows you to toggle password visibility. | `false` | | `onChange` | `function` | The event handler function for the 'onchange' event. Accepts the change event object as its argument and returns nothing. | @@ -125,9 +124,14 @@ const State = { Valid: 'valid', // green checkmark, black text None: 'none', // gray checkmark, gray text } as const; - ``` +### Validation Feedback +Password input has 3 different supported options for validation feedback: +1. Pass the id of a custom notification as the `aria-describedby` prop and pass a `state` value string as the `stateNotifications` prop to link a custom notification to the password input. +2. Pass an array of notifications as the `stateNotifications` prop for cases where multiple notifications may need to render. `aria-describedby` prop must be undefined in this case. +3. Pass a `state` value string and pass a string to the `errorMessage` prop or `successMessage` prop for cases where only a single notification will ever render. `aria-describedby` prop must be undefined and `stateNotifications` prop must be a string in this case. + ## Special Case ### Aria Labels @@ -136,4 +140,4 @@ Either `label` or `aria-labelledby` or `aria-label` must be provided a string, o ### Aria Describedby -To use a custom error notification container rather than the default provided in this component, `stateNotifications` will only require a string with the appropriate `state` value. In addition, the `aria-describedby` attribute must be provided with the id of the custom notification container. You can read more about `aria-describedby` [here](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby). +To use a custom error notification container rather than the state notifications array or default error or success message provided in this component, `stateNotifications` requires a string with the appropriate `state` value. In addition, the `aria-describedby` attribute must be provided with the id of the custom notification container. You can read more about `aria-describedby` [here](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby).