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 9 commits into
base: main
Choose a base branch
from
Draft

Properly describe form validation errors #166

Changes from 1 commit
Commits
Show all changes
9 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
82ca38c
Improved test
lstevens98 Jun 12, 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
WIP - Fixing broken Unit tests
  • Loading branch information
@lstevens98
lstevens98 committed Mar 5, 2024
commit d5adcceac960d3db2411cf4cea253539a575076e
20 changes: 10 additions & 10 deletions packages/core/src/components/input/input.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ describe('admiralty-input', () => {
expect(page.root).toEqualHtml(`
<admiralty-input>
<div class="text-input-container">
<input autocomplete="off" id="admiralty-input-1" name="admiralty-input-1" type="text" value="">
<admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
<input aria-describedby="null null" aria-invalid="false" autocomplete="off" id="admiralty-input-1" name="admiralty-input-1" type="text" value="">
<admiralty-input-invalid id="admiralty-input-error-1" style="visibility: hidden;"></admiralty-input-invalid>
</div>
</admiralty-input>
`);
Expand All @@ -26,8 +26,8 @@ describe('admiralty-input', () => {
<admiralty-input label="test-label">
<div class="text-input-container">
<admiralty-label for="admiralty-input-2">test-label</admiralty-label>
<input autocomplete="off" id="admiralty-input-2" name="admiralty-input-2" type="text" value="">
<admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
<input aria-describedby="null null" aria-invalid="false" autocomplete="off" id="admiralty-input-2" name="admiralty-input-2" type="text" value="">
<admiralty-input-invalid id="admiralty-input-error-2" style="visibility: hidden;"></admiralty-input-invalid>
</div>
</admiralty-input>
`);
Expand All @@ -41,8 +41,8 @@ describe('admiralty-input', () => {
expect(page.root).toEqualHtml(`
<admiralty-input disabled>
<div class="text-input-container">
<input disabled autocomplete="off" class="disabled" id="admiralty-input-3" name="admiralty-input-3" type="text" value="">
<admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
<input aria-describedby="null null" aria-invalid="false" disabled autocomplete="off" class="disabled" id="admiralty-input-3" name="admiralty-input-3" type="text" value="">
<admiralty-input-invalid id="admiralty-input-error-3" style="visibility: hidden;"></admiralty-input-invalid>
</div>
</admiralty-input>
`);
Expand Down Expand Up @@ -71,8 +71,8 @@ describe('admiralty-input', () => {
expect(page.root).toEqualHtml(`
<admiralty-input invalid="true" invalid-message="This is invalid!">
<div class="text-input-container">
<input autocomplete="off" class="invalid" id="admiralty-input-5" name="admiralty-input-5" type="text" value="">
<admiralty-input-invalid style="visibility: visible;">
<input aria-describedby="null null" aria-invalid="false" autocomplete="off" class="invalid" id="admiralty-input-5" name="admiralty-input-5" type="text" value="">
<admiralty-input-invalid id="admiralty-input-error-4" style="visibility: visible;">
This is invalid!
</admiralty-input-invalid>
</div>
Expand All @@ -88,8 +88,8 @@ describe('admiralty-input', () => {
expect(page.root).toEqualHtml(`
<admiralty-input type="date">
<div class="text-input-container">
<input type="date" autocomplete="off" id="admiralty-input-6" name="admiralty-input-6" value="">
<admiralty-input-invalid style="visibility: hidden;"></admiralty-input-invalid>
<input aria-describedby="null null" aria-invalid="false" type="date" autocomplete="off" id="admiralty-input-6" name="admiralty-input-6" value="">
<admiralty-input-invalid id="admiralty-input-error-6" style="visibility: hidden;"></admiralty-input-invalid>
</div>
</admiralty-input>
`);
Expand Down