Remove tabindex where not needed

app/assets/javascripts/monitoring/components/dashboard_panel.vue

@@ -339,7 +339,6 @@ export default {
       <h5
         ref="graphTitle"
         class="prometheus-graph-title gl-font-lg font-weight-bold text-truncate gl-mr-3"
-        tabindex="0"
       >
         {{ title }}
       </h5>

app/assets/javascripts/monitoring/components/graph_group.vue

@@ -52,7 +52,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="showPanels" ref="graph-group" class="card prometheus-panel" tabindex="0">
+  <div v-if="showPanels" ref="graph-group" class="card prometheus-panel">
     <div class="card-header d-flex align-items-center">
       <h4 class="flex-grow-1">{{ name }}</h4>
       <a

changelogs/unreleased/219385-metrics-dashboard-elements-outline.yml

+---
+title: Remove dashboard panels' tabindex where is not needed
+merge_request: 36168
+author:
+type: fixed

spec/frontend/monitoring/components/dashboard_panel_spec.js

@@ -136,10 +136,6 @@ describe('Dashboard Panel', () => {
       expect(wrapper.find(MonitorEmptyChart).exists()).toBe(true);
       expect(wrapper.find(MonitorEmptyChart).isVueInstance()).toBe(true);
     });
-
-    it('does not contain a tabindex attribute', () => {
-      expect(wrapper.find(MonitorEmptyChart).contains('[tabindex]')).toBe(false);
-    });
   });
 
   describe('When graphData is null', () => {

spec/frontend/monitoring/components/graph_group_spec.js

@@ -42,14 +42,10 @@ describe('Graph group component', () => {
       });
     });
 
-    it('should contain a tabindex', () => {
-      expect(findGroup().contains('[tabindex]')).toBe(true);
-    });
-
     it('should contain a tab index for the collapse button', () => {
       const groupToggle = findToggleButton();
 
-      expect(groupToggle.contains('[tabindex]')).toBe(true);
+      expect(groupToggle.is('[tabindex]')).toBe(true);
     });
 
     it('should show the open the group when collapseGroup is set to true', () => {