chore(deps): update dependency eslint-plugin-jsx-a11y to v6.8.0 (#4961)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: julieg18 <[email protected]>

Author: renovate[bot]

package.json

@@ -45,7 +45,7 @@
     "eslint-plugin-etc": "2.0.3",
     "eslint-plugin-import": "2.29.0",
     "eslint-plugin-jest": "27.6.0",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-n": "16.2.0",
     "eslint-plugin-prettier": "5.0.1",
     "eslint-plugin-promise": "6.1.1",

webview/src/plots/components/App.test.tsx

@@ -833,6 +833,22 @@ describe('App', () => {
     })
   })
 
+  it('should toggle the custom plots section on Enter key press', async () => {
+    renderAppWithOptionalData({
+      custom: customPlotsFixture
+    })
+    const summaryElement = await screen.findByText('Custom')
+
+    fireEvent.keyDown(summaryElement, {
+      key: 'Enter'
+    })
+
+    expect(mockPostMessage).toHaveBeenCalledWith({
+      payload: { [PlotsSection.CUSTOM_PLOTS]: true },
+      type: MessageFromWebviewType.TOGGLE_PLOTS_SECTION
+    })
+  })
+
   it('should display a slider to pick the number of items per row if there are items and the action is available', () => {
     const store = renderAppWithOptionalData({
       custom: customPlotsFixture

webview/src/shared/components/sectionContainer/SectionContainer.tsx

@@ -71,7 +71,17 @@ export const SectionContainer: React.FC<
         open={open}
         className={styles.sectionContainer}
       >
-        <summary onClick={toggleSection} style={{ top: stickyHeaderTop }}>
+        <summary
+          onClick={toggleSection}
+          onKeyDown={event => {
+            if (event.key === 'Enter') {
+              onToggleSection()
+            }
+          }}
+          tabIndex={0}
+          role="button"
+          style={{ top: stickyHeaderTop }}
+        >
           <div className={styles.summaryTitle}>
             <Icon
               icon={open ? ChevronDown : ChevronRight}