A11y fix skip areas

src/components/OcSidebarNav.spec.js

@@ -1,5 +1,4 @@
 import { shallowMount } from "@vue/test-utils"
-import CompressionPlugin from "compression-webpack-plugin"
 import Sidebar from "./OcSidebarNav.vue"
 
 const defaultProps = {
@@ -10,29 +9,29 @@ const defaultProps = {
 const slots = {
   header: '<span class="header">Logo</span>',
   nav: '<span class="nav">Nav</span>',
-  footer: '<span class="footer">Footer</span>'
+  footer: '<span class="footer">Footer</span>',
 }
 
 describe("OcSidebarNav", () => {
-  it('displays all slots', () => {
+  it("displays all slots", () => {
     const wrapper = shallowMount(Sidebar, {
       propsData: defaultProps,
-      slots
+      slots,
     })
 
-    expect(wrapper.findAll('.header').length).toBe(1)
-    expect(wrapper.findAll('.nav').length).toBe(1)
-    expect(wrapper.findAll('.footer').length).toBe(1)
+    expect(wrapper.findAll(".header").length).toBe(1)
+    expect(wrapper.findAll(".nav").length).toBe(1)
+    expect(wrapper.findAll(".footer").length).toBe(1)
   })
 
-  it('sets all accessible labels', () => {
+  it("sets all accessible labels", () => {
     const wrapper = shallowMount(Sidebar, {
       propsData: defaultProps,
-      slots
+      slots,
     })
 
-    expect(wrapper.find('header').attributes()['aria-label']).toMatch('sidebar-header')
-    expect(wrapper.find('nav').attributes()['aria-label']).toMatch('sidebar-nav')
-    expect(wrapper.find('footer').attributes()['aria-label']).toMatch('sidebar-footer')
+    expect(wrapper.find("figure").attributes()["aria-label"]).toMatch("sidebar-header")
+    expect(wrapper.find("nav").attributes()["aria-label"]).toMatch("sidebar-nav")
+    expect(wrapper.find("footer").attributes()["aria-label"]).toMatch("sidebar-footer")
   })
 })

src/components/OcSidebarNav.vue

@@ -5,14 +5,14 @@
     :class="[data.staticClass, data.class]"
     v-bind="data.attrs"
   >
-    <header
+    <figure
       v-if="slots().header"
       class="oc-sidebar-header"
       :aria-label="props.accessibleLabelHeader"
     >
       <!-- @slot Header of the sidebar -->
       <slot name="header" />
-    </header>
+    </figure>
     <nav v-if="slots().nav" class="oc-sidebar-nav" :aria-label="props.accessibleLabelNav">
       <!-- @slot Main content of the sidebar -->
       <slot name="nav" />