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

fix: Form field with error is not identified #332

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

fix: Form field with error is not identified #332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e8c9493
SITES-10980: error label now displays the correct error field
Feb 9, 2024
47d1717
SITES-10980: fixed unit test
Feb 9, 2024
4d51639
fixed unit tests
Apr 4, 2024
1bc8cf5
fixed unit tests
Apr 4, 2024
5dd8143
error label now displays the correct error field
Apr 23, 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
15 changes: 10 additions & 5 deletions coral-component-clock/src/scripts/Clock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,17 +242,22 @@ const Clock = Decorator(class extends BaseFormField(BaseComponent(HTMLElement))
set invalid(value) {
super.invalid = value;

this._elements.hours.invalid = this._invalid;
this._elements.minutes.invalid = this._invalid;
this._elements.hours.setAttribute("aria-errormessage", this.errorID);
this._elements.minutes.setAttribute("aria-errormessage", this.errorID);
const hoursElement = this._elements.hours;
const minutesElement = this._elements.minutes;

if (hoursElement.value > hoursElement.getAttribute("max")) hoursElement.invalid = this._invalid;
if (minutesElement.value > minutesElement.getAttribute("max")) minutesElement.invalid = this._invalid;
hoursElement.setAttribute("aria-errormessage", this.errorID);
minutesElement.setAttribute("aria-errormessage", this.errorID);

const ERROR_LABEL_ELEMENT_CLASS = "._coral-Clock .coral-Form-errorlabel";
const errorLabel = this.querySelector(ERROR_LABEL_ELEMENT_CLASS);

if (this._elements.hours.invalid || this._elements.minutes.invalid) {
if (hoursElement.invalid || minutesElement.invalid) {
errorLabel.setAttribute("id", this.errorID);
errorLabel.setAttribute("aria-live", "assertive");
if (hoursElement.invalid) errorLabel.textContent = i18n.get("Please enter valid hours");
else if (minutesElement.invalid) errorLabel.textContent = i18n.get("Please enter valid minutes");
errorLabel.hidden = false;
errorLabel.style.display = "table-caption";
errorLabel.style["caption-side"] = "bottom";
Expand Down
28 changes: 11 additions & 17 deletions coral-component-clock/src/tests/test.Clock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,7 +425,9 @@ describe('Clock', function () {
expect(clock.querySelector('.coral-Form-errorlabel').hidden).to.be.true;
// Checks that error is shown when clock is invalid
el.invalid = true;
expect(clock.querySelector('.coral-Form-errorlabel').hidden).to.be.false;
helpers.next(function () {
expect(clock.querySelector('.coral-Form-errorlabel').hidden).to.be.false;
});
// Check that error is hidden when clock is valid
el.invalid = false;
expect(clock.querySelector('.coral-Form-errorlabel').hidden).to.be.true;
Expand Down Expand Up @@ -540,12 +542,10 @@ describe('Clock', function () {
expect(el._elements.hours.value).to.equal('02');
expect(el._elements.minutes.value).to.equal('02');
expect(el._elements.valueAsText.textContent).to.equal('02:02 AM');

done();
}, true);
} else {
done();
}

done();
});

it('should switch from AM to PM', function (done) {
Expand All @@ -563,12 +563,10 @@ describe('Clock', function () {
expect(el._elements.hours.value).to.equal('02');
expect(el._elements.minutes.value).to.equal('02');
expect(el._elements.valueAsText.textContent).to.equal('02:02 PM');

done();
}, true);
} else {
done();
}

done();
});

it('should allow AM/PM lowercase and uppercase format', function () {
Expand Down Expand Up @@ -619,12 +617,10 @@ describe('Clock', function () {
expect(el._elements.hours.value).to.equal('');
expect(el._elements.minutes.value).to.equal('');
expect(el._elements.valueAsText.textContent).to.equal('');

done();
}, true);
} else {
done();
}

done();
});

it('should not change display nor value if AM/PM is set but hours format is 24 hours clock', function (done) {
Expand All @@ -644,12 +640,10 @@ describe('Clock', function () {
expect(el._elements.hours.value).to.equal('11');
expect(el._elements.minutes.value).to.equal('32');
expect(el._elements.valueAsText.textContent).to.equal('11:32 AM');

done();
}, true);
} else {
done();
}

done();
});
});

Expand Down