LabKey · cnathe · May 5, 2026 · Apr 30, 2026 · May 1, 2026 · May 1, 2026
diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.33.4",
+  "version": "7.34.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

diff --git a/packages/components/releaseNotes/components.md b/packages/components/releaseNotes/components.md
@@ -1,6 +1,10 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 7.34.0
+*Released*: 5 May 2026
+- Accessibility improvements for app pages: Colors
+
 ### version 7.33.4
 *Released*: 3 May 2026
 - Consolidate Dataclass data update methods - use DIB for update only

diff --git a/packages/components/src/internal/components/domainproperties/NameExpressionGenIdBanner.tsx b/packages/components/src/internal/components/domainproperties/NameExpressionGenIdBanner.tsx
@@ -12,7 +12,7 @@ export interface NameExpressionGenIdProps {
     containerPath?: string;
     dataTypeLSID?: string;
     dataTypeName: string; // sampletype or dataclass name
-    kindName: 'SampleSet' | 'DataClass';
+    kindName: 'DataClass' | 'SampleSet';
     rowId: number;
 }
 
@@ -126,15 +126,15 @@ export const NameExpressionGenIdBanner: FC<NameExpressionGenIdProps> = props =>
             <Alert bsStyle="info" className="genid-alert">
                 Current genId: {currentGenId}
                 <button
-                    className="pull-right alert-button edit-genid-btn btn btn-info"
+                    className="pull-right alert-button edit-genid-btn btn btn-primary"
                     onClick={onEditClick}
                     type="button"
                 >
                     Edit genId
                 </button>
                 {canReset && currentGenId > 1 && (
                     <button
-                        className="pull-right alert-button reset-genid-btn btn btn-info"
+                        className="pull-right alert-button reset-genid-btn btn btn-primary"
                         onClick={onResetClick}
                         type="button"
                     >
@@ -144,8 +144,8 @@ export const NameExpressionGenIdBanner: FC<NameExpressionGenIdProps> = props =>
             </Alert>
             {showResetDialog && (
                 <Modal
-                    confirmText="Reset"
                     confirmClass="btn-danger"
+                    confirmText="Reset"
                     onCancel={onResetCancel}
                     onConfirm={onResetConfirm}
                     title={`Are you sure you want to reset genId for ${dataTypeName}?`}
@@ -159,8 +159,8 @@ export const NameExpressionGenIdBanner: FC<NameExpressionGenIdProps> = props =>
             )}
             {showEditDialog && (
                 <Modal
-                    confirmText="Update"
                     confirmClass="btn-danger"
+                    confirmText="Update"
                     onCancel={onEditCancel}
                     onConfirm={onEditConfirm}
                     title={`Are you sure you want to update genId for ${dataTypeName}?`}
@@ -177,12 +177,12 @@ export const NameExpressionGenIdBanner: FC<NameExpressionGenIdProps> = props =>
                                 aria-label="GenId value"
                                 className="form-control update-genId-input "
                                 min={minNewGenId}
-                                step={1}
                                 name="newgenidval"
                                 onChange={(event: any) => setNewGenId(event?.target?.value)}
+                                placeholder="Enter new genId..."
+                                step={1}
                                 type="number"
                                 value={newGenId ?? minNewGenId}
-                                placeholder="Enter new genId..."
                             />
                         </div>
                         <div className="col-xs-7" />

diff --git a/...nternal/components/domainproperties/__snapshots__/NameExpressionGenIdBanner.test.tsx.snap b/...nternal/components/domainproperties/__snapshots__/NameExpressionGenIdBanner.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`NameExpressionGenIdBanner with existing data 1`] = `
     Current genId: 
     124
     <button
-      class="pull-right alert-button edit-genid-btn btn btn-info"
+      class="pull-right alert-button edit-genid-btn btn btn-primary"
       type="button"
     >
       Edit genId
@@ -27,7 +27,7 @@ exports[`NameExpressionGenIdBanner without existing data, genId = 1 (0) 1`] = `
     Current genId: 
     1
     <button
-      class="pull-right alert-button edit-genid-btn btn btn-info"
+      class="pull-right alert-button edit-genid-btn btn btn-primary"
       type="button"
     >
       Edit genId
@@ -45,13 +45,13 @@ exports[`NameExpressionGenIdBanner without existing data, genId > 1 1`] = `
     Current genId: 
     124
     <button
-      class="pull-right alert-button edit-genid-btn btn btn-info"
+      class="pull-right alert-button edit-genid-btn btn btn-primary"
       type="button"
     >
       Edit genId
     </button>
     <button
-      class="pull-right alert-button reset-genid-btn btn btn-info"
+      class="pull-right alert-button reset-genid-btn btn btn-primary"
       type="button"
     >
       Reset genId

diff --git a/packages/components/src/internal/components/domainproperties/assay/AssayPropertiesInput.tsx b/packages/components/src/internal/components/domainproperties/assay/AssayPropertiesInput.tsx
@@ -119,7 +119,13 @@ export const QCStatesInput: FC<InputProps> = memo(props => (
         }
         label="QC States"
     >
-        <input aria-label="QC States" checked={props.model.qcEnabled} id={FORM_IDS.QC_ENABLED} onChange={props.onChange} type="checkbox" />
+        <input
+            aria-label="QC States"
+            checked={props.model.qcEnabled}
+            id={FORM_IDS.QC_ENABLED}
+            onChange={props.onChange}
+            type="checkbox"
+        />
     </AssayPropertiesInput>
 ));
 QCStatesInput.displayName = 'QCStatesInput';
@@ -227,7 +233,13 @@ export const AssayStatusInput: FC<InputProps> = memo(props => (
         hideAdvancedProperties={props.hideAdvancedProperties}
         label="Active"
     >
-        <input aria-label="Active" checked={props.model.isActive()} id={FORM_IDS.STATUS} onChange={props.onChange} type="checkbox" />
+        <input
+            aria-label="Active"
+            checked={props.model.isActive()}
+            id={FORM_IDS.STATUS}
+            onChange={props.onChange}
+            type="checkbox"
+        />
     </AssayPropertiesInput>
 ));
 AssayStatusInput.displayName = 'AssayStatusInput';
@@ -585,7 +597,8 @@ export class TransformScriptsInput extends React.PureComponent<TransformScriptsI
 
     toggleRunOnCheckboxes = (e: React.ChangeEvent<HTMLInputElement>, field: string): void => {
         const { model } = this.props;
-        const index = parseInt(e.target.id.split(FORM_IDS.PROTOCOL_TRANSFORM_SCRIPTS).pop(), 10);
+        const fieldId = FORM_IDS.PROTOCOL_TRANSFORM_SCRIPTS + '-' + field;
+        const index = parseInt(e.target.id.split(fieldId).pop(), 10);
         const curr = model.protocolTransformScripts.get(index);
 
         this.props.onChange(
@@ -638,7 +651,7 @@ export class TransformScriptsInput extends React.PureComponent<TransformScriptsI
                                             <input
                                                 aria-label="Run on Import"
                                                 checked={attachment.runOnImport}
-                                                id={FORM_IDS.PROTOCOL_TRANSFORM_SCRIPTS + '-onImport' + i}
+                                                id={FORM_IDS.PROTOCOL_TRANSFORM_SCRIPTS + '-runOnImport' + i}
                                                 onChange={this.onCheckRunOnImport}
                                                 type="checkbox"
                                             />
@@ -650,7 +663,7 @@ export class TransformScriptsInput extends React.PureComponent<TransformScriptsI
                                                 aria-label="Run on Edit"
                                                 checked={attachment.runOnEdit}
                                                 disabled={!model.editableResults}
-                                                id={FORM_IDS.PROTOCOL_TRANSFORM_SCRIPTS + '-onEdit' + i}
+                                                id={FORM_IDS.PROTOCOL_TRANSFORM_SCRIPTS + '-runOnEdit' + i}
                                                 onChange={this.onCheckRunOnEdit}
                                                 type="checkbox"
                                             />

diff --git a/packages/components/src/internal/components/domainproperties/samples/UniqueIdBanner.tsx b/packages/components/src/internal/components/domainproperties/samples/UniqueIdBanner.tsx
@@ -7,8 +7,8 @@ import { UNIQUE_ID_TYPE } from '../PropDescType';
 import { SampleTypeModel } from './models';
 
 interface Props {
-    model: SampleTypeModel;
     isFieldsPanel: boolean;
+    model: SampleTypeModel;
     onAddField: (fieldConfig: Partial<IDomainField>) => void;
 }
 
@@ -37,7 +37,7 @@ export const UniqueIdBanner: FC<Props> = memo(({ model, isFieldsPanel, onAddFiel
             return (
                 <Alert bsStyle="info" className="uniqueid-alert">
                     {ADD_NEW_UNIQUE_ID_MSG}
-                    <button className="pull-right alert-button btn btn-info" onClick={onClick} type="button">
+                    <button className="pull-right alert-button btn btn-primary" onClick={onClick} type="button">
                         Yes, Add Unique ID Field
                     </button>
                 </Alert>

diff --git a/packages/components/src/internal/components/forms/input/SelectInput.tsx b/packages/components/src/internal/components/forms/input/SelectInput.tsx
@@ -55,7 +55,7 @@ const _customStyles = {
         } else if (state.data?.notFound) {
             backgroundColor = WARN_BG_COLOR;
         } else {
-            backgroundColor = '#F2F9FC';
+            backgroundColor = '#F1F9FC';
         }
 
         return { ...styles, backgroundColor };
@@ -67,7 +67,7 @@ const _customStyles = {
         } else if (state.data?.notFound) {
             color = WARN_COLOR;
         } else {
-            color = '#08C';
+            color = '#0B73B7';
         }
 
         return { ...styles, color };
@@ -82,8 +82,8 @@ const _customStyles = {
             style.color = WARN_COLOR;
             style[':hover'] = { backgroundColor: WARN_COLOR, color: WARN_BG_COLOR };
         } else {
-            style.color = '#08C';
-            style[':hover'] = { backgroundColor: '#2980B9', color: '#FFF' };
+            style.color = '#0B73B7';
+            style[':hover'] = { backgroundColor: '#2679AD', color: '#FFF' };
         }
 
         return { ...styles, ...style };
@@ -103,7 +103,7 @@ const _customTheme = theme => ({
         danger: '#D9534F',
         primary: '#2980B9',
         primary75: '#009BF9',
-        primary50: '#F2F9FC',
+        primary50: '#F1F9FC',
         primary25: 'rgba(41, 128, 185, 0.1)',
     },
 });

diff --git a/packages/components/src/internal/components/search/SearchPanel.tsx b/packages/components/src/internal/components/search/SearchPanel.tsx
@@ -91,14 +91,14 @@ export const SearchPanelImpl: FC<SearchPanelImplProps> = memo(props => {
     const hasPages = totalHits > pageSize;
 
     const helpLink = (
-        <HelpLink topic={SEARCH_HELP_TOPIC} className="search-form__help-link">
+        <HelpLink className="search-form__help-link" topic={SEARCH_HELP_TOPIC}>
             <i className="fa fa-question-circle search-form__help-icon" />
             Help with search
         </HelpLink>
     );
 
     return (
-        <Section panelClassName="test-loc-search-panel" title={title} context={helpLink}>
+        <Section context={helpLink} panelClassName="test-loc-search-panel" title={title}>
             <div className="search-form panel-body">
                 <form onSubmit={onSubmit}>
                     <span className="input-group">
@@ -117,7 +117,7 @@ export const SearchPanelImpl: FC<SearchPanelImplProps> = memo(props => {
                     </span>
                 </form>
                 <button
-                    className="margin-left success submit-button btn btn-default"
+                    className="margin-left success submit-button btn btn-success"
                     onClick={onSearchClick}
                     type="submit"
                 >
@@ -126,16 +126,16 @@ export const SearchPanelImpl: FC<SearchPanelImplProps> = memo(props => {
                 {hasPages && (
                     <div className="page-buttons">
                         <PaginationButtons
-                            total={totalHits}
                             currentPage={currentPage}
+                            nextPage={pageForward}
                             perPage={pageSize}
                             previousPage={pageBack}
-                            nextPage={pageForward}
+                            total={totalHits}
                         />
                     </div>
                 )}
             </div>
-            {searchTerm && <SearchResultsPanel model={model} emptyResultDisplay={emptyTextMessage} offset={offset} />}
+            {searchTerm && <SearchResultsPanel emptyResultDisplay={emptyTextMessage} model={model} offset={offset} />}
         </Section>
     );
 });
@@ -228,6 +228,6 @@ export const SearchPanel: FC<SearchPanelProps> = memo(props => {
         [search, searchTerm, pageSize, offset]
     );
 
-    return <SearchPanelImpl {...props} search={search} model={model} onPageChange={onPage} offset={offset} />;
+    return <SearchPanelImpl {...props} model={model} offset={offset} onPageChange={onPage} search={search} />;
 });
 SearchPanel.displayName = 'SearchPanel';
diff --git a/packages/components/src/public/files/TemplateDownloadButton.test.tsx b/packages/components/src/public/files/TemplateDownloadButton.test.tsx
@@ -76,7 +76,7 @@ describe('TemplateDownloadButton', () => {
             expect(document.querySelectorAll('span.fa-download')).toHaveLength(1);
         });
 
-        const button = document.querySelector('button.btn-info');
+        const button = document.querySelector('button.btn');
         expect(button).toHaveTextContent('Template');
         await userEvent.click(button);
 
@@ -105,7 +105,7 @@ describe('TemplateDownloadButton', () => {
             expect(document.querySelectorAll('span.fa-download')).toHaveLength(1);
         });
 
-        const button = document.querySelector('button.btn-info');
+        const button = document.querySelector('button.btn');
         expect(button).toHaveTextContent('Template');
         await userEvent.click(button);
 
@@ -123,9 +123,9 @@ describe('TemplateDownloadButton', () => {
     test('editor, with custom properties', () => {
         const { container } = renderWithAppContext(
             <TemplateDownloadButton
+                className="custom-styling"
                 onDownloadDefault={jest.fn()}
                 text="Test Text"
-                className="custom-styling"
                 user={TEST_USER_EDITOR}
             />
         );

diff --git a/packages/components/src/public/files/TemplateDownloadButton.tsx b/packages/components/src/public/files/TemplateDownloadButton.tsx
@@ -123,7 +123,6 @@ const TemplateDownloadButtonImpl: FC<Props> = memo(props => {
 
     return (
         <DropdownButton
-            bsStyle="info"
             buttonClassName={buttonClassName}
             buttonTitle={TITLE}
             className={className}
@@ -142,7 +141,7 @@ const TemplateDownloadButtonImpl: FC<Props> = memo(props => {
             {customTemplates.map(template => {
                 if (template.url.endsWith('(unavailable)')) {
                     return (
-                        <DisableableMenuItem key={template.label} disabled disabledMessage="File not found">
+                        <DisableableMenuItem disabled disabledMessage="File not found" key={template.label}>
                             {template.label}
                         </DisableableMenuItem>
                     );
@@ -167,7 +166,7 @@ export const TemplateDownloadButton: FC<Props> = memo(props => {
     if (!onDownloadDefault && !defaultTemplateUrl?.length) return null;
 
     return (
-        <RequiresPermission perms={[PermissionTypes.Insert, PermissionTypes.Update]} permissionCheck="any" user={user}>
+        <RequiresPermission permissionCheck="any" perms={[PermissionTypes.Insert, PermissionTypes.Update]} user={user}>
             <TemplateDownloadButtonImpl {...props} />
         </RequiresPermission>
     );

diff --git a/packages/components/src/theme/announcements.scss b/packages/components/src/theme/announcements.scss
@@ -62,11 +62,11 @@ $editor-padding-horizontal: 15px;
 }
 .clickable-text {
     cursor: pointer;
-    color: #2980B9;
+    color: $link-color;
 
     &:hover {
         text-decoration: underline;
-        color: color.adjust(#2980B9, $lightness: -15%);
+        color: color.adjust($link-color, $lightness: -15%);
     }
 }
 .discussions-container__title {
@@ -85,7 +85,7 @@ $editor-padding-horizontal: 15px;
     margin-bottom: 15px;
 }
 .thread-block-header__date {
-    color: #777;
+    color: $text-color-light;
 }
 .thread-block-header__menu {
     color: #555555;
@@ -122,10 +122,10 @@ $editor-padding-horizontal: 15px;
     margin: 10px 0;
 }
 .thread-block__toggle-reply-msg {
-    color: #777;
+    color: $text-color-light;
 
     .fa-check-circle {
-        color: #5CB85C;
+        color: $brand-success;
     }
 }
 .thread-editor-preview {