@ucd-lib/theme-elements 3.1.2 → 3.1.3

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.
Files changed (6) hide show
  1. package/brand/ucd-theme-list-accordion/ucd-theme-list-accordion.js +0 -1
  2. package/brand/ucd-theme-list-accordion/ucd-theme-list-accordion.tpl.js +25 -26
  3. package/brand/ucd-theme-pagination/ucd-theme-pagination.tpl.js +26 -10
  4. package/brand/ucd-theme-slim-select/ucd-theme-slim-select.js +12 -4
  5. package/package.json +1 -1
  6. package/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.tpl.js +1 -1
package/brand/ucd-theme-list-accordion/ucd-theme-list-accordion.js CHANGED
@@ -40,7 +40,6 @@ export default class UcdThemeListAccordion extends LitElement {
40
40
  this._availableStyles = ['accordion', 'faq'];
41
41
  this.listStyle = this._availableStyles[0];
42
42
  this._expandedItems = new Set();
43
- this.role = 'list';
44
43
  }
45
44
 
46
45
  static get styles() {
package/brand/ucd-theme-list-accordion/ucd-theme-list-accordion.tpl.js CHANGED
@@ -25,30 +25,29 @@ export function styles() {
25
25
 
26
26
  export function render() {
27
27
  return html`
28
- <ul class="list--${this.listStyle}">
29
- ${this._listItems.map((item, index) => html`
30
- ${this._isTitle(index) ? html`
31
- <li
32
- id="accordion-${index}"
33
- class="item-title ${this.itemIsExpanded(index, false) ? 'active' : ''}"
34
- item-index="${index}"
35
- tabindex="0"
36
- @click=${this._onTitleClick}
37
- @keyup=${this._onTitleKeyUp}
38
- aria-controls="accordion-${index}-panel"
39
- aria-expanded="${this.itemIsExpanded(index, false)}">
40
- <slot name="${item.slotName}"></slot>
41
- </li>
42
- ` : html`
43
- <li
44
- id="accordion-${index}-panel"
45
- class="item-content"
46
- role="region"
47
- aria-labelledby="accordion-${index}"
48
- ?hidden="${!this.itemIsExpanded(index, false)}">
49
- <slot name="${item.slotName}"></slot>
50
- </li>
51
- `}
52
- `) }
53
- </ul>
28
+ <ul class="list--${this.listStyle}">
29
+ ${this._listItems.map((item, index) => html`
30
+ ${this._isTitle(index) ? html`
31
+ <li
32
+ id="accordion-${index}"
33
+ class="item-title ${this.itemIsExpanded(index, false) ? 'active' : ''}"
34
+ item-index="${index}"
35
+ tabindex="0"
36
+ @click=${this._onTitleClick}
37
+ @keyup=${this._onTitleKeyUp}
38
+ aria-controls="accordion-${index}-panel"
39
+ aria-expanded="${this.itemIsExpanded(index, false)}">
40
+ <slot name="${item.slotName}"></slot>
41
+ </li>
42
+ ` : html`
43
+ <li
44
+ id="accordion-${index}-panel"
45
+ class="item-content"
46
+ aria-labelledby="accordion-${index}"
47
+ ?hidden="${!this.itemIsExpanded(index, false)}">
48
+ <slot name="${item.slotName}"></slot>
49
+ </li>
50
+ `}
51
+ `) }
52
+ </ul>
54
53
  `;}
package/brand/ucd-theme-pagination/ucd-theme-pagination.tpl.js CHANGED
@@ -73,35 +73,51 @@ return html`
73
73
  <ul class="pager">
74
74
  ${this.xs_screen ?
75
75
  html`
76
- <div class="xs-screen${this.darkmode ? ' darkmode' : ''}">
76
+ <li class="xs-screen${this.darkmode ? ' darkmode' : ''}">
77
+ <ul class="pager">
77
78
  ${this._renderLink(
78
79
  this.currentPage-1,
79
80
  {label: 'Prev', class: 'pager__item--previous', noHighlight: false}
80
81
  )}
82
+ </ul>
81
83
 
84
+ <ul class="pager">
82
85
  ${this._renderLink(this.currentPage)}
83
- <span>of ${this.maxPages}</span>
86
+ </ul class="pager">
87
+
88
+ <span>of ${this.maxPages}</span>
89
+
90
+ <ul class="pager">
84
91
  ${this._renderLink(
85
92
  this.currentPage+1,
86
93
  {label: 'Next', class: 'pager__item--next', noHighlight: false}
87
94
  )}
88
- </div>
95
+ </ul>
89
96
 
90
- <div class="default${this.darkmode ? ' darkmode' : ''}">
91
- ${this._renderLink(
92
- this.currentPage-1,
93
- {label: 'Prev', class: 'pager__item--previous', noHighlight: false}
94
- )}
97
+ </li>
98
+
99
+ <li class="default${this.darkmode ? ' darkmode' : ''}">
100
+ <ul class="pager">
101
+ ${this._renderLink(
102
+ this.currentPage-1,
103
+ {label: 'Prev', class: 'pager__item--previous', noHighlight: false}
104
+ )}
105
+ </ul>
95
106
 
96
- ${this._pages.map(page => this._renderLink(page))}
107
+ <ul class="pager">
108
+ ${this._pages.map(page => this._renderLink(page))}
109
+ </ul>
97
110
 
111
+ <ul class="pager">
98
112
  ${this._renderLink(
99
113
  this.currentPage+1,
100
114
  {label: 'Next', class: 'pager__item--next', noHighlight: false}
101
115
  )}
102
- </div>
116
+ </ul>
117
+ </li>
103
118
  `
104
119
  :html`
120
+
105
121
  ${this._renderLink(
106
122
  this.currentPage-1,
107
123
  {label: 'Prev', class: 'pager__item--previous', noHighlight: false}
package/brand/ucd-theme-slim-select/ucd-theme-slim-select.js CHANGED
@@ -8,7 +8,7 @@ import { MutationObserverController } from '../../utils/controllers';
8
8
  /**
9
9
  * @class UcdThemeSlimSelect
10
10
  * @classdesc UI component class for displaying a fancy select. This is a wrapper element around the 'slim-select' package.
11
- *
11
+ *
12
12
  * Patternlab URL:
13
13
  * - http://dev.webstyleguide.ucdavis.edu/redesign/?p=atoms-select-menu
14
14
  */
@@ -16,7 +16,7 @@ export default class UcdThemeSlimSelect extends LitElement {
16
16
 
17
17
  static get properties() {
18
18
  return {
19
-
19
+ listboxAriaLabel: {type: String, attribute: "listbox-aria-label"},
20
20
  };
21
21
  }
22
22
 
@@ -28,7 +28,7 @@ export default class UcdThemeSlimSelect extends LitElement {
28
28
  super();
29
29
  this.render = render.bind(this);
30
30
  this.mutationObserver = new MutationObserverController(
31
- this,
31
+ this,
32
32
  {subtree: true, childList: true, attributes: true, characterData: true},
33
33
  "_onLightDomMutation"
34
34
  );
@@ -43,6 +43,7 @@ export default class UcdThemeSlimSelect extends LitElement {
43
43
  const children = Array.from(this.children);
44
44
  if (children.length == 0 || children[0].tagName != "SELECT") return;
45
45
  const select = children[0].cloneNode(true);
46
+
46
47
  if ( this.slimSelect ){
47
48
  this.slimSelect.destroy();
48
49
  this.renderRoot.querySelector('.ss-main').remove();
@@ -50,13 +51,20 @@ export default class UcdThemeSlimSelect extends LitElement {
50
51
  }
51
52
  this.renderRoot.appendChild(select);
52
53
 
54
+ const label = this.listboxAriaLabel || 'Dropdown List';
55
+
53
56
  this.slimSelect = new SlimSelect({
54
57
  select: select,
55
58
  onChange: (info) => this.dispatchEvent(new CustomEvent("change", {detail: info}))
56
59
  });
57
60
 
61
+ const slimSelectList = this.renderRoot.querySelector('.ss-list');
62
+ if (slimSelectList) {
63
+ slimSelectList.setAttribute('aria-label', label);
64
+ }
65
+
58
66
  }
59
67
 
60
68
  }
61
69
 
62
- customElements.define('ucd-theme-slim-select', UcdThemeSlimSelect);
70
+ customElements.define('ucd-theme-slim-select', UcdThemeSlimSelect);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ucd-lib/theme-elements",
3
- "version": "3.1.2",
3
+ "version": "3.1.3",
4
4
  "description": "Custom elements for the UCD brand theme",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.tpl.js CHANGED
@@ -83,7 +83,7 @@ return html`
83
83
  <div class="container figure--${this.figure}">
84
84
  <div class="site-branding">
85
85
  <div class="site-branding__figure">
86
- <a href="${this.siteUrl}" class="">${this._renderFigure()}</a>
86
+ <a href="${this.siteUrl}" aria-label="site-branding-figure" class="">${this._renderFigure()}</a>
87
87
  </div>
88
88
  <div class="site-branding__body">
89
89
  <h1 class="site-branding__site-name" ?hidden=${!this.siteName}>