fix: [Index Management > Multiple tabs][SCREEN READER]: Links should …

…not be used to open modals or update local UI (elastic#192480) Closes: elastic/search-team#8218 ## Description Three table views in the Index Management tabs have a first column that are A tags but open a modal dialog on the page right on click. This is potentially confusing because links typically "go somewhere" and buttons "do something". ## What was changed?: 1. The role='button' attribute was set in the mentioned places to address accessibility (a11y) concerns for screen reader users. ## Screens: ### Index Templates: <img width="1110" alt="image" src="https://github.com/user-attachments/assets/2c352fc4-9c45-46f3-81e7-ad867a09805d"> ### Data Scteams: <img width="1110" alt="image" src="https://github.com/user-attachments/assets/b31ffd0f-5675-40a7-8540-97996da3d1b1"> ### Component Templates: <img width="1110" alt="image" src="https://github.com/user-attachments/assets/51927069-3542-49ad-83f9-6e329beb3999">
ersin-erdal · Sep 11, 2024 · 9150bfd · 9150bfd
1 parent b78ab47
commit 9150bfd
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 0 deletions.
diff --git a/...ement/public/application/components/component_templates/component_template_list/table.tsx b/...ement/public/application/components/component_templates/component_template_list/table.tsx
@@ -257,6 +257,7 @@ export const ComponentTable: FunctionComponent<Props> = ({
                 },
                 () => trackMetric(METRIC_TYPE.CLICK, UIM_COMPONENT_TEMPLATE_DETAILS)
               )}
+              role="button"
               data-test-subj="templateDetailsLink"
             >
               {name}

diff --git a/...public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx b/...public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx
@@ -79,6 +79,7 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
       return (
         <Fragment>
           <EuiLink
+            role="button"
             data-test-subj="nameLink"
             {...reactRouterNavigate(history, getDataStreamDetailsLink(name))}
           >

diff --git a/...nagement/public/application/sections/home/template_list/template_table/template_table.tsx b/...nagement/public/application/sections/home/template_list/template_table/template_table.tsx
@@ -60,6 +60,7 @@ export const TemplateTable: React.FunctionComponent<Props> = ({
               {...reactRouterNavigate(history, getTemplateDetailsLink(name), () =>
                 uiMetricService.trackMetric(METRIC_TYPE.CLICK, UIM_TEMPLATE_SHOW_DETAILS_CLICK)
               )}
+              role="button"
               data-test-subj="templateDetailsLink"
             >
               {name}
-Original file line number
+Diff line change
@@ Expand Up / @@ -257,6 +257,7 @@ export const ComponentTable: FunctionComponent<Props> = ({ @@
                     },
                     () => trackMetric(METRIC_TYPE.CLICK, UIM_COMPONENT_TEMPLATE_DETAILS)
                   )}
+                  role="button"
                   data-test-subj="templateDetailsLink"
                 >
                   {name}
@@ Expand Down @@