Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Properly describe form validation errors #166

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from
Draft

Properly describe form validation errors #166

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fe01ad7
Added aria properties to input component
lstevens98 Mar 1, 2024
3305e0e
set aria-invalid to true
lstevens98 Mar 1, 2024
82d486c
Made aria-invalid reactive to the invalid property
lstevens98 Mar 5, 2024
d5adcce
WIP - Fixing broken Unit tests
lstevens98 Mar 5, 2024
1be773b
WIP Accessibility on Textarea
lstevens98 Mar 12, 2024
6dfb48e
Fixed Input unit tests
lstevens98 Apr 30, 2024
65002c8
Fixed text area tests
lstevens98 May 22, 2024
ef6a435
Merge branch 'main' into describe-input-error
lstevens98 May 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Prev Previous commit
Next Next commit
set aria-invalid to true
  • Loading branch information
@lstevens98
lstevens98 committed Mar 1, 2024
commit 3305e0ed2b477a75c36ed29f3db6697424fac011
4 changes: 2 additions & 2 deletions packages/core/src/components/input/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,8 @@ export class InputComponent implements ComponentInterface {
style={{
maxWidth: this.width ? `${this.width}px` : null,
}}
aria-describedby={(this.hint ? this.hintId : null) + (this.invalid ? this.errorId : null)}
aria-invalid={this.invalid}
aria-invalid={true}
aria-describedby={(this.hint ? this.hintId : null) + ' ' + (this.invalid ? this.errorId : null)}
/>
<admiralty-input-invalid id={this.errorId} style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>
</div>
Expand Down