Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

[terra-form-input] Adding doc warning about chromium VO bug #3840

Merged
merged 11 commits into from
Jul 18, 2023
3 changes: 3 additions & 0 deletions packages/terra-core-docs/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Added
* Added documentation updates for `terra-form-input`.

## 1.30.0 - (July 11, 2023)

* Added
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Badge } from 'terra-form-input/package.json?dev-site-package';
import { Notice } from '@cerner/terra-docs';

import BlankExample from './common/BlankExample?dev-site-example';
import NumberInputExample from './common/NumberInputExample?dev-site-example';
Expand Down Expand Up @@ -26,6 +27,18 @@ Generic input which represents an HTML input element directly.

**Note:** To follow [UX Best Practices](https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research), this component does not allow `placeholder`.

<Notice variant="caution" ariaLevel="3">

**Accessibility Bug:** Due to a bug in Chromium-based browsers (Chrome, Microsoft Edge, etc.), VoiceOver would read `<input type="number" />` incorrectly when incrementing or decrementing the value with keyboard shortcuts. Terra Form Input utilizes `<input type="number" />` when the `type` prop is set to "number" and will also have this screenreader issue. A recommended solution would be to use the basic html `input` instead of Terra Form Input. For example:

```html
<input type="text" inputmode="numeric" pattern="\d*" />
```

However, this will not have the built-in validity checks or keyboard commands that Terra Form Input provides. Consumers are responsible for adding this functionality.

</Notice>

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
Expand Down
Loading