fix a11y issue

elastic · Jul 6, 2021 · 95bd4d5 · 95bd4d5
1 parent 681d9c1
commit 95bd4d5
Showing 1 changed file with 44 additions and 43 deletions.
diff --git a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.tsx b/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.tsx
@@ -101,9 +101,6 @@ export class FeatureTable extends Component<Props, {}> {
             }
           }}
         >
-          <EuiFlexItem grow={false}>
-            <EuiCheckbox {...checkboxProps} />
-          </EuiFlexItem>
           {category.euiIconType ? (
             <EuiFlexItem grow={false}>
               <EuiIcon size="m" type={category.euiIconType} />
@@ -133,46 +130,50 @@ export class FeatureTable extends Component<Props, {}> {
       const helpText = this.getCategoryHelpText(category);
 
       const accordion = (
-        <EuiAccordion
-          id={`featureCategory_${category.id}`}
-          data-test-subj={`featureCategory_${category.id}`}
-          key={category.id}
-          arrowDisplay={canExpandCategory ? 'right' : 'none'}
-          forceState={canExpandCategory ? undefined : 'closed'}
-          buttonContent={buttonContent}
-          extraAction={canExpandCategory ? extraAction : undefined}
-        >
-          <div className="spcFeatureTableAccordionContent">
-            <EuiSpacer size="m" />
-            {helpText && (
-              <>
-                <EuiCallOut iconType="iInCircle" size="s">
-                  {helpText}
-                </EuiCallOut>
-                <EuiSpacer size="m" />
-              </>
-            )}
-            {featuresInCategory.map((feature) => {
-              const featureChecked = !(
-                space.disabledFeatures && space.disabledFeatures.includes(feature.id)
-              );
-
-              return (
-                <EuiFlexGroup key={`${feature.id}-toggle`}>
-                  <EuiFlexItem grow={false}>
-                    <EuiCheckbox
-                      id={`featureCheckbox_${feature.id}`}
-                      data-test-subj={`featureCheckbox_${feature.id}`}
-                      checked={featureChecked}
-                      onChange={this.onChange(feature.id) as any}
-                      label={feature.name}
-                    />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              );
-            })}
-          </div>
-        </EuiAccordion>
+        <EuiFlexGroup key={category.id} alignItems="baseline" responsive={false} gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiCheckbox {...checkboxProps} />
+          </EuiFlexItem>
+          <EuiFlexItem grow={1}>
+            <EuiAccordion
+              id={`featureCategory_${category.id}`}
+              data-test-subj={`featureCategory_${category.id}`}
+              arrowDisplay={canExpandCategory ? 'right' : 'none'}
+              forceState={canExpandCategory ? undefined : 'closed'}
+              buttonContent={buttonContent}
+              extraAction={canExpandCategory ? extraAction : undefined}
+            >
+              <EuiSpacer size="m" />
+              {helpText && (
+                <>
+                  <EuiCallOut iconType="iInCircle" size="s">
+                    {helpText}
+                  </EuiCallOut>
+                  <EuiSpacer size="m" />
+                </>
+              )}
+              {featuresInCategory.map((feature) => {
+                const featureChecked = !(
+                  space.disabledFeatures && space.disabledFeatures.includes(feature.id)
+                );
+
+                return (
+                  <EuiFlexGroup key={`${feature.id}-toggle`}>
+                    <EuiFlexItem grow={false}>
+                      <EuiCheckbox
+                        id={`featureCheckbox_${feature.id}`}
+                        data-test-subj={`featureCheckbox_${feature.id}`}
+                        checked={featureChecked}
+                        onChange={this.onChange(feature.id) as any}
+                        label={feature.name}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                );
+              })}
+            </EuiAccordion>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       );
 
       accordions.push({