Fix: Screen reader will now properly prompt errors for text inputs. C…

…loses ckeditor/ckeditor5#1406.
ckeditor · Jul 12, 2019 · 3a164b7 · 3a164b7
2 parents e24da36 + 4b027a6
commit 3a164b7
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/labeledinput/labeledinputview.js b/src/labeledinput/labeledinputview.js
@@ -210,7 +210,8 @@ export default class LabeledInputView extends View {
  bind.if( 'errorText', 'ck-labeled-input__status_error' ),
  bind.if( '_statusText', 'ck-hidden', value => !value )
  ],
- id: statusUid
+ id: statusUid,
+ role: bind.if( 'errorText', 'alert' )
  },
  children: [
  {

diff --git a/tests/labeledinput/labeledinputview.js b/tests/labeledinput/labeledinputview.js
@@ -93,11 +93,13 @@ describe( 'LabeledInputView', () => {
  view.errorText = '';
  expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.true;
  expect( statusElement.classList.contains( 'ck-labeled-input__status_error' ) ).to.be.false;
+ expect( statusElement.hasAttribute( 'role' ) ).to.be.false;
  expect( statusElement.innerHTML ).to.equal( '' );
 
  view.errorText = 'foo';
  expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.false;
  expect( statusElement.classList.contains( 'ck-labeled-input__status_error' ) ).to.be.true;
+ expect( statusElement.getAttribute( 'role' ) ).to.equal( 'alert' );
  expect( statusElement.innerHTML ).to.equal( 'foo' );
  } );
 
@@ -107,11 +109,13 @@ describe( 'LabeledInputView', () => {
  view.infoText = '';
  expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.true;
  expect( statusElement.classList.contains( 'ck-labeled-input__status_error' ) ).to.be.false;
+ expect( statusElement.hasAttribute( 'role' ) ).to.be.false;
  expect( statusElement.innerHTML ).to.equal( '' );
 
  view.infoText = 'foo';
  expect( statusElement.classList.contains( 'ck-hidden' ) ).to.be.false;
  expect( statusElement.classList.contains( 'ck-labeled-input__status_error' ) ).to.be.false;
+ expect( statusElement.hasAttribute( 'role' ) ).to.be.false;
  expect( statusElement.innerHTML ).to.equal( 'foo' );
  } );
  } );