Accessibility improvements: Fix heading structure on pages to reflect data hierarchy

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.35.1",
+  "version": "7.35.2-pageStructure.9",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/releaseNotes/components.md

@@ -1,6 +1,12 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version TBD
+*Released*: TBD
+- Update heading tags in various page elements for better accessibility
+- Add sr-only text for Selection checkbox table header
+- Update a few more colors for better contrast
+
 ### version 7.35.0
 *Released*: 7 May 2026
 - Fix accessibility issues for empty links and buttons

packages/components/src/internal/Modal.tsx

@@ -60,7 +60,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({ title, onCancel }) => {
                     <span className="sr-only">Close</span>
                 </button>
             )}
-            {title && <h4 className="modal-title text__wrap">{title}</h4>}
+            {title && <h2 className="modal-title text__wrap">{title}</h2>}
         </div>
     );
 };

packages/components/src/internal/components/assay/SpecialtyAssayPanel.tsx

@@ -54,11 +54,12 @@ export const SpecialtyAssayPanel: FC<SpecialtyAssayPanelProps> = memo(props => {
                 <div className="col-xs-6">
                     {selected && options?.length > 0 && (
                         <>
-                            <div className="margin-bottom">
+                            <div className="margin-bottom" id="specialty-assay-type-select-label">
                                 <b>Use Instrument-Specific Data Format</b>
                             </div>
                             <div className="margin-bottom">
                                 <select
+                                    aria-labelledby="specialty-assay-type-select-label"
                                     id="specialty-assay-type-select"
                                     value={selected.name}
                                     onChange={onSelectChange}

packages/components/src/internal/components/auditlog/AuditDetails.tsx

@@ -204,7 +204,7 @@ export class AuditDetails extends Component<Props> {
 
         return (
             <div className="panel panel-default">
-                <div className="panel-heading">{title}</div>
+                <h2 className="panel-heading">{title}</h2>
                 <div className="panel-body">
                     {children}
                     {!rowId && <div>{emptyMsg}</div>}

packages/components/src/internal/components/base/Grid.tsx

@@ -193,6 +193,9 @@ export class GridHeader extends PureComponent<GridHeaderProps, State> {
                                         onDrop={this.handleDrop}
                                         title={hideTooltip ? undefined : description}
                                     >
+                                        {column.index === '__selection__' && (
+                                            <span className="sr-only">Selection checkboxes</span>
+                                        )}
                                         {headerCell && headerCell(column, i, columns.size)}
                                         {!headerCell && (
                                             <div className={GRID_HEADER_CELL_BODY}>

packages/components/src/internal/components/base/PageHeader.test.tsx

@@ -7,7 +7,7 @@ import { PageHeader } from './PageHeader';
 describe('<PageHeader />', () => {
     test('render without properties', () => {
         render(<PageHeader showNotifications={false} />);
-        expect(document.querySelector('h2').textContent).toEqual('');
+        expect(document.querySelector('h2')).not.toBeInTheDocument();
     });
 
     test('render with icon', () => {
@@ -28,6 +28,13 @@ describe('<PageHeader />', () => {
         expect(document.querySelector('h2').textContent).toEqual(' Page title');
     });
 
+
+    test('render with icon and title as primary', () => {
+        render(<PageHeader primaryHeader showNotifications={false} title="Page title" iconCls="fa fa-star" />);
+        expect(document.querySelectorAll('span.fa-star').length).toEqual(1);
+        expect(document.querySelector('h1').textContent).toEqual(' Page title');
+    });
+
     test('render with children', () => {
         render(
             <PageHeader showNotifications={false} title="render with children">

packages/components/src/internal/components/base/PageHeader.tsx

@@ -19,20 +19,40 @@ import { Notifications } from '../notifications/Notifications';
 
 interface PageHeaderProps extends PropsWithChildren {
     iconCls?: string;
+    primaryHeader?: boolean;
     showNotifications?: boolean;
     title?: string;
 }
 
-export const PageHeader: FC<PageHeaderProps> = ({ children, iconCls, showNotifications = true, title }) => (
-    <div className="page-header">
-        {children}
+export const PageHeader: FC<PageHeaderProps> = ({
+    children,
+    iconCls,
+    primaryHeader,
+    showNotifications = true,
+    title,
+}) => {
+    const showTitle = !!iconCls || !!title;
 
-        <h2 className="no-margin-top">
-            {iconCls ? <span className={'page-header-icon ' + iconCls}>&nbsp;</span> : null}
-            {title}
-        </h2>
+    return (
+        <div className="page-header">
+            {children}
+
+            {showTitle && primaryHeader && (
+                <h1 className="no-margin-top">
+                    {iconCls ? <span className={'page-header-icon ' + iconCls}>&nbsp;</span> : null}
+                    {title}
+                </h1>
+            )}
+            {showTitle && !primaryHeader && (
+                <h2 className="no-margin-top">
+                    {iconCls ? <span className={'page-header-icon ' + iconCls}>&nbsp;</span> : null}
+                    {title}
+                </h2>
+            )}
+
+            {showNotifications && <Notifications />}
+        </div>
+    );
+};
 
-        {showNotifications && <Notifications />}
-    </div>
-);
 PageHeader.displayName = 'PageHeader';

packages/components/src/internal/components/base/Section.tsx

@@ -44,10 +44,15 @@ export const Section: FC<SectionProps> = props => {
                 {showHeader && (
                     <div className={`panel-heading panel-content-flex panel-content-${titleSize}`}>
                         <div className={`panel-content-title-container ${titleContainerClassName ?? ''}`}>
-                            {title && (
-                                <div className={`panel-content-title-${titleSize} ${titleClassName ?? ''}`}>
+                            {title && titleSize === 'large' && (
+                                <h1 className={`panel-content-title-${titleSize} ${titleClassName ?? ''}`}>
                                     {title}
-                                </div>
+                                </h1>
+                            )}
+                            {title && titleSize !== 'large' && (
+                                <h2 className={`panel-content-title-${titleSize} ${titleClassName ?? ''}`}>
+                                    {title}
+                                </h2>
                             )}
                             {caption && <div className="panel-content-caption">{caption}</div>}
                         </div>

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

@@ -104,7 +104,7 @@ export class CollapsiblePanelHeader extends React.PureComponent<Props> {
                 {panelStatus && panelStatus !== 'NONE' && !iconHelpMsg && this.getHeaderIconComponent()}
 
                 {/* Header name*/}
-                <span className="domain-panel-title">{this.getTitlePrefix() + title}</span>
+                <h2 className="domain-panel-title">{this.getTitlePrefix() + title}</h2>
 
                 {/* Expand/Collapse Icon*/}
                 {(controlledCollapse || collapsible) && (

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

@@ -55,9 +55,9 @@ type Props = {
 
 export const DomainFieldsDisplay: FC<Props> = ({ domain, title }) => (
     <div className="panel panel-default">
-        <div className="panel-heading">
+        <h2 className="panel-heading">
             <div className="panel-title">{title || domain.name}</div>
-        </div>
+        </h2>
         <div className="panel-body">
             <p>{domain.description}</p>
             <Grid columns={DOMAIN_FIELD_COLS} data={domain.fields} />

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

@@ -10,10 +10,10 @@ interface Props {
 }
 
 export const SectionHeading: FC<Props> = memo(props => (
-    <div className={'domain-field-section-heading' + (props.cls ? ' ' + props.cls : '')} id={props.id}>
+    <h3 className={'domain-field-section-heading' + (props.cls ? ' ' + props.cls : '')} id={props.id}>
         {props.title}
         {props.helpTipBody && <LabelHelpTip title={props.title}>{props.helpTipBody}</LabelHelpTip>}
-    </div>
+    </h3>
 ));
 
 SectionHeading.displayName = 'SectionHeading';

packages/components/src/internal/components/domainproperties/__snapshots__/CollapsiblePanelHeader.test.tsx.snap

@@ -13,11 +13,11 @@ exports[`<CollapsiblePanelHeader/> custom properties 1`] = `
         class="fa fa-check-circle"
       />
     </span>
-    <span
+    <h2
       class="domain-panel-title"
     >
       Test Prefix - Test Title
-    </span>
+    </h2>
     <span
       class="pull-right"
     >
@@ -40,11 +40,11 @@ exports[`<CollapsiblePanelHeader/> default properties 1`] = `
     class="domain-panel-header panel-heading domain-heading-collapsible domain-panel-header-collapsed"
     id="test-id"
   >
-    <span
+    <h2
       class="domain-panel-title"
     >
       Test Title
-    </span>
+    </h2>
     <span
       class="pull-right"
     >
@@ -69,11 +69,11 @@ exports[`<CollapsiblePanelHeader/> invalid, iconHelpMsg, and expanded 1`] = `
         class="fa fa-check-circle"
       />
     </span>
-    <span
+    <h2
       class="domain-panel-title"
     >
       Test Title
-    </span>
+    </h2>
     <span
       class="pull-right"
     >
@@ -91,11 +91,11 @@ exports[`<CollapsiblePanelHeader/> not collapsible 1`] = `
     class="domain-panel-header panel-heading domain-panel-header-expanded domain-panel-header-no-theme"
     id="test-id"
   >
-    <span
+    <h2
       class="domain-panel-title"
     >
       Test Title
-    </span>
+    </h2>
   </div>
 </div>
 `;
@@ -113,11 +113,11 @@ exports[`<CollapsiblePanelHeader/> not controlledCollapse 1`] = `
         class="fa fa-check-circle"
       />
     </span>
-    <span
+    <h2
       class="domain-panel-title"
     >
       Test Title
-    </span>
+    </h2>
   </div>
 </div>
 `;
@@ -143,11 +143,11 @@ exports[`<CollapsiblePanelHeader/> panelStatus TODO and help tip 1`] = `
         </span>
       </span>
     </div>
-    <span
+    <h2
       class="domain-panel-title"
     >
       Test Title
-    </span>
+    </h2>
     <span
       class="pull-right"
     >

packages/components/src/internal/components/domainproperties/__snapshots__/ConditionalFormattingAndValidation.test.tsx.snap

@@ -9,11 +9,11 @@ exports[`ConditionalFormattingAndValidation Multiple validators or formats, cond
       <div
         class="col-xs-12"
       >
-        <div
+        <h3
           class="domain-field-section-heading domain-field-section-hdr"
         >
           Conditional Formatting and Validation Options
-        </div>
+        </h3>
       </div>
     </div>
     <div
@@ -121,11 +121,11 @@ exports[`ConditionalFormattingAndValidation No validators 1`] = `
       <div
         class="col-xs-12"
       >
-        <div
+        <h3
           class="domain-field-section-heading domain-field-section-hdr"
         >
           Conditional Formatting Options
-        </div>
+        </h3>
       </div>
     </div>
     <div
@@ -191,11 +191,11 @@ exports[`ConditionalFormattingAndValidation string field 1`] = `
       <div
         class="col-xs-12"
       >
-        <div
+        <h3
           class="domain-field-section-heading domain-field-section-hdr"
         >
           Conditional Formatting and Validation Options
-        </div>
+        </h3>
       </div>
     </div>
     <div

packages/components/src/internal/components/domainproperties/__snapshots__/DomainFieldsDisplay.test.tsx.snap

@@ -5,13 +5,13 @@ exports[`DomainFieldsDisplay with empty domain design 1`] = `
   <div
     class="panel panel-default"
   >
-    <div
+    <h2
       class="panel-heading"
     >
       <div
         class="panel-title"
       />
-    </div>
+    </h2>
     <div
       class="panel-body"
     >
@@ -118,15 +118,15 @@ exports[`DomainFieldsDisplay with title 1`] = `
   <div
     class="panel panel-default"
   >
-    <div
+    <h2
       class="panel-heading"
     >
       <div
         class="panel-title"
       >
         test domain title
       </div>
-    </div>
+    </h2>
     <div
       class="panel-body"
     >
@@ -233,15 +233,15 @@ exports[`DomainFieldsDisplay without title 1`] = `
   <div
     class="panel panel-default"
   >
-    <div
+    <h2
       class="panel-heading"
     >
       <div
         class="panel-title"
       >
         test domain name
       </div>
-    </div>
+    </h2>
     <div
       class="panel-body"
     >