Skip to content

Commit

Permalink
replace disabled with aria-disabled for better semantics
Browse files Browse the repository at this point in the history
  • Loading branch information
@sdumetz
sdumetz committed Dec 18, 2024
1 parent 866550f commit f245c98
Show file tree
Hide file tree
Showing 10 changed files with 23 additions and 28 deletions.
2 changes: 1 addition & 1 deletion source/client/ui/explorer/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1226,7 +1226,7 @@ $tour-entry-indent: 12px;
////////////////////////////////////////////////////////////////////////////////
// PROPERTIES
.sv-property{
&[disabled] {
&[disabled], &[aria-disabled="true"] {
filter: brightness(0.6);
}

Expand Down
4 changes: 2 additions & 2 deletions source/client/ui/properties/PropertyBase.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ export default class PropertyBase extends CustomElement
@property({ attribute: false })
language: CVLanguageManager = null;

@property({ type: Boolean, attribute: "aria-disabled"})
disabled = false;
@property({ attribute: "aria-disabled"})
ariaDisabled:"true"|"false"|null;

protected firstConnected()
{
Expand Down
2 changes: 1 addition & 1 deletion source/client/ui/properties/PropertyBoolean.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default class PropertyBoolean extends PropertyBase
Array.isArray(text) ? text[0] : (text || "Off");

return html`<label id="${labelName}-label" class="ff-label ff-off">${name}</label>
<div title="${name}"><ff-button role="switch" aria-labelledby="${labelName}-label" aria-checked=${property.value} .text=${language ? language.getLocalizedString(label) : label} ?disabled=${this.disabled} ?selected=${property.value} @click=${this.onButtonClick}></ff-button></div>`;
<div title="${name}"><ff-button role="switch" aria-labelledby="${labelName}-label" aria-checked=${property.value} .text=${language ? language.getLocalizedString(label) : label} ?disabled=${this.ariaDisabled === "true"} ?selected=${property.value} @click=${this.onButtonClick}></ff-button></div>`;
}

protected onButtonClick(event: IButtonClickEvent)
Expand Down
2 changes: 1 addition & 1 deletion source/client/ui/properties/PropertyColor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export default class PropertyColor extends PropertyBase

return html`<label class="ff-label ff-off">${name}</label>
<span class="sv-property-field">
${this.compact?null:html`<input ?disabled=${this.disabled} class="ff-input"
${this.compact?null:html`<input ?disabled=${this.ariaDisabled === "true"} class="ff-input"
type="text"
.value=${color}
@change=${(ev)=>{
Expand Down
2 changes: 1 addition & 1 deletion source/client/ui/properties/PropertyEvent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export default class PropertyEvent extends PropertyBase

return html`<label id="${name}-label" class="ff-label ff-off">${name}</label>
<div class="sv-options >
<ff-button ?disabled=${this.disabled} aria-labelledby="${name}-label" icon="zoom" .text=${text} @click=${this.onButtonClick}></ff-button>
<ff-button ?disabled=${this.ariaDisabled === "true"} aria-labelledby="${name}-label" icon="zoom" .text=${text} @click=${this.onButtonClick}></ff-button>
</div>`;
}

Expand Down
11 changes: 5 additions & 6 deletions source/client/ui/properties/PropertyNumber.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,8 @@
*/

import Property from "@ff/graph/Property";
import CustomElement, { customElement, property, PropertyValues, html } from "@ff/ui/CustomElement";
import { customElement, property, PropertyValues, html } from "@ff/ui/CustomElement";

import "@ff/ui/Button";
import PropertyField from "@ff/scene/ui/PropertyField";
import PropertyBase from "./PropertyBase";

Expand Down Expand Up @@ -50,7 +49,7 @@ export default class PropertyNumber extends PropertyBase
}

protected disconnected(): void {
if(!this.disabled){
if(this.ariaDisabled !== "true"){
this.removeEventListener("pointerdown", this.onPointerDown);
this.removeEventListener("pointerup", this.onPointerUp);
this.removeEventListener("pointercancel", this.onPointerUp);
Expand All @@ -71,8 +70,8 @@ export default class PropertyNumber extends PropertyBase
}
}

if(changedProperties.has("disabled")){
if(this.disabled){
if(changedProperties.has("ariaDisabled")){
if(this.ariaDisabled === "true"){
this.removeEventListener("pointerdown", this.onPointerDown);
this.removeEventListener("pointerup", this.onPointerUp);
this.removeEventListener("pointercancel", this.onPointerUp);
Expand Down Expand Up @@ -103,7 +102,7 @@ export default class PropertyNumber extends PropertyBase
<label class="ff-label ff-off">${name}</label>
<div class="sv-property-field">
${bounded? html`<span class="ff-off ff-bar" style="width:${ 100*(value - min) / (max - min)}%;"></span>`:null}
<input ?disabled=${this.disabled} class="ff-input"
<input ?disabled=${this.ariaDisabled === "true"} class="ff-input"
type="text"
pattern="[+\\-]?([0-9.]+|inf)${schema.percent ? "%?" : ""}"
step=${schema.step ?? ""}
Expand Down
6 changes: 3 additions & 3 deletions source/client/ui/properties/PropertyOptions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@
import {live} from "lit-html/directives/live";

import Property from "@ff/graph/Property";
import CustomElement, { customElement, property, PropertyValues, html } from "@ff/ui/CustomElement";
import { customElement, property, PropertyValues, html } from "@ff/ui/CustomElement";

import "@ff/ui/Button";
import { IButtonClickEvent } from "@ff/ui/Button";
import CVLanguageManager from "client/components/CVLanguageManager";

import PropertyBase from "./PropertyBase";

////////////////////////////////////////////////////////////////////////////////
Expand Down Expand Up @@ -99,7 +99,7 @@ export default class PropertyOptions extends PropertyBase

return html`
<label class="ff-label ff-off">${name}</label>
<select ?disabled=${this.disabled} ?multiple=${property.isMulti()} .value=${live(value)} class="sv-property-field" @change=${(e)=>{
<select ?disabled=${this.ariaDisabled === "true"} ?multiple=${property.isMulti()} .value=${live(value)} class="sv-property-field" @change=${(e)=>{
this.property.setValue(parseInt(e.target.value))
}}>
${optionsList}
Expand Down
2 changes: 1 addition & 1 deletion source/client/ui/properties/PropertySlider.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export default class PropertySlider extends PropertyBase
const v = (value - min) / (max - min);

return html`<label id="${name}-label" class="ff-label ff-off">${name}</label>
<ff-linear-slider class="${this.disabled? "ff-off":"ff-on"}" aria-labelledby="${name}-label" aria-valuemin=${min.toString()} aria-valuemax=${max.toString()} aria-valuenow=${value.toFixed(3)} role="slider" .value=${v} @keydown=${this.onKeyDown} @change=${this.onSliderChange}></ff-linear-slider>`;
<ff-linear-slider class="${(this.ariaDisabled==="true")? "ff-off":"ff-on"}" aria-labelledby="${name}-label" aria-valuemin=${min.toString()} aria-valuemax=${max.toString()} aria-valuenow=${value.toFixed(3)} role="slider" .value=${v} @keydown=${this.onKeyDown} @change=${this.onSliderChange}></ff-linear-slider>`;
}

protected onSliderChange(event: ILinearSliderChangeEvent)
Expand Down
6 changes: 1 addition & 5 deletions source/client/ui/properties/PropertyString.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
import Property from "@ff/graph/Property";
import CustomElement, { customElement, property, PropertyValues, html } from "@ff/ui/CustomElement";

import "@ff/ui/Button";
import PropertyBase from "./PropertyBase";

////////////////////////////////////////////////////////////////////////////////
Expand All @@ -33,9 +32,6 @@ export default class PropertyString extends PropertyBase
@property({ type: String })
name = "";

@property({ type: Boolean })
disabled = false;

protected firstConnected()
{
super.firstConnected();
Expand Down Expand Up @@ -77,7 +73,7 @@ export default class PropertyString extends PropertyBase
const text = property.value;

return html`${name? html`<label class="ff-label ff-off">${name}</label>`:null}
<input ?disabled=${this.disabled} type="text" class="sv-property-field ff-input"
<input ?disabled=${this.ariaDisabled === "true"} type="text" class="sv-property-field ff-input"
.value=${text}
@change=${this.onChange}
@focus=${(e)=>{ e.target.select();}}}
Expand Down
14 changes: 7 additions & 7 deletions source/client/ui/story/PropertyView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,27 +78,27 @@ export default class PropertyView extends CustomElement
return null;
}
if(property.type === "number" && property.schema.semantic === "color"){
return html`<sv-property-color ?disabled=${disabled} name=${label} .property=${property}></sv-property-color>`;
return html`<sv-property-color ?aria-disabled=${disabled} name=${label} .property=${property}></sv-property-color>`;
}else if (property.type === "number" && property.isArray()) {
let fields = [];
for (let i = 0; i < property.elementCount; ++i) {

let index_disabled = disabled || this.property.hasInLinks(i);
const fieldLabel = property.schema.labels?.[i] ?? _defaultLabels[i];
fields.push(html`<sv-property-number ?disabled=${index_disabled} name=${fieldLabel} .index=${i} .property=${property}></sv-property-number>`);
fields.push(html`<sv-property-number aria-disabled=${index_disabled} name=${fieldLabel} .index=${i} .property=${property}></sv-property-number>`);
}
const headerElement = label ? html`<div class="sv-property-name">${label}</div>` : null;
return html`${headerElement}<div class="sv-property-group">${fields}</div>`;
}else if (schema.event) {
return html`<sv-property-event ?disabled=${disabled} name=${label} .property=${property}></sv-property-event>`;
return html`<sv-property-event aria-disabled=${disabled} name=${label} .property=${property}></sv-property-event>`;
}else if (schema.options) {
return html`<sv-property-options ?disabled=${disabled} dropdown name=${label} .property=${property}></sv-property-options>`;
return html`<sv-property-options aria-disabled=${disabled} dropdown name=${label} .property=${property}></sv-property-options>`;
}else if(property.type === "boolean"){
return html`<sv-property-boolean ?disabled=${disabled} name=${label} .property=${property}></sv-property-boolean>`;
return html`<sv-property-boolean aria-disabled=${disabled} name=${label} .property=${property}></sv-property-boolean>`;
}else if(property.type === "string"){
return html`<sv-property-string ?disabled=${disabled} name=${label} .property=${property}></sv-property-string>`
return html`<sv-property-string aria-disabled=${disabled} name=${label} .property=${property}></sv-property-string>`
}else if(property.type === "number"){
return html`<sv-property-number ?disabled=${disabled} name=${label} .property=${property}></sv-property-number>`
return html`<sv-property-number aria-disabled=${disabled} name=${label} .property=${property}></sv-property-number>`
}else{
console.warn("Unhandled property :", property.name);
return html`<div class="sv-property-name">${label}</div><div class="sv-property-group">${property.value} (not editable)</div>`;
Expand Down

0 comments on commit f245c98

Please sign in to comment.