DRYD-2130: Accessibility > Missing form label (Criteria 3.3.2) (#27)

spirosdi · web-flow · commit ea3a5b2a0e35 · 2026-07-16T06:51:13.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log
 
+## 2.2.0
+
+* Resolve orphaned/missing form labels by forwarding id and aria attributes to rendered inputs, and adding label props to QuickSearchInput, RepeatingInput, TabularCompoundInput, and UploadInput
+
 ## 2.1.2
 
 * Add htmlFor/id attribute to labels associating them to inputs
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cspace-input",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "CollectionSpace input components",
   "author": "Ray Lee <ray.lee@lyrasis.org>",
   "license": "ECL-2.0",
diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx
@@ -261,10 +261,11 @@ export default class DateInput extends Component {
     if (readOnly) {
       const {
         embedded,
+        id,
       } = remainingProps;
 
       return (
-        <LineInput readOnly value={value} embedded={embedded} />
+        <LineInput id={id} readOnly value={value} embedded={embedded} />
       );
     }
 
diff --git a/src/components/DateTimeInput.jsx b/src/components/DateTimeInput.jsx
@@ -8,6 +8,7 @@ import { pathPropType } from '../helpers/pathHelpers';
  */
 
 const propTypes = {
+  id: PropTypes.string,
   name: PropTypes.string,
   // TODO: Stop using propTypes in isInput. Until then, these unused props need to be declared so
   // this component is recognized as an input.
@@ -20,6 +21,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+  id: undefined,
   name: undefined,
   parentPath: undefined,
   subpath: undefined,
@@ -29,13 +31,15 @@ const defaultProps = {
 
 export default function DateTimeInput(props) {
   const {
+    id,
     name,
     value,
     formatValue,
   } = props;
 
   return (
     <LineInput
+      id={id}
       name={name}
       readOnly
       value={formatValue ? formatValue(value) : value}
diff --git a/src/components/DropdownMenuInput.jsx b/src/components/DropdownMenuInput.jsx
@@ -248,10 +248,18 @@ export default class DropdownMenuInput extends Component {
     const inputValue = valueLabel;
 
     if (readOnly) {
-      const { embedded } = remainingProps;
+      const {
+        embedded,
+        id,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledby,
+      } = remainingProps;
 
       return (
         <LineInput
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledby}
+          id={id}
           readOnly
           value={inputValue}
           embedded={embedded}
diff --git a/src/components/FileInput.jsx b/src/components/FileInput.jsx
@@ -6,6 +6,7 @@ import styles from '../../styles/cspace-input/FileInput.css';
 
 const propTypes = {
   accept: PropTypes.string,
+  id: PropTypes.string,
   name: PropTypes.string,
   formatFileInfo: PropTypes.func,
   onCommit: PropTypes.func,
@@ -88,6 +89,7 @@ export default class FileInput extends Component {
     const {
       accept,
       formatValue,
+      id,
       name,
       ...remainingProps
     } = this.props;
@@ -104,6 +106,7 @@ export default class FileInput extends Component {
         <input
           accept={accept}
           data-name={name}
+          id={id}
           ref={this.handleFileInputRef}
           tabIndex="-1"
           type="file"
diff --git a/src/components/IDGeneratorInput.jsx b/src/components/IDGeneratorInput.jsx
@@ -141,13 +141,15 @@ export default class IDGeneratorInput extends Component {
 
     const {
       embedded,
+      id,
       value,
     } = remainingProps;
 
     if (readOnly) {
       return (
         <LineInput
           embedded={embedded}
+          id={id}
           readOnly
           value={value}
         />
diff --git a/src/components/QuickSearchInput.jsx b/src/components/QuickSearchInput.jsx
@@ -11,9 +11,12 @@ import styles from '../../styles/cspace-input/QuickSearchInput.css';
 const propTypes = {
   formatRecordTypeLabel: PropTypes.func,
   formatVocabularyLabel: PropTypes.func,
+  keywordInputLabel: PropTypes.string,
   keywordValue: PropTypes.string,
   placeholder: PropTypes.string,
+  recordTypeInputLabel: PropTypes.string,
   searchButtonLabel: PropTypes.string,
+  vocabularyInputLabel: PropTypes.string,
   // eslint-disable-next-line react/forbid-prop-types
   recordTypes: PropTypes.objectOf(PropTypes.object),
   recordTypeValue: PropTypes.string,
@@ -27,9 +30,12 @@ const propTypes = {
 const defaultProps = {
   formatRecordTypeLabel: undefined,
   formatVocabularyLabel: undefined,
+  keywordInputLabel: undefined,
   keywordValue: undefined,
   placeholder: undefined,
+  recordTypeInputLabel: undefined,
   searchButtonLabel: undefined,
+  vocabularyInputLabel: undefined,
   recordTypes: undefined,
   recordTypeValue: undefined,
   vocabularyValue: undefined,
@@ -119,12 +125,14 @@ export default class QuickSearchInput extends Component {
   renderRecordTypeDropdown() {
     const {
       formatRecordTypeLabel,
+      recordTypeInputLabel,
       recordTypes,
       recordTypeValue,
     } = this.props;
 
     return (
       <RecordTypeInput
+        aria-label={recordTypeInputLabel}
         embedded
         formatRecordTypeLabel={formatRecordTypeLabel}
         recordTypes={recordTypes}
@@ -140,11 +148,13 @@ export default class QuickSearchInput extends Component {
       formatVocabularyLabel,
       recordTypes,
       recordTypeValue,
+      vocabularyInputLabel,
       vocabularyValue,
     } = this.props;
 
     return (
       <VocabularyInput
+        aria-label={vocabularyInputLabel}
         embedded
         formatVocabularyLabel={formatVocabularyLabel}
         recordTypes={recordTypes}
@@ -160,12 +170,14 @@ export default class QuickSearchInput extends Component {
 
   renderKeywordInput() {
     const {
+      keywordInputLabel,
       keywordValue,
       placeholder,
     } = this.props;
 
     return (
       <LineInput
+        aria-label={keywordInputLabel}
         embedded
         placeholder={placeholder}
         value={keywordValue}
diff --git a/src/components/RepeatingInput.jsx b/src/components/RepeatingInput.jsx
@@ -257,6 +257,15 @@ export default class RepeatingInput extends Component {
     const normalizedValue = normalizeValue(value);
     const templateId = template.props.id;
 
+    // The label is rendered once as the group header, so each instance input loses its own
+    // label. Point each instance at the header label via aria-labelledby, so it still has an
+    // accessible name. The header Label carries id `${templateId}-label` (set by the consumer,
+    // e.g. the cspace-ui Field component).
+    const templateLabel = template.props.label;
+    const labelId = (React.isValidElement(templateLabel) && templateLabel.props.id)
+      ? templateLabel.props.id
+      : undefined;
+
     return normalizedValue.map((instanceValue, index, list) => {
       const instanceName = `${index}`;
 
@@ -265,6 +274,7 @@ export default class RepeatingInput extends Component {
         readOnly,
         embedded: true,
         label: undefined,
+        'aria-labelledby': labelId,
         name: instanceName,
         parentPath: getPath(this.props),
         value: instanceValue,
diff --git a/src/components/TabularCompoundInput.jsx b/src/components/TabularCompoundInput.jsx
@@ -20,6 +20,7 @@ const propTypes = {
   repeating: PropTypes.bool,
   sortableFields: PropTypes.objectOf(PropTypes.bool),
   onSortInstances: PropTypes.func,
+  renderAriaLabel: PropTypes.func,
   renderChildInputLabel: PropTypes.func,
 };
 
@@ -29,6 +30,7 @@ const defaultProps = {
   repeating: undefined,
   sortableFields: undefined,
   onSortInstances: undefined,
+  renderAriaLabel: undefined,
   renderChildInputLabel: undefined,
 };
 
@@ -54,6 +56,7 @@ export default class TabularCompoundInput extends Component {
       children,
       label,
       repeating,
+      renderAriaLabel,
       renderChildInputLabel,
       sortableFields,
       ...remainingProps
@@ -81,7 +84,7 @@ export default class TabularCompoundInput extends Component {
           label={tableHeader}
           repeating={repeating}
         >
-          <InputTableRow embedded={repeating}>
+          <InputTableRow embedded={repeating} renderAriaLabel={renderAriaLabel}>
             {children}
           </InputTableRow>
         </BaseComponent>
diff --git a/src/components/UploadInput.jsx b/src/components/UploadInput.jsx
@@ -140,6 +140,7 @@ export default class UploadInput extends Component {
 
     return (
       <DropdownMenuInput
+        id="uploadInputType"
         label={typeInputLabel}
         name="type"
         readOnly={readOnly}
@@ -165,6 +166,7 @@ export default class UploadInput extends Component {
     return (
       <FileInput
         accept={accept}
+        id="uploadInputFile"
         label={fileInputLabel}
         name="file"
         readOnly={readOnly}
@@ -187,6 +189,7 @@ export default class UploadInput extends Component {
 
     return (
       <TextInput
+        id="uploadInputUrl"
         label={urlInputLabel}
         name="url"
         readOnly={readOnly}
diff --git a/test/specs/components/DateTimeInput.spec.jsx b/test/specs/components/DateTimeInput.spec.jsx
@@ -22,6 +22,16 @@ describe('DateTimeInput', () => {
     result.props.readOnly.should.equal(true);
   });
 
+  it('should pass id to the LineInput', () => {
+    const shallowRenderer = createRenderer();
+
+    shallowRenderer.render(<DateTimeInput id="dateTimeInputId" />);
+
+    const result = shallowRenderer.getRenderOutput();
+
+    result.props.id.should.equal('dateTimeInputId');
+  });
+
   it('should use formatValue to format the value', () => {
     let formatCalled = false;
 
diff --git a/test/specs/components/DropdownMenuInput.spec.jsx b/test/specs/components/DropdownMenuInput.spec.jsx
@@ -615,4 +615,24 @@ describe('DropdownMenuInput', () => {
     input.disabled.should.equal(true);
     input.value.should.equal('Value 2');
   });
+
+  it('should forward aria-label to the LineInput when readOnly is true', function test() {
+    const options = [
+      { value: 'value1', label: 'Value 1' },
+      { value: 'value2', label: 'Value 2' },
+    ];
+
+    render(
+      <DropdownMenuInput
+        options={options}
+        value="value2"
+        readOnly
+        aria-label="My label"
+      />, this.container,
+    );
+
+    const input = this.container.firstElementChild;
+
+    input.getAttribute('aria-label').should.equal('My label');
+  });
 });
diff --git a/test/specs/components/QuickSearchInput.spec.jsx b/test/specs/components/QuickSearchInput.spec.jsx
@@ -330,6 +330,35 @@ describe('QuickSearchInput', () => {
     input.value.should.equal('some keywords');
   });
 
+  it('should set aria-label on the record type and keyword inputs', function test() {
+    render(
+      <QuickSearchInput
+        recordTypes={recordTypes}
+        recordTypeInputLabel="Record type to search"
+        keywordInputLabel="Search keywords"
+      />, this.container,
+    );
+
+    const inputs = this.container.querySelectorAll('input');
+
+    inputs[0].getAttribute('aria-label').should.equal('Record type to search');
+    inputs[1].getAttribute('aria-label').should.equal('Search keywords');
+  });
+
+  it('should set aria-label on the vocabulary input when an authority is selected', function test() {
+    render(
+      <QuickSearchInput
+        recordTypes={recordTypes}
+        recordTypeValue="organization"
+        vocabularyInputLabel="Vocabulary to search"
+      />, this.container,
+    );
+
+    const inputs = this.container.querySelectorAll('input');
+
+    inputs[1].getAttribute('aria-label').should.equal('Vocabulary to search');
+  });
+
   it('should select the record type indicated by recordTypeValue prop', function test() {
     render(
       <QuickSearchInput
diff --git a/test/specs/components/RepeatingInput.spec.jsx b/test/specs/components/RepeatingInput.spec.jsx
diff --git a/test/specs/components/TabularCompoundInput.spec.jsx b/test/specs/components/TabularCompoundInput.spec.jsx
diff --git a/test/specs/components/UploadInput.spec.jsx b/test/specs/components/UploadInput.spec.jsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "cspace-input",`
`3`		`- "version": "2.1.2",`
	`3`	`+ "version": "2.2.0",`
`4`	`4`	`"description": "CollectionSpace input components",`
`5`	`5`	`"author": "Ray Lee <ray.lee@lyrasis.org>",`
`6`	`6`	`"license": "ECL-2.0",`