feat(NcAppNavigationCaption): Add `heading-id` prop to allow setting the ID on the caption itself
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Родитель
a6785e2582
Коммит
89529f7984
|
@ -1,4 +1,6 @@
|
|||
<docs>
|
||||
### Basic usage
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<ul class="nav">
|
||||
|
@ -95,6 +97,23 @@
|
|||
</style>
|
||||
```
|
||||
|
||||
### Element used as a heading
|
||||
```vue
|
||||
<template>
|
||||
<!-- e.g. NcAppNavigation-->
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<NcAppNavigationCaption heading-id="mylist-heading"
|
||||
is-heading
|
||||
name="My navigation list" />
|
||||
<NcAppNavigationList aria-labelledby="mylist-heading">
|
||||
<NcAppNavigationItem name="First" />
|
||||
<NcAppNavigationItem name="Second" />
|
||||
<NcAppNavigationItem name="Third" />
|
||||
</NcAppNavigationList>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
</docs>
|
||||
|
||||
<template>
|
||||
|
@ -102,7 +121,9 @@
|
|||
class="app-navigation-caption"
|
||||
:class="{ 'app-navigation-caption--heading': isHeading }">
|
||||
<!-- Name of the caption -->
|
||||
<component :is="captionTag" class="app-navigation-caption__name">
|
||||
<component :is="captionTag"
|
||||
:id="headingId"
|
||||
class="app-navigation-caption__name">
|
||||
{{ name }}
|
||||
</component>
|
||||
|
||||
|
@ -138,6 +159,15 @@ export default {
|
|||
required: true,
|
||||
},
|
||||
|
||||
/**
|
||||
* `id` to set on the inner caption
|
||||
* Can be used for connecting the `NcActionCaption` with `NcActionList` using `aria-labelledby`.
|
||||
*/
|
||||
headingId: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
|
||||
/**
|
||||
* Enable when used as a heading
|
||||
* e.g. Before NcAppNavigationList
|
||||
|
|
|
@ -19,7 +19,6 @@
|
|||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { emit } from '@nextcloud/event-bus'
|
||||
|
|
|
@ -22,6 +22,18 @@ describe('NcAppNavigationCaption.vue', () => {
|
|||
expect(wrapper.findComponent({ name: 'NcActions' }).attributes('forcemenu')).toBe('true')
|
||||
})
|
||||
|
||||
test('can set id on the caption', async () => {
|
||||
const wrapper = shallowMount(NcAppNavigationCaption, {
|
||||
props: {
|
||||
name: 'The name',
|
||||
isHeading: true,
|
||||
headingId: 'my-heading-id',
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.find('h2').attributes('id')).toBe('my-heading-id')
|
||||
})
|
||||
|
||||
test('component is a list entry by default', async () => {
|
||||
const wrapper = shallowMount(NcAppNavigationCaption, {
|
||||
props: {
|
||||
|
@ -45,30 +57,4 @@ describe('NcAppNavigationCaption.vue', () => {
|
|||
expect(wrapper.element.tagName).toBe('DIV')
|
||||
expect(wrapper.find('h2').exists()).toBe(true)
|
||||
})
|
||||
|
||||
test('can set the heading level', async () => {
|
||||
const wrapper = shallowMount(NcAppNavigationCaption, {
|
||||
props: {
|
||||
name: 'The name',
|
||||
isHeading: true,
|
||||
headingLevel: 3,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.find('h3').exists()).toBe(true)
|
||||
expect(wrapper.find('h2').exists()).toBe(false)
|
||||
})
|
||||
|
||||
test('does not set the heading level to h1', async () => {
|
||||
const wrapper = shallowMount(NcAppNavigationCaption, {
|
||||
props: {
|
||||
name: 'The name',
|
||||
isHeading: true,
|
||||
headingLevel: 1,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.find('h2').exists()).toBe(true)
|
||||
expect(wrapper.find('h1').exists()).toBe(false)
|
||||
})
|
||||
})
|
||||
|
|
Загрузка…
Ссылка в новой задаче