소스 검색

Fix: Screen reader will now properly prompt errors for text inputs. Closes ckeditor/ckeditor5#1406.

Marek Lewandowski 6 년 전
부모
커밋
e89852f2ae
2개의 변경된 파일6개의 추가작업 그리고 1개의 파일을 삭제
  1. 2 1
      packages/ckeditor5-ui/src/labeledinput/labeledinputview.js
  2. 4 0
      packages/ckeditor5-ui/tests/labeledinput/labeledinputview.js

+ 2 - 1
packages/ckeditor5-ui/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: [
 				{

+ 4 - 0
packages/ckeditor5-ui/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' );
 				} );
 			} );