From 024ad4acd0a49f10b263b3decd30c08f6c7df768 Mon Sep 17 00:00:00 2001 From: Danny Gleckler Date: Fri, 13 Sep 2024 02:31:45 -0400 Subject: [PATCH 1/3] Add d2l-order component --- components/order/demo/order-demo.js | 32 ++++++++ components/order/demo/order.html | 119 ++++++++++++++++++++++++++++ components/order/order-item.js | 17 ++++ components/order/order.js | 72 +++++++++++++++++ 4 files changed, 240 insertions(+) create mode 100644 components/order/demo/order-demo.js create mode 100644 components/order/demo/order.html create mode 100644 components/order/order-item.js create mode 100644 components/order/order.js diff --git a/components/order/demo/order-demo.js b/components/order/demo/order-demo.js new file mode 100644 index 00000000000..60d6f7b5091 --- /dev/null +++ b/components/order/demo/order-demo.js @@ -0,0 +1,32 @@ +import '../order.js'; +import '../../button/button.js'; +import { css, html, LitElement } from 'lit'; + +/** + * A container element that can order its contents separately for keyboard users, screenreader users, and visually + * @slot content - Slot for primary content + */ +class OrderDemo extends LitElement { + + static get properties() { + return { + num: { type: Number }, + visualOrder: { type: String, attribute: 'visual-order' }, + keyboardOrder: { type: String, attribute: 'keyboard-order' }, + extra: { type: Boolean } + } + } + + render() { + debugger; + return html` + ${Array(this.num).fill(0).map((item, idx) => { + return html`${idx + 1}` + })} + ${this.extra ? html`Extra Button` : null} + `; + } + +} + +customElements.define('d2l-order-demo', OrderDemo); diff --git a/components/order/demo/order.html b/components/order/demo/order.html new file mode 100644 index 00000000000..eb644b9b0c5 --- /dev/null +++ b/components/order/demo/order.html @@ -0,0 +1,119 @@ + + + + + + + + + + + + + +

Order - Real-World

+ + + + + + + +

Order - Visual

+ + + + + + + +

Order - Visual & Keyboard

+ + + + + + + +

Order - Non-Interactive

+ + + + + + + +

Order - Toggle Extra Button

+ + Toggle Extra Button + + + + + + + + + + + diff --git a/components/order/order-item.js b/components/order/order-item.js new file mode 100644 index 00000000000..a3d2af59e92 --- /dev/null +++ b/components/order/order-item.js @@ -0,0 +1,17 @@ +import { css, html, LitElement } from 'lit'; + +/** + * A container element that can order its contents separately for keyboard users, screenreader users, and visually + * @slot content - Slot for primary content + */ +class OrderItem extends LitElement { + + static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; + + render() { + return html``; + } + +} + +customElements.define('d2l-order-item', OrderItem); diff --git a/components/order/order.js b/components/order/order.js new file mode 100644 index 00000000000..307e3a918a2 --- /dev/null +++ b/components/order/order.js @@ -0,0 +1,72 @@ +import './order-item.js'; +import { css, html, LitElement } from 'lit'; +import { styleMap } from 'lit/directives/style-map.js'; + +/** + * A container element that can order its contents separately for keyboard users, screenreader users, and visually. + * @slot content - Slot for primary content + */ +class Order extends LitElement { + + static get properties() { + return { + /** + * Specifies the order in which elements should be navigable by keyboard. + * This should almost never be set, allowing keyboard order to match the visual order. + * @type {array} + * @default {visualOrder} + */ + keyboardOrder: { type: Array, attribute: 'keyboard-order' }, + /** + * Specifies the order in which elements should appear visually + * @type {array} + */ + visualOrder: { type: Array, attribute: 'visual-order' }, + }; + } + + static get styles() { + return css` + :host { + display: flex; + align-items: center; + } + `; + } + + constructor() { + super(); + this.visualOrder = Array(this.childElementCount).fill(0).map((_, idx) => idx + 1); + } + + render() { + return html` + ${[...this.children].map((child, idx) => { + + child.slot = `item-${idx + 1}`; + const styles = { order: this.visualOrder[idx] ?? idx }; + const tabindex = child.focus && (this.keyboardOrder?.[idx] ?? this.visualOrder[idx]); + + return html` + + + + `; + })} + + `; + } + + #handleSlotChangeAdd(e) { + if (e.target.assignedElements().length) this.requestUpdate(); + } + + #handleSlotChangeRemove(e) { + if (!e.target.assignedElements().length) this.requestUpdate(); + } + +} + +customElements.define('d2l-order', Order); From 06e5a1b72c2a57b3bba01acc04f6c9c596731ccb Mon Sep 17 00:00:00 2001 From: Danny Gleckler Date: Fri, 13 Sep 2024 09:03:11 -0400 Subject: [PATCH 2/3] Make visual order more intuitive --- components/order/demo/order-demo.js | 2 +- components/order/demo/order.html | 8 ++++---- components/order/order.js | 5 +++-- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/components/order/demo/order-demo.js b/components/order/demo/order-demo.js index 60d6f7b5091..bbcc2cbaade 100644 --- a/components/order/demo/order-demo.js +++ b/components/order/demo/order-demo.js @@ -19,7 +19,7 @@ class OrderDemo extends LitElement { render() { debugger; - return html` + return html` ${Array(this.num).fill(0).map((item, idx) => { return html`${idx + 1}` })} diff --git a/components/order/demo/order.html b/components/order/demo/order.html index eb644b9b0c5..f52542c469a 100644 --- a/components/order/demo/order.html +++ b/components/order/demo/order.html @@ -82,10 +82,10 @@

Order - Non-Interactive

One -

Two

- Three - Four -

Five

+ Two +

Three

+

Four

+ Five diff --git a/components/order/order.js b/components/order/order.js index 307e3a918a2..0cbf405d778 100644 --- a/components/order/order.js +++ b/components/order/order.js @@ -44,8 +44,9 @@ class Order extends LitElement { ${[...this.children].map((child, idx) => { child.slot = `item-${idx + 1}`; - const styles = { order: this.visualOrder[idx] ?? idx }; - const tabindex = child.focus && (this.keyboardOrder?.[idx] ?? this.visualOrder[idx]); + const orderIdx = this.visualOrder.indexOf(idx + 1) + 1; + const styles = { order: orderIdx || idx + 1 }; + const tabindex = child.focus && (this.keyboardOrder?.indexOf(idx + 1) + 1 || orderIdx); return html` Date: Fri, 13 Sep 2024 09:05:16 -0400 Subject: [PATCH 3/3] Cleanup --- components/order/demo/order-demo.js | 1 - components/order/demo/order.html | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/components/order/demo/order-demo.js b/components/order/demo/order-demo.js index bbcc2cbaade..23ef364322b 100644 --- a/components/order/demo/order-demo.js +++ b/components/order/demo/order-demo.js @@ -18,7 +18,6 @@ class OrderDemo extends LitElement { } render() { - debugger; return html` ${Array(this.num).fill(0).map((item, idx) => { return html`${idx + 1}` diff --git a/components/order/demo/order.html b/components/order/demo/order.html index f52542c469a..304baf1d023 100644 --- a/components/order/demo/order.html +++ b/components/order/demo/order.html @@ -27,7 +27,7 @@

Order - Real-World