Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Rename skip-link list label prop to list-label #17

Merged
merged 2 commits into from
Jun 13, 2020
Merged

fix: Rename skip-link list label prop to list-label #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
810f323
Rename skip-link list label prop to `listLabel`
shwilliam Jun 12, 2020
3f3729f
Merge branch 'next' into rename-list-label
ktquez Jun 12, 2020
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
14 changes: 7 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ new Vue({

<template>
<div id="app">
<VueSkipTo to="#main" text="Skip to main content" />
<VueSkipTo to="#main" label="Skip to main content" />

<!-- header, navigation, and more -->

Expand Down Expand Up @@ -94,7 +94,7 @@ To use multiple links, simply pass an array into the `to` prop with the followin
<template>
<div id="app">
<vue-skip-to
title-list="Skip to"
list-label="Skip to"
:to="[
{ anchor: '#main', label: 'Main content' },
{ anchor: '#footer', label: 'Footer' },
Expand Down Expand Up @@ -139,11 +139,11 @@ To use multiple links, simply pass an array into the `to` prop with the followin

## Props

| Prop | Data Type | required | Description | Default |
| ----------- | --------------- | -------- | --------------------------------------------------------------- | ---------------------- |
| `to` | String \| Array | false | Destination ID or [array of destination objects](#skip-to-list) | '#main' |
| `label` | String | false | Skip link text content | 'Skip to main content' |
| `titleList` | String | false | Skip link list label text | 'Skip to' |
| Prop | Data Type | required | Description | Default |
| ------------ | --------------- | -------- | ----------------------------------------------------------------- | ---------------------- |
| `to` | String \| Array | false | Destination ID or [array of destination objects](###skip-to-list) | '#main' |
| `label` | String | false | Skip link text content | 'Skip to main content' |
| `list-label` | String | false | Skip link list label text | 'Skip to' |

## Custom styling

Expand Down
6 changes: 2 additions & 4 deletions demo/skip-to-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,13 @@
<div id="app">
<!-- data-vst used for internal testing, it is NOT required -->
<vue-skip-to
title-list="Skip links"
list-label="Skip links"
:to="[
{ anchor: '#main', label: 'Main content' },
{ anchor: '#footer', label: 'Footer' },
]"
data-vst="skip-to-list"
>
Skip links
</vue-skip-to>
></vue-skip-to>

<header>
<h1>Press tab</h1>
Expand Down
4 changes: 2 additions & 2 deletions src/VueSkipTo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default {
name: 'VueSkipTo',

props: {
titleList: {
listLabel: {
type: String,
default: 'Skip to'
},
Expand All @@ -36,7 +36,7 @@ export default {
},

props () {
if (this.isList) return { titleList: this.titleList, to: this.to }
if (this.isList) return { listLabel: this.listLabel, to: this.to }
return { label: this.label, to: this.to }
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/VueSkipToList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<nav class="vue-skip-to__nav">
<span id="list-title">{{ titleList }}</span>
<span id="list-title">{{ listLabel }}</span>
<ul class="vue-skip-to__nav-list">
<li
v-for="el in to"
Expand All @@ -11,7 +11,7 @@
>
<VueSkipToSingle
:to="el.anchor"
:aria-label="el.ariaLabel || `${titleList} ${el.label}`"
:aria-label="el.ariaLabel || `${listLabel} ${el.label}`"
>
{{ el.label }}
</VueSkipToSingle>
Expand All @@ -27,7 +27,7 @@ export default {
name: 'VueSkipToList',

props: {
titleList: {
listLabel: {
type: String,
default: 'Skip to'
},
Expand Down