fix: [Obs Alerts > Rules][KEYBOARD]: Tooltips in the datagrid header …

…must be keyboard accessible (#183294) Closes: elastic/observability-dev#3357 ## Description The Obs Alert Rules view has a table with tooltips that cannot be reached by keyboard. These elements can be helpful to users to understand what the column represents, and must be available to all users. Screenshots attached below. This ticket captures tooltips on the **Rules** and **Logs** tabs for compactness. Let me know if you need me to break these out to individual items. ### Steps to recreate 1. Open the [Obs Alerts Rules](https://keepserverless-qa-oblt-b4ba07.kb.eu-west-1.aws.qa.elastic.cloud/app/observability/alerts/rules) table 2. Click or tab to the rules table 3. Tab through the Rules table ### What was changed?: 1. `EuiToolTip` was replaced to `EuiIconTip` ### Screen: https://github.com/elastic/kibana/assets/20072247/659d185a-ae97-499e-bd49-c8a4830e1f0e https://github.com/elastic/kibana/assets/20072247/8ab7b809-e3fb-4d88-b027-01d8927481fb
elastic · May 16, 2024 · 72e3d3f · 72e3d3f
1 parent 70ef967
commit 72e3d3f
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 77 deletions.
diff --git a/...ctions_ui/public/application/sections/common/components/event_log/event_log_data_grid.tsx b/...ctions_ui/public/application/sections/common/components/event_log/event_log_data_grid.tsx
@@ -22,8 +22,8 @@ import {
   EuiDataGridCellPopoverElementProps,
   useEuiTheme,
   EuiToolTip,
+  EuiIconTip,
   EuiText,
-  EuiIcon,
 } from '@elastic/eui';
 import {
   IExecutionLog,
@@ -142,14 +142,18 @@ const columnsWithToolTipMap: Record<string, Record<string, string>> = {
 
 export const ColumnHeaderWithToolTip = ({ id }: { id: string }) => {
   return (
-    <EuiToolTip content={columnsWithToolTipMap[id].toolTip}>
-      <EuiFlexGroup gutterSize="xs" alignItems="center">
-        <EuiFlexItem>{columnsWithToolTipMap[id].display}</EuiFlexItem>
-        <EuiFlexItem>
-          <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiToolTip>
+    <EuiFlexGroup gutterSize="xs" alignItems="center">
+      <EuiFlexItem>{columnsWithToolTipMap[id].display}</EuiFlexItem>
+      <EuiFlexItem>
+        <EuiIconTip
+          content={columnsWithToolTipMap[id].toolTip}
+          size="s"
+          color="subdued"
+          type="questionInCircle"
+          className="eui-alignTop"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
 

diff --git a/...triggers_actions_ui/public/application/sections/rules_list/components/rules_list.test.tsx b/...triggers_actions_ui/public/application/sections/rules_list/components/rules_list.test.tsx
@@ -1382,7 +1382,10 @@ describe('rules_list with show only capability', () => {
       const rows = await screen.findAllByTestId('rule-row');
       expect(rows[0].className).not.toContain('actRulesList__tableRowDisabled');
       expect(rows[1].className).toContain('actRulesList__tableRowDisabled');
-      fireEvent.mouseOver(await screen.findByText('Info'));
+      const tooltips = await screen.findAllByText('Info');
+
+      fireEvent.mouseOver(tooltips[tooltips.length - 1]);
+
       const tooltip = await screen.findByTestId('ruleDisabledByLicenseTooltip');
       expect(tooltip).toHaveTextContent('This rule type requires a Platinum license.');
     });

diff --git a/...riggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx b/...riggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
@@ -21,7 +21,6 @@ import {
   EuiTableSortingType,
   EuiButtonIcon,
   EuiSelectableOption,
-  EuiIcon,
   EuiScreenReaderOnly,
   EuiCheckbox,
   RIGHT_ALIGNMENT,
@@ -237,7 +236,9 @@ export const RulesListTable = (props: RulesListTableProps) => {
   const renderPercentileColumnName = useCallback(() => {
     return (
       <span data-test-subj={`rulesTable-${selectedPercentile}ColumnName`}>
-        <EuiToolTip
+        {selectedPercentile}
+        &nbsp;
+        <EuiIconTip
           content={i18n.translate(
             'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.ruleExecutionPercentileTooltip',
             {
@@ -248,12 +249,11 @@ export const RulesListTable = (props: RulesListTableProps) => {
               },
             }
           )}
-        >
-          <span>
-            {selectedPercentile}&nbsp;
-            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-          </span>
-        </EuiToolTip>
+          size="s"
+          color="subdued"
+          type="questionInCircle"
+          className="eui-alignTop"
+        />
         <PercentileSelectablePopover
           options={percentileOptions}
           onOptionsChange={onPercentileOptionsChange}
@@ -422,23 +422,26 @@ export const RulesListTable = (props: RulesListTableProps) => {
           { defaultMessage: 'Last run' }
         ),
         name: (
-          <EuiToolTip
-            data-test-subj="rulesTableCell-lastExecutionDateTooltip"
-            content={i18n.translate(
-              'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.lastRunTitleTooltip',
-              {
-                defaultMessage: 'Start time of the last run.',
-              }
+          <span>
+            {i18n.translate(
+              'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.lastRunTitle',
+              { defaultMessage: 'Last run' }
             )}
-          >
-            <span>
-              {i18n.translate(
-                'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.lastRunTitle',
-                { defaultMessage: 'Last run' }
+            &nbsp;
+            <EuiIconTip
+              data-test-subj="rulesTableCell-lastExecutionDateTooltip"
+              content={i18n.translate(
+                'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.lastRunTitleTooltip',
+                {
+                  defaultMessage: 'Start time of the last run.',
+                }
               )}
-              <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-            </span>
-          </EuiToolTip>
+              size="s"
+              color="subdued"
+              type="questionInCircle"
+              className="eui-alignTop"
+            />
+          </span>
         ),
         sortable: true,
         width: '20%',
@@ -469,26 +472,28 @@ export const RulesListTable = (props: RulesListTableProps) => {
           { defaultMessage: 'Notify' }
         ),
         name: (
-          <EuiToolTip
-            data-test-subj="rulesTableCell-notifyTooltip"
-            content={i18n.translate(
-              'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.notifyTooltip',
+          <span>
+            {i18n.translate(
+              'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.notifyTitle',
               {
-                defaultMessage: 'Snooze notifications for a rule.',
+                defaultMessage: 'Notify',
               }
             )}
-          >
-            <span>
-              {i18n.translate(
-                'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.notifyTitle',
+            &nbsp;
+            <EuiIconTip
+              data-test-subj="rulesTableCell-notifyTooltip"
+              content={i18n.translate(
+                'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.notifyTooltip',
                 {
-                  defaultMessage: 'Notify',
+                  defaultMessage: 'Snooze notifications for a rule.',
                 }
               )}
-              &nbsp;
-              <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-            </span>
-          </EuiToolTip>
+              size="s"
+              color="subdued"
+              type="questionInCircle"
+              className="eui-alignTop"
+            />
+          </span>
         ),
         width: '14%',
         'data-test-subj': 'rulesTableCell-rulesListNotify',
@@ -581,23 +586,26 @@ export const RulesListTable = (props: RulesListTableProps) => {
           { defaultMessage: 'Duration' }
         ),
         name: (
-          <EuiToolTip
-            data-test-subj="rulesTableCell-durationTooltip"
-            content={i18n.translate(
-              'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.durationTitleTooltip',
-              {
-                defaultMessage: 'The length of time it took for the rule to run (mm:ss).',
-              }
+          <span>
+            {i18n.translate(
+              'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.durationTitle',
+              { defaultMessage: 'Duration' }
             )}
-          >
-            <span>
-              {i18n.translate(
-                'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.durationTitle',
-                { defaultMessage: 'Duration' }
+            &nbsp;
+            <EuiIconTip
+              data-test-subj="rulesTableCell-durationTooltip"
+              content={i18n.translate(
+                'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.durationTitleTooltip',
+                {
+                  defaultMessage: 'The length of time it took for the rule to run (mm:ss).',
+                }
               )}
-              <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-            </span>
-          </EuiToolTip>
+              size="s"
+              color="subdued"
+              type="questionInCircle"
+              className="eui-alignTop"
+            />
+          </span>
         ),
         sortable: true,
         truncateText: false,
@@ -654,23 +662,26 @@ export const RulesListTable = (props: RulesListTableProps) => {
           { defaultMessage: 'Success ratio' }
         ),
         name: (
-          <EuiToolTip
-            data-test-subj="rulesTableCell-successRatioTooltip"
-            content={i18n.translate(
-              'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.successRatioTitleTooltip',
-              {
-                defaultMessage: 'How often this rule runs successfully.',
-              }
+          <span>
+            {i18n.translate(
+              'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.successRatioTitle',
+              { defaultMessage: 'Success ratio' }
             )}
-          >
-            <span>
-              {i18n.translate(
-                'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.successRatioTitle',
-                { defaultMessage: 'Success ratio' }
+            &nbsp;
+            <EuiIconTip
+              data-test-subj="rulesTableCell-successRatioTooltip"
+              content={i18n.translate(
+                'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.successRatioTitleTooltip',
+                {
+                  defaultMessage: 'How often this rule runs successfully.',
+                }
               )}
-              <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-            </span>
-          </EuiToolTip>
+              size="s"
+              color="subdued"
+              type="questionInCircle"
+              className="eui-alignTop"
+            />
+          </span>
         ),
         sortable: true,
         truncateText: false,