Merge branch 'jivanvl-make-chart-panels-focusable-keyboard' into 'master'

Make chart panels focusable via keyboard

See merge request gitlab-org/gitlab!28603

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

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

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

@@ -52,10 +52,17 @@ export default {
 </script>
 
 <template>
-  <div v-if="showPanels" ref="graph-group" class="card prometheus-panel">
+  <div v-if="showPanels" ref="graph-group" class="card prometheus-panel" tabindex="0">
     <div class="card-header d-flex align-items-center">
       <h4 class="flex-grow-1">{{ name }}</h4>
-      <a role="button" class="js-graph-group-toggle" @click="collapse">
+      <a
+        data-testid="group-toggle-button"
+        role="button"
+        class="js-graph-group-toggle gl-text-gray-900"
+        tabindex="0"
+        @click="collapse"
+        @keyup.enter="collapse"
+      >
         <icon :size="16" :aria-label="__('Toggle collapse')" :name="caretIcon" />
       </a>
     </div>

changelogs/unreleased/jivanvl-make-chart-panels-focusable-keyboard.yml

+---
+title: Focus and toggle metrics dashboard panels via keyboard
+merge_request: 28603
+author:
+type: added

spec/frontend/monitoring/components/dashboard_panel_spec.js

@@ -126,6 +126,10 @@ 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

@@ -8,6 +8,7 @@ describe('Graph group component', () => {
   const findGroup = () => wrapper.find({ ref: 'graph-group' });
   const findContent = () => wrapper.find({ ref: 'graph-group-content' });
   const findCaretIcon = () => wrapper.find(Icon);
+  const findToggleButton = () => wrapper.find('[data-testid="group-toggle-button"]');
 
   const createComponent = propsData => {
     wrapper = shallowMount(GraphGroup, {
@@ -41,6 +42,16 @@ 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);
+    });
+
     it('should show the open the group when collapseGroup is set to true', () => {
       wrapper.setProps({
         collapseGroup: true,
@@ -69,6 +80,15 @@ describe('Graph group component', () => {
 
         expect(wrapper.vm.caretIcon).toBe('angle-down');
       });
+
+      it('should call collapse the graph group content when enter is pressed on the caret icon', () => {
+        const graphGroupContent = findContent();
+        const button = findToggleButton();
+
+        button.trigger('keyup.enter');
+
+        expect(graphGroupContent.isVisible()).toBe(false);
+      });
     });
 
     describe('When groups can not be collapsed', () => {