@ucd-lib/theme-elements 3.4.0 → 3.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/brand/ucd-theme-pagination/ucd-theme-pagination.js +2 -2
- package/brand/ucd-theme-subnav/ucd-theme-subnav.js +2 -0
- package/brand/ucd-theme-subnav/ucd-theme-subnav.tpl.js +1 -3
- package/package.json +1 -1
- package/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js +3 -0
- package/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.tpl.js +1 -1
|
@@ -161,7 +161,7 @@ export default class UcdThemePagination extends LitElement {
|
|
|
161
161
|
return html `<li class="pager__item ${args.class || ''}">
|
|
162
162
|
${((this.currentPage == 1 && args.label == "Prev") || (this.currentPage == this.maxPages && args.label == "Next") ) ?
|
|
163
163
|
html`<button disabled style="cursor: default; color: ${this.darkmode ? '#cccccc' : '#999999'}; background: ${this.darkmode ? 'transparent' : 'white'}" page="${page}">${args.label || page}</button>`:
|
|
164
|
-
html`<a style="cursor:pointer;" tabindex="1" @click="${this._onPageClicked}" page="${page}" aria-label="${ifDefined(args.label === '...' ?
|
|
164
|
+
html`<a style="cursor:pointer;" tabindex="1" @click="${this._onPageClicked}" page="${page}" aria-label="${ifDefined(args.label === '...' ? `Page: ${page}` : undefined)}">${args.label || page}</a>`
|
|
165
165
|
}
|
|
166
166
|
</li>`;
|
|
167
167
|
}
|
|
@@ -170,7 +170,7 @@ export default class UcdThemePagination extends LitElement {
|
|
|
170
170
|
return html`<li class="pager__item ${args.class || ''}">
|
|
171
171
|
${((this.currentPage == 1 && args.label == "Prev") || (this.currentPage == this.maxPages && args.label == "Next") ) ?
|
|
172
172
|
html` <button disabled style="cursor: default; color: ${this.darkmode ? '#cccccc' : '#999999'}; background: ${this.darkmode ? 'transparent' : 'white'};" href="${href}">${args.label || page}</button>`:
|
|
173
|
-
html` <a href="${href}" aria-label="${ifDefined(args.label === '...' ?
|
|
173
|
+
html` <a href="${href}" aria-label="${ifDefined(args.label === '...' ? `Page: ${page}` : undefined)}">${args.label || page}</a>`
|
|
174
174
|
}
|
|
175
175
|
</li>`;
|
|
176
176
|
}
|
|
@@ -38,6 +38,7 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
|
|
|
38
38
|
navTitle: {type: String, attribute: "nav-title"},
|
|
39
39
|
titleHref: {type: String, attribute: "title-href"},
|
|
40
40
|
titleClickEvent: {type: Boolean, attribute: 'title-click-event'},
|
|
41
|
+
navAriaLabel: {type: String, attribute: "nav-aria-label"},
|
|
41
42
|
navItems: {type: Array},
|
|
42
43
|
animationDuration: {type: Number, attribute: "animation-duration"}
|
|
43
44
|
};
|
|
@@ -56,6 +57,7 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
|
|
|
56
57
|
this.navTitle = "";
|
|
57
58
|
this.titleHref = "";
|
|
58
59
|
this.titleClickEvent = false;
|
|
60
|
+
this.navAriaLabel = "Sub navigation";
|
|
59
61
|
this.animationDuration = 300;
|
|
60
62
|
}
|
|
61
63
|
|
|
@@ -48,9 +48,8 @@ export function render() {
|
|
|
48
48
|
ul.sub-nav__menu ul {
|
|
49
49
|
transition: height ${this.animationDuration + "ms"};
|
|
50
50
|
}
|
|
51
|
-
|
|
52
51
|
</style>
|
|
53
|
-
<nav class="sub-nav">
|
|
52
|
+
<nav class="sub-nav" aria-label=${this.navAriaLabel}>
|
|
54
53
|
${this.navTitle ? html`
|
|
55
54
|
<h2 class="sub-nav__title${this.titleHref || this.titleClickEvent ? "-linked" : ""}">
|
|
56
55
|
${this.titleHref || this.titleClickEvent ? html`<a href=${ifDefined(this.titleHref ? this.titleHref : undefined)} @click=${() => this._dispatchTitleClick()}>${this.navTitle}</a>` : this.navTitle}
|
|
@@ -60,5 +59,4 @@ export function render() {
|
|
|
60
59
|
${this.navItems.map((item, i) => this._renderNavItem(item, [i]))}
|
|
61
60
|
</ul>
|
|
62
61
|
</nav>
|
|
63
|
-
|
|
64
62
|
`;}
|
package/package.json
CHANGED
|
@@ -15,6 +15,7 @@ import bookLogo from "./book.js";
|
|
|
15
15
|
* @property {String} siteName - Name of website to display
|
|
16
16
|
* @property {String} slogan - Optional text to display below site name
|
|
17
17
|
* @property {String} siteUrl - Url to use for links around site name and figure
|
|
18
|
+
* @property {String} navAriaLabel - Aria label for the navigation element
|
|
18
19
|
*
|
|
19
20
|
* @examples
|
|
20
21
|
* <ucdlib-branding-bar>
|
|
@@ -34,6 +35,7 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
|
|
|
34
35
|
siteName: {type: String, attribute: "site-name"},
|
|
35
36
|
slogan: {type: String},
|
|
36
37
|
siteUrl: {type: String, attribute: "site-url"},
|
|
38
|
+
navAriaLabel: {type: String, attribute: "nav-aria-label"},
|
|
37
39
|
navItems: {type: Array}
|
|
38
40
|
};
|
|
39
41
|
}
|
|
@@ -56,6 +58,7 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
|
|
|
56
58
|
this.siteName = "UC Davis Library";
|
|
57
59
|
this.slogan = "";
|
|
58
60
|
this.siteUrl = "/";
|
|
61
|
+
this.navAriaLabel = "Secondary navigation";
|
|
59
62
|
this.navItems = [];
|
|
60
63
|
}
|
|
61
64
|
|