feat(accessibility): enhance WCAG 2.1 compliance for search components

.gitignore

@@ -65,9 +65,10 @@ typings/
 
 dist/
 
-# Intellij integration
+# IDE integration
 *.iml
 .idea/*
+.vscode/*
 
 # ignores for Yarn v3 w/o PNP
 .pnp.*

src/cohort-builder.component.tsx

@@ -153,32 +153,42 @@ const CohortBuilder: React.FC = () => {
   ];
 
   return (
-    <div className={classNames(styles.mainContainer, styles.cohortBuilder)}>
+    <main className={classNames(styles.mainContainer, styles.cohortBuilder)}>
       <div className={classNames(isLayoutTablet ? styles.tabletContainer : styles.desktopContainer)}>
-        <p className={styles.title}>{t('cohortBuilder', 'Cohort Builder')}</p>
-        <div className={styles.tabContainer}>
-          <p className={styles.heading}>{t('searchCriteria', 'Search Criteria')}</p>
+        <header>
+          <h1 className={styles.title}>{t('cohortBuilder', 'Cohort Builder')}</h1>
+        </header>
+        <section className={styles.tabContainer} aria-labelledby="search-criteria-heading">
+          <h2 id="search-criteria-heading" className={styles.heading}>
+            {t('searchCriteria', 'Search Criteria')}
+          </h2>
           <div className={styles.tab}>
             <Tabs>
-              <TabList aria-label="navigation">
+              <TabList aria-label={t('searchCriteriaNavigation', 'Search criteria navigation')}>
                 {tabs.map((tab: TabItem, index: number) => (
-                  <Tab className={styles.tab} key={index}>
+                  <Tab className={styles.tab} key={index} id={`search-tab-${index}`}>
                     {tab.name}
                   </Tab>
                 ))}
               </TabList>
               <TabPanels>
                 {tabs.map((tab: TabItem, index: number) => (
-                  <TabPanel key={index}>{tab.component}</TabPanel>
+                  <TabPanel key={index} aria-labelledby={`search-tab-${index}`}>
+                    {tab.component}
+                  </TabPanel>
                 ))}
               </TabPanels>
             </Tabs>
           </div>
-        </div>
-        <SearchResultsTable patients={patients} />
-        <SearchHistory isHistoryUpdated={isHistoryUpdated} setIsHistoryUpdated={setIsHistoryUpdated} />
+        </section>
+        <section>
+          <SearchResultsTable patients={patients} />
+        </section>
+        <section>
+          <SearchHistory isHistoryUpdated={isHistoryUpdated} setIsHistoryUpdated={setIsHistoryUpdated} />
+        </section>
       </div>
-    </div>
+    </main>
   );
 };
 

src/cohort-builder.scss

@@ -2,6 +2,46 @@
 @use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
+// Screen reader only class for accessibility - using :global for CSS modules compatibility
+:global(.sr-only) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+// Focus management for accessibility
+.focus-visible {
+  outline: 2px solid var(--cds-focus) !important;
+  outline-offset: 2px !important;
+}
+
+// Error message styling for accessibility
+.error-message {
+  color: var(--cds-support-error);
+  margin-top: spacing.$spacing-03;
+  font-size: 0.875rem;
+
+  &::before {
+    content: '⚠ ';
+    font-weight: bold;
+  }
+}
+
+// Loading announcement styling
+.loading-announcement {
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
 .heading {
   @include type.type-style('productive-heading-02');
   color: $text-02;

src/components/search-button-set/search-button-set.scss

@@ -19,3 +19,19 @@
     @include type.type-style('body-01');
   }
 }
+
+.errorMessage {
+  color: var(--cds-support-error);
+  margin-bottom: layout.$spacing-03;
+  padding: layout.$spacing-03;
+  border-left: 3px solid var(--cds-support-error);
+  background-color: var(--cds-support-error-hover);
+  border-radius: 4px;
+
+  @include type.type-style('body-01');
+
+  &::before {
+    content: '⚠ ';
+    font-weight: bold;
+  }
+}

src/components/search-button-set/search-button-set.tsx

@@ -7,26 +7,58 @@ interface SearchButtonSet {
   isLoading: boolean;
   onHandleSubmit: () => void;
   onHandleReset: () => void;
+  submitError?: string;
 }
 
-const SearchButtonSet: React.FC<SearchButtonSet> = ({ isLoading, onHandleSubmit, onHandleReset }) => {
+const SearchButtonSet: React.FC<SearchButtonSet> = ({ isLoading, onHandleSubmit, onHandleReset, submitError }) => {
   const { t } = useTranslation();
 
   return (
     <Column sm={2} md={{ offset: 4 }} className={styles.container}>
+      {/* Accessible loading state announcement */}
+      {isLoading && (
+        <div aria-live="assertive" aria-atomic="true" className="sr-only">
+          {t('searchingPatients', 'Searching for patients, please wait...')}
+        </div>
+      )}
+
+      {/* Error message announcement */}
+      {submitError && (
+        <div role="alert" aria-live="assertive" className={styles.errorMessage}>
+          <span className="sr-only">{t('error', 'Error')}: </span>
+          {submitError}
+        </div>
+      )}
+
       <ButtonSet className={styles.buttonSet}>
-        <Button className={styles.button} kind="secondary" onClick={onHandleReset} data-testid="reset-btn">
+        <Button 
+          className={styles.button} 
+          kind="secondary" 
+          onClick={onHandleReset} 
+          data-testid="reset-btn"
+          aria-describedby="reset-help"
+          disabled={isLoading}
+        >
           {t('reset', 'Reset')}
         </Button>
+        <div id="reset-help" className="sr-only">
+          {t('resetHelp', 'Clear all search criteria and start over')}
+        </div>
+
         <Button
           className={styles.button}
           kind="primary"
           disabled={isLoading}
           onClick={onHandleSubmit}
           data-testid="search-btn"
+          aria-describedby="search-help"
+          aria-label={isLoading ? t('searchingInProgress', 'Search in progress') : t('search', 'Search')}
         >
           {isLoading ? <InlineLoading description={t('loading', 'Loading')} /> : t('search', 'Search')}
         </Button>
+        <div id="search-help" className="sr-only">
+          {t('searchHelp', 'Execute the search with the current criteria to find matching patients')}
+        </div>
       </ButtonSet>
     </Column>
   );