Skip to content
This repository has been archived by the owner on Jan 3, 2024. It is now read-only.

A11y fix skip areas #1773

Merged
merged 3 commits into from
Jan 25, 2022
Merged

A11y fix skip areas #1773

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eae0f22
feat(OcSidebarNav): replaced header with figure element
Nov 9, 2021
c6bae7b
feat(OcSidebarNav): replacing header with figure for successful test
Nov 9, 2021
c9e1629
Fix unnecessarily renamed class for OcSidebarNav, obsolete dependency…
pascalwengerter Jan 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions src/components/OcSidebarNav.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,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")
})
})
6 changes: 3 additions & 3 deletions src/components/OcSidebarNav.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -71,7 +71,7 @@ export default {
padding: var(--oc-space-large) 0 var(--oc-space-medium);
width: var(--oc-size-width-medium);

&-header {
&-figure {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since you didn't change the class in line 10 in src/components/OcSidebarNav.spec.js this change is not needed

margin-bottom: var(--oc-space-xxlarge);
padding: 0 var(--oc-space-medium);
}
Expand Down