diff --git a/src/collections/Form/FormField.js b/src/collections/Form/FormField.js index a99f3e465a..9c90e5099d 100644 --- a/src/collections/Form/FormField.js +++ b/src/collections/Form/FormField.js @@ -100,7 +100,7 @@ function FormField(props) { const ariaDescribedBy = id && error ? `${id}-error-message` : null const ariaAttrs = { 'aria-describedby': ariaDescribedBy, - 'aria-invalid': error !== undefined ? true : undefined, + 'aria-invalid': error ? true : undefined, } const controlProps = { ...rest, content, children, disabled, required, type, id } diff --git a/test/specs/collections/Form/FormField-test.js b/test/specs/collections/Form/FormField-test.js index 017414f4fe..b41d6324d1 100644 --- a/test/specs/collections/Form/FormField-test.js +++ b/test/specs/collections/Form/FormField-test.js @@ -215,4 +215,35 @@ describe('FormField', () => { expect(fieldId).to.equal('testId') }) }) + + describe('aria-invalid', () => { + it('is not set by default', () => { + shallow() + .find('input') + .should.not.have.prop('aria-invalid') + }) + it('is not set when error is false', () => { + shallow() + .find('input') + .should.not.have.prop('aria-invalid') + }) + it('is set when error is true', () => { + shallow() + .find('input') + .should.have.prop('aria-invalid', true) + }) + it('is is set when error object is provided', () => { + shallow( + , + ) + .find('input') + .should.have.prop('aria-invalid', true) + }) + }) })