Improved form labels.

See #109.
openlab-at-city-tech · May 1, 2018 · 0bdb85a · 0bdb85a
1 parent 7e7530b
commit 0bdb85a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/build/index.js b/build/index.js
@@ -37354,13 +37354,24 @@ class PreviewableField extends __WEBPACK_IMPORTED_MODULE_0_react__["Component"]
 			}));
 		}
 
+		const labelId = id + '-label';
+		const pfcLabel = '\u00a0';
+
 		return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
 			'div',
 			{ className: contentSectionClass },
 			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
 				'label',
-				{ htmlFor: id },
-				label
+				{
+					htmlFor: id,
+					id: labelId
+				},
+				pfcLabel,
+				__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+					'span',
+					{ className: 'screen-reader-text' },
+					label
+				)
 			),
 			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
 				'div',
@@ -37379,6 +37390,7 @@ class PreviewableField extends __WEBPACK_IMPORTED_MODULE_0_react__["Component"]
 				)
 			),
 			__WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement('textarea', {
+				'aria-labelledby': labelId,
 				id: id,
 				name: id,
 				value: value,
@@ -38917,7 +38929,7 @@ class ResponseForm extends __WEBPACK_IMPORTED_MODULE_0_react__["Component"] {
 		}
 
 		// Non-breaking space.
-		const pfcLabel = '\u00a0';
+		const pfcLabel = 'Response text';
 
 		return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
 			'div',

diff --git a/build/index.js.map b/build/index.js.map
diff --git a/src/components/PreviewableField.js b/src/components/PreviewableField.js
@@ -64,9 +64,15 @@ export default class PreviewableField extends Component {
 			)
 		}
 
+		const labelId = id + '-label'
+		const pfcLabel = '\u00a0'
+
 		return (
 			<div className={contentSectionClass}>
-				<label htmlFor={id}>{label}</label>
+				<label
+					htmlFor={id}
+					id={labelId}
+				>{pfcLabel}<span className='screen-reader-text'>{label}</span></label>
 
 				<div className="edit-action-buttons">
 					{uploadElements}
@@ -83,12 +89,13 @@ export default class PreviewableField extends Component {
 				</div>
 
 				<textarea
+					aria-labelledby={labelId}
 				  id={id}
 				  name={id}
 				  value={value}
 				  disabled={isPending}
 				  onChange={ e => {
-					onTextareaChange( e )
+						onTextareaChange( e )
 				  } }
 				/>
 

diff --git a/src/components/ResponseForm.js b/src/components/ResponseForm.js
@@ -29,7 +29,7 @@ export default class ResponseForm extends Component {
 		}
 
 		// Non-breaking space.
-		const pfcLabel = '\u00a0'
+		const pfcLabel = 'Response text'
 
 		return (
 			<div className={divClassName}>