Issue 1135: More changes for accessibility

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.38.0",
+  "version": "7.38.1-moreAccessibility.11",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/releaseNotes/components.md

@@ -1,6 +1,17 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version TBD
+*Released*: TBD
+- Misc. accessibility improvements
+  - Auto-link to study input field labels
+  - Remove tabIndex value from `DomainRow`
+  - Add labels for text choice input fields
+  - Use button instead of i for expandable container chevrons
+  - Update LabelOverlay and DetailEditor with ids for labeling elements
+  - Add `labelId` getter method in `QueryColumn`
+  - Add `data-fieldkey` to some labels to help with locators
+
 ### version 7.38.0
 *Released*: 21 May 2026
 - Accessibility improvements for app pages: Keyboard Interactions

packages/components/src/internal/components/buttons/ToggleButtons.tsx

@@ -105,10 +105,24 @@ export const ToggleIcon: FC<Props> = memo(props => {
     const body = (
         <>
             {firstActive && (
-                <button className="clickable-text fa fa-toggle-on" onClick={secondBtnClick} type="button" />
+                <button
+                    aria-pressed="true"
+                    className="clickable-text fa fa-toggle-on"
+                    onClick={secondBtnClick}
+                    type="button"
+                >
+                    <span className="sr-only">Toggle On {inputFieldName}</span>
+                </button>
             )}
             {secondActive && (
-                <button className="clickable-text fa fa-toggle-off" onClick={firstBtnClick} type="button" />
+                <button
+                    aria-pressed="true"
+                    className="clickable-text fa fa-toggle-off"
+                    onClick={firstBtnClick}
+                    type="button"
+                >
+                    <span className="sr-only">Toggle Off {inputFieldName}</span>
+                </button>
             )}
         </>
     );

packages/components/src/internal/components/domainproperties/AutoLinkToStudyDropdown.tsx

@@ -4,16 +4,23 @@ import { Container } from '../base/models/Container';
 import { LoadingSpinner } from '../base/LoadingSpinner';
 
 interface Props {
+    ariaLabelledBy: string;
     autoLinkTarget: string;
     containers: Container[];
     onChange: (evt: any) => void;
     value: string;
 }
 
-export const AutoLinkToStudyDropdown: FC<Props> = memo(({ autoLinkTarget, containers, onChange, value }) => {
+export const AutoLinkToStudyDropdown: FC<Props> = memo(({ ariaLabelledBy, autoLinkTarget, containers, onChange, value }) => {
     if (containers === undefined) return <LoadingSpinner />;
     return (
-        <select className="form-control" id={autoLinkTarget} onChange={onChange} value={value || ''}>
+            <select
+                aria-labelledby={ariaLabelledBy}
+                className="form-control"
+                id={autoLinkTarget}
+                onChange={onChange}
+                value={value || ''}
+            >
             <option value={null} />
             {containers.map(container => (
                 <option key={container.id} value={container.id}>

packages/components/src/internal/components/domainproperties/DomainRow.tsx

@@ -412,7 +412,6 @@ export class DomainRow extends React.PureComponent<DomainRowProps, DomainRowStat
                         className={this.getRowCssClasses(expanded, dragging, selected, fieldError)}
                         {...provided.draggableProps}
                         ref={provided.innerRef}
-                        tabIndex={index}
                     >
                         <div
                             className="row domain-row-container"

packages/components/src/internal/components/domainproperties/TextChoiceOptions.tsx

@@ -247,6 +247,7 @@ export const TextChoiceOptionsImpl: FC<ImplProps> = memo(props => {
                         <div className="list-group domain-text-choices-list">
                             {validValues.length > MIN_VALUES_FOR_SEARCH_COUNT && (
                                 <input
+                                    aria-label="Search for a value"
                                     autoFocus
                                     className="form-control domain-text-choices-search"
                                     onChange={onSearchChange}
@@ -319,10 +320,11 @@ export const TextChoiceOptionsImpl: FC<ImplProps> = memo(props => {
                         {selectedIndex !== undefined && (!currentInUse || !isMultiChoiceField) && (
                             <>
                                 <div className="domain-field-label">
-                                    <DomainFieldLabel label="Value" />
+                                    <DomainFieldLabel id={'text-choice-value-label-' + selectedIndex} label="Value" />
                                 </div>
                                 <div className="domain-field-padding-bottom">
                                     <DisableableInput
+                                        aria-labelledby={'text-choice-value-label-' + selectedIndex}
                                         className="form-control full-width"
                                         disabledMsg={currentLocked ? LOCKED_TIP : undefined}
                                         name="value"

packages/components/src/internal/components/domainproperties/assay/AssayPropertiesInput.tsx

@@ -358,9 +358,11 @@ export class AutoLinkDataInput extends React.PureComponent<InputProps, AutoLinkD
                         </p>
                     </>
                 }
+                id="auto-link-data-input"
                 label="Auto-Link Data to Study"
             >
                 <AutoLinkToStudyDropdown
+                    ariaLabelledBy="auto-link-data-input"
                     autoLinkTarget={FORM_IDS.AUTO_LINK_TARGET}
                     containers={containers}
                     onChange={onChange}

packages/components/src/internal/components/domainproperties/samples/SampleTypePropertiesPanel.tsx

@@ -547,12 +547,14 @@ class SampleTypePropertiesPanelImpl extends PureComponent<InjectedDomainProperti
                         <div className="row margin-top">
                             <div className="col-xs-2">
                                 <DomainFieldLabel
+                                    id="linked-study-label"
                                     helpTipBody={<AutoLinkDataToStudyHelpTip />}
                                     label="Auto-Link Data to Study"
                                 />
                             </div>
                             <div className="col-xs-5">
                                 <AutoLinkToStudyDropdown
+                                    ariaLabelledBy="linked-study-label"
                                     autoLinkTarget={ENTITY_FORM_IDS.AUTO_LINK_TARGET}
                                     containers={containers}
                                     onChange={this.onFormChange}

packages/components/src/internal/components/forms/LabelOverlay.test.tsx

@@ -5,51 +5,51 @@ import { LabelOverlay } from './LabelOverlay';
 describe('LabelOverlay', () => {
     it('renders label with overlay, not formsy', () => {
         render(<LabelOverlay isFormsy={false} label="Test Label" />);
-        expect(document.querySelector('label')?.textContent).toBe('Test Label ');
+        expect(document.querySelector('.control-label')?.textContent).toBe('Test Label ');
         expect(document.querySelectorAll('.fa-question-circle')).toHaveLength(1);
     });
 
     it('renders label with overlay and required symbol when required, not formsy', () => {
         render(<LabelOverlay isFormsy={false} label="Test Label" required={true} />);
-        expect(document.querySelector('label')?.textContent).toBe('Test Label * ');
+        expect(document.querySelector('.control-label')?.textContent).toBe('Test Label * ');
         expect(document.querySelectorAll('.fa-question-circle')).toHaveLength(1);
     });
 
     it('renders label with overlay and required, but addLabelAsterisk = false, not formsy', () => {
         render(<LabelOverlay addLabelAsterisk={false} isFormsy={false} label="Test Label" required={true} />);
-        expect(document.querySelector('label')?.textContent).toBe('Test Label * ');
+        expect(document.querySelector('.control-label')?.textContent).toBe('Test Label * ');
         expect(document.querySelectorAll('.fa-question-circle')).toHaveLength(1);
     });
 
     it('renders label with overlay, required = false, and addLabelAsterisk = true, not formsy', () => {
         render(<LabelOverlay addLabelAsterisk={true} isFormsy={false} label="Test Label" required={false} />);
-        expect(document.querySelector('label')?.textContent).toBe('Test Label * ');
+        expect(document.querySelector('.control-label')?.textContent).toBe('Test Label * ');
         expect(document.querySelectorAll('.fa-question-circle')).toHaveLength(1);
     });
 
     it('renders label with no overlay and required symbol when required, not formsy', () => {
         render(<LabelOverlay helpTipRenderer="NONE" isFormsy={false} label="Test Label" required={true} />);
-        expect(document.querySelector('label')?.textContent).toBe('Test Label * ');
+        expect(document.querySelector('.control-label')?.textContent).toBe('Test Label * ');
         expect(document.querySelectorAll('.fa-question-circle')).toHaveLength(0);
     });
 
     it('renders label with overlay, isFormsy = true (default)', () => {
         render(<LabelOverlay label="Test Label" />);
-        expect(document.querySelector('label')).toBeNull();
+        expect(document.querySelector('.control-label')).toBeNull();
         expect(document.querySelector('span')?.textContent).toBe('Test Label ');
         expect(document.querySelectorAll('.fa-question-circle')).toHaveLength(1);
     });
 
     it('renders label with overlay and required', () => {
         render(<LabelOverlay isFormsy={true} label="Test Label" required={true} />);
-        expect(document.querySelector('label')).toBeNull();
+        expect(document.querySelector('.control-label')).toBeNull();
         expect(document.querySelector('span')?.textContent).toBe('Test Label * ');
         expect(document.querySelectorAll('.fa-question-circle')).toHaveLength(1);
     });
 
     it('renders label with overlay and addLabelAsterisk', () => {
         render(<LabelOverlay addLabelAsterisk={true} isFormsy={true} label="Test Label" />);
-        expect(document.querySelector('label')).toBeNull();
+        expect(document.querySelector('.control-label')).toBeNull();
         expect(document.querySelector('span')?.textContent).toBe('Test Label * ');
         expect(document.querySelectorAll('.fa-question-circle')).toHaveLength(1);
     });

packages/components/src/internal/components/forms/LabelOverlay.tsx

@@ -29,6 +29,7 @@ import { DOMAIN_FIELD, DomainFieldHelpTipContents } from './DomainFieldHelpTipCo
 export interface LabelOverlayProps extends PropsWithChildren {
     addLabelAsterisk?: boolean;
     column?: QueryColumn;
+    dataKey?: string;
     description?: string;
     helpTipRenderer?: string;
     inputId?: string;
@@ -103,28 +104,39 @@ export class LabelOverlay extends React.Component<LabelOverlayProps> {
     }
 
     render(): ReactNode {
-        const { column, inputId, isFormsy, labelClass, required, addLabelAsterisk } = this.props;
+        const { column, dataKey, inputId, isFormsy, labelClass, required, addLabelAsterisk } = this.props;
         const label = this.props.label ? this.props.label : column ? column.caption : null;
 
         const overlay = this.getOverlay();
 
         if (isFormsy) {
             // when being used as a label for a formsy component directly this will use just a span without the
             // classes applied as well as not needing to handle 'required' display
-            // TODO: remove space for required-symbol after *
             return (
-                <span>
+                <span data-fieldkey={dataKey ?? column?.fieldKey} id={column?.labelId}>
                     {label}&nbsp;
                     {overlay}
                     {required || addLabelAsterisk ? <span className="required-symbol">* </span> : null}
                 </span>
             );
         }
 
-        // TODO: remove space for required-symbol after *
+        if (!inputId) {
+            return (
+                <span className={(labelClass ? labelClass + ' ' : '') + 'text__truncate-and-wrap'} id={column?.labelId}>
+                    <span data-fieldkey={dataKey ?? column?.fieldKey}>{label}</span>&nbsp;
+                    {overlay}
+                    {required || addLabelAsterisk ? <span className="required-symbol">* </span> : null}
+                </span>
+            );
+        }
         return (
-            <label className={(labelClass ? labelClass + ' ' : '') + 'text__truncate-and-wrap'} htmlFor={inputId}>
-                <span>{label}</span>&nbsp;
+            <label
+                className={(labelClass ? labelClass + ' ' : '') + 'text__truncate-and-wrap'}
+                htmlFor={inputId}
+                id={column?.labelId}
+            >
+                <span data-fieldkey={inputId}>{label}</span>&nbsp;
                 {overlay}
                 {required || addLabelAsterisk ? <span className="required-symbol">* </span> : null}
             </label>

packages/components/src/internal/components/forms/detail/DetailPanelHeader.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import React, { FC, memo } from 'react';
+import { Icon } from '../../../Icon';
 
 interface DetailPanelHeaderProps {
     editing?: boolean;
@@ -30,7 +31,9 @@ export const DetailPanelHeader: FC<DetailPanelHeaderProps> = memo(props => {
     if (editing) {
         return (
             <h2 className="panel-heading">
-                {verb} {title}
+                <span>
+                    {verb} {title}
+                </span>
                 <span className="detail__edit--heading">
                     {warning !== undefined && (
                         <span>
@@ -45,12 +48,12 @@ export const DetailPanelHeader: FC<DetailPanelHeaderProps> = memo(props => {
 
     return (
         <h2 className="panel-heading">
-            {title}
+            <span>{title}</span>
             <span className="detail__edit--heading">
                 {isEditable && (
                     <>
                         <button className="clickable-text detail__edit-button" onClick={onClick} type="button">
-                            <i className="fa fa-pencil-square-o" />
+                            <Icon iconClass="fa fa-pencil-square-o" srText={'Edit ' + title} />
                         </button>
                         <div className="clearfix" />
                     </>

packages/components/src/internal/components/forms/input/AmountUnitInput.test.tsx

@@ -77,8 +77,7 @@ describe('AmountUnitInput', () => {
         expect(document.querySelectorAll('.form-group.row')).toHaveLength(1);
         expect(document.querySelectorAll('.control-label')).toHaveLength(1);
         expect(document.querySelectorAll('.control-label')[0].textContent).toBe('Amount and Units');
-        expect(document.querySelectorAll('label')).toHaveLength(1);
-        expect(document.querySelectorAll('label')[0].textContent).toBe('');
+        expect(document.querySelectorAll('label')).toHaveLength(0);
         expect(document.querySelectorAll('.fa-toggle-on')).toHaveLength(1);
         expect(document.querySelectorAll('.fa-toggle-off')).toHaveLength(0);
         const inputs = document.querySelectorAll('input');
@@ -105,8 +104,7 @@ describe('AmountUnitInput', () => {
         expect(document.querySelectorAll('.form-group.row')).toHaveLength(1);
         expect(document.querySelectorAll('.control-label')).toHaveLength(1);
         expect(document.querySelectorAll('.control-label')[0].textContent).toBe('Amount and Units');
-        expect(document.querySelectorAll('label')).toHaveLength(1);
-        expect(document.querySelectorAll('label')[0].textContent).toBe('');
+        expect(document.querySelectorAll('label')).toHaveLength(0);
         expect(document.querySelectorAll('.fa-toggle-on')).toHaveLength(0);
         expect(document.querySelectorAll('.fa-toggle-off')).toHaveLength(1);
         const inputs = document.querySelectorAll('input');
@@ -133,8 +131,7 @@ describe('AmountUnitInput', () => {
         expect(document.querySelectorAll('.form-group.row')).toHaveLength(1);
         expect(document.querySelectorAll('.control-label')).toHaveLength(1);
         expect(document.querySelectorAll('.control-label')[0].textContent).toBe('Amount and Units');
-        expect(document.querySelectorAll('label')).toHaveLength(1);
-        expect(document.querySelectorAll('label')[0].textContent).toBe('');
+        expect(document.querySelectorAll('label')).toHaveLength(0);
         expect(document.querySelectorAll('.fa-toggle-on')).toHaveLength(0);
         expect(document.querySelectorAll('.fa-toggle-off')).toHaveLength(1);
         const inputs = document.querySelectorAll('input');
@@ -161,8 +158,7 @@ describe('AmountUnitInput', () => {
         expect(document.querySelectorAll('.form-group.row')).toHaveLength(1);
         expect(document.querySelectorAll('.control-label')).toHaveLength(1);
         expect(document.querySelectorAll('.control-label')[0].textContent).toBe('Amount and Units');
-        expect(document.querySelectorAll('label')).toHaveLength(1);
-        expect(document.querySelectorAll('label')[0].textContent).toBe('');
+        expect(document.querySelectorAll('label')).toHaveLength(0);
         expect(document.querySelectorAll('.fa-toggle-on')).toHaveLength(0);
         expect(document.querySelectorAll('.fa-toggle-off')).toHaveLength(0);
         const inputs = document.querySelectorAll('input');

packages/components/src/internal/components/forms/input/AmountUnitInput.tsx

@@ -69,9 +69,12 @@ export const AmountUnitInput: FC<InputRendererProps> = memo(props => {
                     id={id}
                     isDisabled={disabled}
                     label={
-                        <div className={inputLabelClass + ' bold-text text__truncate-and-wrap'}>
+                        <span
+                            className={inputLabelClass + ' bold-text text__truncate-and-wrap'}
+                            data-fieldkey={amountCol.name}
+                        >
                             Amount and Units
-                        </div>
+                        </span>
                     }
                     labelOverlayProps={{
                         description: 'The amount and units of this sample currently on hand.',

packages/components/src/internal/components/forms/input/CheckboxInput.tsx

@@ -146,7 +146,8 @@ class CheckboxInputImpl extends DisableableInput<CheckboxInputImplProps, Checkbo
                         />
                     ) : (
                         <input
-                            aria-label={label}
+                            aria-label={label || undefined}
+                            aria-labelledby={label ? undefined : queryColumn.labelId}
                             checked={checked}
                             disabled={isDisabled}
                             id={queryColumn.fieldKey}

packages/components/src/internal/components/forms/input/DatePickerInput.tsx

@@ -288,6 +288,9 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
                 : (placeholderText ?? `Select ${queryColumn.caption.toLowerCase()}`);
         const picker = (
             <DatePicker
+                ariaLabelledBy={
+                    !showLabel && !renderFieldLabel ? queryColumn.labelId : undefined
+                }
                 autoComplete="off"
                 autoFocus={autoFocus}
                 className={inputClassName}

packages/components/src/internal/components/forms/input/FileInput.tsx

@@ -280,7 +280,7 @@ class FileInputImpl extends DisableableInput<FileInputImplProps, State> {
 
         const labelOverlayProps = {
             addLabelAsterisk,
-            inputId,
+            dataKey: inputId,
             // While this component supports binding Formsy it does not use a Formsy component
             // to render the associated label. As such, the label overlay is always configured as isFormsy={false}.
             isFormsy: false,