[Observability Onboarding] Add ARIA labels to option containers on th…

…e main screen (#190707) Closes elastic/observability-accessibility#125 **(🔒 internal)** Closes elastic/observability-accessibility#124 **(🔒 internal)** Improves accessibility of the option groups.
elastic · Aug 20, 2024 · cb14fe6 · cb14fe6
1 parent 5040329
commit cb14fe6
Showing 1 changed file with 46 additions and 35 deletions.
diff --git a/...observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx b/...observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
@@ -92,6 +92,8 @@ export const OnboardingFlowForm: FunctionComponent = () => {
 
   const customMargin = useCustomMargin();
   const radioGroupId = useGeneratedHtmlId({ prefix: 'onboardingCategory' });
+  const categorySelectorTitleId = useGeneratedHtmlId();
+  const packageListTitleId = useGeneratedHtmlId();
 
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -138,6 +140,7 @@ export const OnboardingFlowForm: FunctionComponent = () => {
   return (
     <EuiPanel hasBorder paddingSize="xl">
       <TitleWithIcon
+        id={categorySelectorTitleId}
         iconType="createSingleMetricJob"
         title={i18n.translate(
           'xpack.observability_onboarding.experimentalOnboardingFlow.strong.startCollectingYourDataLabel',
@@ -147,7 +150,13 @@ export const OnboardingFlowForm: FunctionComponent = () => {
         )}
       />
       <EuiSpacer size="m" />
-      <EuiFlexGroup css={{ ...customMargin, maxWidth: '560px' }} gutterSize="l" direction="column">
+      <EuiFlexGroup
+        css={{ ...customMargin, maxWidth: '560px' }}
+        gutterSize="l"
+        direction="column"
+        role="group"
+        aria-labelledby={categorySelectorTitleId}
+      >
         {options.map((option) => (
           <EuiFlexItem
             key={option.id}
@@ -156,36 +165,7 @@ export const OnboardingFlowForm: FunctionComponent = () => {
             <EuiCheckableCard
               id={`${radioGroupId}_${option.id}`}
               name={radioGroupId}
-              label={
-                <>
-                  <EuiText css={{ fontWeight: 'bold' }}>{option.label}</EuiText>
-                  <EuiSpacer size="s" />
-                  <EuiText color="subdued" size="s">
-                    {option.description}
-                  </EuiText>
-                  {(option.logos || option.showIntegrationsBadge) && (
-                    <>
-                      <EuiSpacer size="m" />
-                      <EuiFlexGroup gutterSize="s" responsive={false}>
-                        {option.logos?.map((logo) => (
-                          <EuiFlexItem key={logo} grow={false}>
-                            <LogoIcon logo={logo} />
-                          </EuiFlexItem>
-                        ))}
-                        {option.showIntegrationsBadge && (
-                          <EuiBadge color="hollow">
-                            <FormattedMessage
-                              defaultMessage="+ Integrations"
-                              id="xpack.observability_onboarding.experimentalOnboardingFlow.form.addIntegrations"
-                              description="A badge indicating that the user can add additional observability integrations to their deployment via this option"
-                            />
-                          </EuiBadge>
-                        )}
-                      </EuiFlexGroup>
-                    </>
-                  )}
-                </>
-              }
+              label={<EuiText css={{ fontWeight: 'bold' }}>{option.label}</EuiText>}
               checked={option.id === searchParams.get('category')}
               /**
                * onKeyDown and onKeyUp handlers disable
@@ -211,15 +191,45 @@ export const OnboardingFlowForm: FunctionComponent = () => {
                   );
                 }
               }}
-            />
+            >
+              <EuiText color="subdued" size="s">
+                {option.description}
+              </EuiText>
+              {(option.logos || option.showIntegrationsBadge) && (
+                <>
+                  <EuiSpacer size="m" />
+                  <EuiFlexGroup gutterSize="s" responsive={false}>
+                    {option.logos?.map((logo) => (
+                      <EuiFlexItem key={logo} grow={false}>
+                        <LogoIcon logo={logo} />
+                      </EuiFlexItem>
+                    ))}
+                    {option.showIntegrationsBadge && (
+                      <EuiBadge color="hollow">
+                        <FormattedMessage
+                          defaultMessage="+ Integrations"
+                          id="xpack.observability_onboarding.experimentalOnboardingFlow.form.addIntegrations"
+                          description="A badge indicating that the user can add additional observability integrations to their deployment via this option"
+                        />
+                      </EuiBadge>
+                    )}
+                  </EuiFlexGroup>
+                </>
+              )}
+            </EuiCheckableCard>
           </EuiFlexItem>
         ))}
       </EuiFlexGroup>
       {/* Hiding element instead of not rending these elements in order to preload available packages on page load */}
-      <div hidden={!searchParams.get('category') || !customCards}>
+      <div
+        hidden={!searchParams.get('category') || !customCards}
+        role="group"
+        aria-labelledby={packageListTitleId}
+      >
         <EuiSpacer />
         <div ref={suggestedPackagesRef}>
           <TitleWithIcon
+            id={packageListTitleId}
             iconType="savedObjectsApp"
             title={i18n.translate(
               'xpack.observability_onboarding.experimentalOnboardingFlow.whatTypeOfResourceLabel',
@@ -265,15 +275,16 @@ export const OnboardingFlowForm: FunctionComponent = () => {
 interface TitleWithIconProps {
   title: string;
   iconType: string;
+  id?: string;
 }
 
-const TitleWithIcon: FunctionComponent<TitleWithIconProps> = ({ title, iconType }) => (
+const TitleWithIcon: FunctionComponent<TitleWithIconProps> = ({ title, iconType, id }) => (
   <EuiFlexGroup responsive={false} gutterSize="m" alignItems="center">
     <EuiFlexItem grow={false}>
       <EuiAvatar size="l" name={title} iconType={iconType} iconSize="l" color="subdued" />
     </EuiFlexItem>
     <EuiFlexItem>
-      <EuiTitle size="s">
+      <EuiTitle size="s" id={id}>
         <strong>{title}</strong>
       </EuiTitle>
     </EuiFlexItem>