Skip to content

Commit a48a5dc

Browse files
herberthobregonherberthobregon
committed
chore: Bump version to 1.3.1 and enhance accessibility features across various components
1 parent f4584c6 commit a48a5dc

45 files changed

Lines changed: 626 additions & 145 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@conectate/components",
3-
"version": "1.2.2",
3+
"version": "1.3.1",
44
"license": "BSD-3-Clause",
55
"type": "module",
66
"dependencies": {

‎src/ct-autocomplete-suggestions.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ var KEY_CODES = {
2626
@customElement("ct-autocomplete-suggestions")
2727
export class CtAutocompleteSuggestions extends CtLit {
2828
render() {
29+
const results = this.queryFn(this.source, this.text);
2930
return html`<style>
3031
.wrapper {
3132
position: absolute;
@@ -73,13 +74,13 @@ export class CtAutocompleteSuggestions extends CtLit {
7374
<div>
7475
<!-- unselectable is needed to fix an issue related to the focus being taken away when clicking in the
7576
results scrollbar -->
76-
<ct-card shadow class="wrapper" id="suggestionsWrapper">
77-
${this.queryFn(this.source, this.text).map((item, index) => html`<div @click=${this.onClickTemplate}>${this.renderItem(item, index)}</div>`)}
77+
<ct-card shadow class="wrapper" id="suggestionsWrapper" role="listbox" aria-label="Suggestions" ?hidden=${results.length === 0}>
78+
${results.map((item, index) => html`<div role="option" @click=${this.onClickTemplate}>${this.renderItem(item, index)}</div>`)}
7879
</ct-card>
7980
</div> `;
8081
}
8182

82-
@property({ type: Object }) renderItem = (item: any, index: number) => html`<button>item ${index}</button>`;
83+
@property({ type: Object }) renderItem = (_item: any, index: number) => html`<span>item ${index}</span>`;
8384
@property({ type: Array }) source: any[] = [];
8485
@property({ type: Array }) queryResult: any[] = [];
8586
@property({ type: String }) text = "";

‎src/ct-bottom-sheet.ts‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,8 @@ export class CtBottomSheet extends LitElement {
145145
border-top: 1px solid var(--bottom-sheet-border-color, #8181811c);
146146
}
147147
148-
label {
148+
label,
149+
h2 {
149150
white-space: var(--arc-font-nowrap-white-space);
150151
overflow: var(--arc-font-nowrap-overflow);
151152
text-overflow: var(--arc-font-nowrap-text-overflow);
@@ -162,6 +163,7 @@ export class CtBottomSheet extends LitElement {
162163
flex-direction: row;
163164
align-items: center;
164165
padding: 0 24px 12px;
166+
margin: 0;
165167
}
166168
167169
[hidden] {
@@ -201,19 +203,21 @@ export class CtBottomSheet extends LitElement {
201203
/**
202204
* Removes padding from the element styles
203205
*/
206+
@property({ type: String, reflect: true }) role = "dialog";
207+
@property({ type: String, reflect: true, attribute: "aria-modal" }) ariaModal = "true";
204208
@property({ type: Boolean, reflect: true }) noPadding = false;
205209
opened: boolean;
206210
sizingTarget!: HTMLElement;
207211
positionTarget!: HTMLElement;
208212

209213
render() {
210214
const { label } = this;
211-
return html`<div class="draggable"></div>
212-
${label ? html`<label>${label}</label>` : ""}
215+
return html`<div class="draggable" aria-hidden="true"></div>
216+
${label ? html`<h2 id="sheet-title">${label}</h2>` : ""}
213217
<div class="scrollable">
214218
<slot></slot>
215219
</div>
216-
<button @click=${this.close}>${this.closelabel}</button>`;
220+
<button type="button" @click=${this.close}>${this.closelabel}</button>`;
217221
}
218222

219223
open() {}
@@ -240,6 +244,7 @@ export class CtBottomSheet extends LitElement {
240244

241245
connectedCallback() {
242246
super.connectedCallback();
247+
this.setAttribute("aria-hidden", "true");
243248
this.addEventListener("transitionend", this.__onTransitionEnd);
244249
}
245250

@@ -250,6 +255,16 @@ export class CtBottomSheet extends LitElement {
250255

251256
firstUpdated() {
252257
this.sizingTarget = this.scrollTarget;
258+
this._syncSheetName();
259+
}
260+
261+
protected updated(): void {
262+
this._syncSheetName();
263+
}
264+
265+
private _syncSheetName() {
266+
const name = this.label.trim() || "Bottom sheet";
267+
if (this.getAttribute("aria-label") !== name) this.setAttribute("aria-label", name);
253268
}
254269

255270
_openedChanged(opened: boolean) {
@@ -258,15 +273,6 @@ export class CtBottomSheet extends LitElement {
258273
currentSheet.close();
259274
}
260275
currentSheet = this;
261-
this.dispatchEvent(
262-
new CustomEvent("iron-announce", {
263-
bubbles: true,
264-
composed: true,
265-
detail: {
266-
text: "Menu opened"
267-
}
268-
})
269-
);
270276
} else if (currentSheet === this) {
271277
currentSheet = null;
272278
}
@@ -278,6 +284,7 @@ export class CtBottomSheet extends LitElement {
278284
_renderOpened() {
279285
const node = this;
280286
node.classList.add("bottom-sheet-open");
287+
node.removeAttribute("aria-hidden");
281288
}
282289

283290
/**
@@ -286,6 +293,7 @@ export class CtBottomSheet extends LitElement {
286293
_renderClosed() {
287294
const node = this;
288295
node.classList.remove("bottom-sheet-open");
296+
node.setAttribute("aria-hidden", "true");
289297
}
290298

291299
/**

‎src/ct-button-menu.ts‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import "./ct-icon.js";
22

33
import { LitElement, PropertyValueMap, TemplateResult, css, html } from "lit";
44
import { customElement, property, query } from "lit/decorators.js";
5+
import { ifDefined } from "lit/directives/if-defined.js";
56

67
import { rovingIndex } from "./ct-button-helpers.js";
78
import { icon } from "./icon-list.js";
@@ -56,6 +57,11 @@ export class CtButtonMenu extends LitElement {
5657
/* <Icon> */
5758
.dropdown-trigger {
5859
transition: transform var(--in-speed) ease-in-out;
60+
font: inherit;
61+
color: inherit;
62+
background: none;
63+
border: none;
64+
padding: 0;
5965
}
6066
:host([rotate]) :focus-within > .dropdown-trigger {
6167
transform: rotate(180deg);
@@ -126,11 +132,10 @@ export class CtButtonMenu extends LitElement {
126132
@query(".gui-popup") popup!: HTMLSpanElement;
127133

128134
render() {
129-
return html` <span class="dropdown-trigger center">
130-
${this.dropDownTrigger ? this.dropDownTrigger : this.use_slot ? html`<slot name="dropdown"></slot><slot name="trigger"></slot>` : html`<ct-icon icon="${this.icon}"></ct-icon>`}
131-
</span>
132-
<!-- <ct-icon icon="expand_more"></ct-icon> -->
133-
<div class="gui-popup">
135+
return html` <button type="button" class="dropdown-trigger center" aria-haspopup="menu" aria-expanded="${this.open ? "true" : "false"}" aria-label="${ifDefined(!this.use_slot && !this.dropDownTrigger ? this.title : undefined)}">
136+
${this.dropDownTrigger ? this.dropDownTrigger : this.use_slot ? html`<slot name="dropdown"></slot><slot name="trigger"></slot>` : html`<ct-icon aria-hidden="true" icon="${this.icon}"></ct-icon>`}
137+
</button>
138+
<div class="gui-popup" role="menu">
134139
<slot></slot>
135140
</div>`;
136141
}

‎src/ct-button-split.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ export class CtButtonSplit extends LitElement {
4747
@property({ type: Boolean, reflect: true }) shadow = false;
4848
@property({ type: Boolean, reflect: true }) flat = false;
4949
@property({ type: Boolean, reflect: true }) light = false;
50+
@property({ type: String, reflect: true }) role = "group";
51+
@property({ type: String, reflect: true, attribute: "aria-label" }) ariaLabel = "";
5052

5153
render() {
5254
return html`<slot></slot>`;

‎src/ct-button.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -191,14 +191,13 @@ export class CtButton extends LitElement {
191191
];
192192
static formAssociated = true;
193193
private readonly internals = this.attachInternals();
194-
@query(".button") private readonly buttonElement!: HTMLElement | null;
194+
@query("button") private readonly buttonElement!: HTMLElement | null;
195195

196196
@property({ type: Boolean, reflect: true }) raised = false;
197197
@property({ type: Boolean, reflect: true }) shadow = false;
198198
@property({ type: Boolean, reflect: true }) flat = false;
199199
@property({ type: Boolean, reflect: true }) light = false;
200200

201-
@property({ type: String, reflect: true }) role = "button";
202201
@property({ type: String, reflect: true }) type: "button" | "submit" | "reset" = "button";
203202
@property({ type: Boolean, reflect: true }) disabled = false;
204203
@property({ type: Boolean, reflect: true }) gap = false;

‎src/ct-card-dialog.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ window.showCtCardDialog = showCtCardDialog;
2222

2323
/**
2424
* ## `ct-card-dialog`
25-
* A card-styled dialog component that presents content in a card format.
25+
* The content passed in `el` should include a heading. `ct-dialog` uses that heading as the dialog name.
2626
*
2727
* ### Usage
2828
* ```javascript

‎src/ct-card.ts‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,17 @@ export class CtCard extends LitElement {
103103
@property({ type: Boolean, reflect: true }) secondary = false;
104104
@property({ type: Boolean, reflect: true }) tertiary = false;
105105
@property({ type: Boolean, reflect: true }) error = false;
106+
@property({ type: String }) label = "";
107+
108+
protected updated(): void {
109+
if (this.label) {
110+
this.setAttribute("role", "region");
111+
this.setAttribute("aria-label", this.label);
112+
} else if (this.getAttribute("role") === "region") {
113+
this.removeAttribute("role");
114+
this.removeAttribute("aria-label");
115+
}
116+
}
106117

107118
static styles = [
108119
css`
@@ -173,7 +184,7 @@ export class CtCard extends LitElement {
173184

174185
render() {
175186
return html`
176-
${this.decorator ? html`<div class="dec"></div>` : ""}
187+
${this.decorator ? html`<div class="dec" aria-hidden="true"></div>` : ""}
177188
<slot></slot>
178189
`;
179190
}

‎src/ct-chartjs.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ export class CtChartJS extends LitElement {
1818
@property({ type: String }) type!: ChartType;
1919
@property({ type: Object }) data!: ChartData;
2020
@property({ type: Object }) options: ChartOptions = {};
21+
@property({ type: String }) label = "";
22+
private _busy = true;
2123
@property({ type: Number }) delay = 0;
2224
@property({ type: Boolean }) autopaint = false;
2325
@property({ type: Boolean }) autoadjust = false;
@@ -56,7 +58,7 @@ export class CtChartJS extends LitElement {
5658
</style>
5759
${this.sizeChart(this.x_, this.y_)}
5860
<div class="chart-size dev">
59-
<canvas id="canvas" height="${this.y_}" width="${this.x_}"></canvas>
61+
<canvas id="canvas" role="img" aria-label="${this.label || "Chart"}" aria-busy="${this._busy ? "true" : "false"}" height="${this.y_}" width="${this.x_}"></canvas>
6062
</div>
6163
`;
6264
}
@@ -78,6 +80,9 @@ export class CtChartJS extends LitElement {
7880
} else if (this.delay > 0) {
7981
await sleep(this.delay);
8082
this.init();
83+
} else {
84+
this._busy = false;
85+
this.requestUpdate();
8186
}
8287
}
8388

@@ -99,6 +104,8 @@ export class CtChartJS extends LitElement {
99104
data: data,
100105
options: { ...options }
101106
});
107+
this._busy = false;
108+
this.requestUpdate();
102109
window.addEventListener("resize", this.resize);
103110
}
104111

‎src/ct-checkbox.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import "./ct-icon.js";
22

33
import { PropertyValueMap } from "lit";
44
import { classMap } from "lit/directives/class-map.js";
5+
import { ifDefined } from "lit/directives/if-defined.js";
56

67
import { CtLit, css, customElement, html, property, query } from "./ct-lit.js";
78

@@ -198,10 +199,20 @@ export class CtCheckbox extends CtLit {
198199
*/
199200
render() {
200201
return html`
201-
<input id="input" type="checkbox" @click=${this.toogleCheck} .checked=${this.checked} .disabled=${this.disabled} @change=${this.handleChange} />
202+
<input
203+
id="input"
204+
type="checkbox"
205+
name=${ifDefined(this.name || undefined)}
206+
.value=${typeof this.value === "string" || typeof this.value === "number" ? String(this.value) : ""}
207+
.indeterminate=${this.indeterminate}
208+
@click=${this.toogleCheck}
209+
.checked=${this.checked}
210+
.disabled=${this.disabled}
211+
@change=${this.handleChange}
212+
/>
202213
<div class="c">
203214
<span id="box">
204-
<ct-icon id="checkmark" class=${classMap({ rotate: this.indeterminate == false && this.checked })} icon="${this.indeterminate ? "horizontal_rule" : `check`}" dir="ltr"></ct-icon>
215+
<ct-icon id="checkmark" aria-hidden="true" class=${classMap({ rotate: this.indeterminate == false && this.checked })} icon="${this.indeterminate ? "horizontal_rule" : `check`}" dir="ltr"></ct-icon>
205216
</span>
206217
<label id="label" for="input">${this.label}<slot></slot></label>
207218
</div>
@@ -213,6 +224,7 @@ export class CtCheckbox extends CtLit {
213224
* @param {PropertyValueMap<any> | Map<PropertyKey, unknown>} _changedProperties - Map of changed properties
214225
*/
215226
protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
227+
if (this.$input) this.$input.indeterminate = this.indeterminate;
216228
if (_changedProperties.has("checked") && _changedProperties.get("checked") != undefined) {
217229
this.change();
218230
}

0 commit comments

Comments
 (0)