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
Next Next commit
Added aria properties to input component
  • Loading branch information
@lstevens98
lstevens98 committed Mar 1, 2024
commit fe01ad70916a7eb08395ae19570cb0428804038b
20 changes: 17 additions & 3 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 @@ -14,7 +14,10 @@ import { InputChangeEventDetail } from './input.interface';
scoped: true,
})
export class InputComponent implements ComponentInterface {
inputId: string = `admiralty-input-${++nextId}`;
private id = ++nextId;
inputId: string = `admiralty-input-${this.id}`;
hintId: string = `admiralty-input-hint-${this.id}`;
errorId: string = `admiralty-input-error-${this.id}`;

private nativeInput?: HTMLInputElement;

Expand Down Expand Up @@ -91,6 +94,7 @@ export class InputComponent implements ComponentInterface {
/**
* Update the native input element when the value changes
*/

@Watch('value')
protected valueChanged() {
const nativeInput = this.nativeInput;
Expand All @@ -114,14 +118,22 @@ export class InputComponent implements ComponentInterface {

render() {
const value = this.getValue();

return (
<div class="text-input-container">
{this.label ? (
<admiralty-label disabled={this.disabled} for={this.inputId}>
{this.label}
</admiralty-label>
) : null}
{this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}
{this.hint ? (
<admiralty-hint
id={this.hintId}
disabled={this.disabled}
>
{this.hint}
</admiralty-hint>
) : null}
<input
ref={input => (this.nativeInput = input)}
class={{ disabled: this.disabled, invalid: this.invalid }}
Expand All @@ -138,8 +150,10 @@ 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}
/>
<admiralty-input-invalid style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>
<admiralty-input-invalid id={this.errorId} style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-invalid>
</div>
);
}
Expand Down