BrightspaceUI · NicholasHallman · Apr 20, 2026 · May 8, 2026
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<link rel="stylesheet" href="/node_modules/@brightspace-ui/core/components/demo/styles.css" type="text/css">
+		<script type="module">
+			import '@brightspace-ui/core/components/demo/demo-page.js';
+			import '../../../src/components/grid/grid.js';
+		</script>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+	</head>
+	<body unresolved>
+		<d2l-demo-page page-title="Accessible Grid">
+			<h2>Static Grid — Z Layout</h2>
+			<d2l-demo-snippet>
+				<template>
+					<!--
+						Here D and C are reversed, but they are rendered and read in the correct order by screen readers
+					-->
+					<d2l-accessible-grid cols="3" label="Z-layout static grid" rows="2">
+						<d2l-accessible-grid-cell label="Cell A" x="0" y="0">
+							<strong>A</strong> (0,0)
+						</d2l-accessible-grid-cell>
+						<d2l-accessible-grid-cell label="Cell B — wide" width="2" x="1" y="0">
+							<strong>B</strong> (1,0) width=2
+						</d2l-accessible-grid-cell>
+						<d2l-accessible-grid-cell label="Cell D" x="1" y="1">
+							<strong>D</strong> (1,1)
+						</d2l-accessible-grid-cell>
+						<d2l-accessible-grid-cell label="Cell C" x="0" y="1">
+							<strong>C</strong> (0,1)
+						</d2l-accessible-grid-cell>
+						<d2l-accessible-grid-cell label="Cell E" x="2" y="1">
+							<strong>E</strong> (2,1)
+						</d2l-accessible-grid-cell>
+					</d2l-accessible-grid>
+				</template>
+			</d2l-demo-snippet>
+			<h2>Static Grid — N Layout</h2>
+			<d2l-demo-snippet>
+				<template>
+					<p><em>Static N-layout grid placeholder.</em></p>
+				</template>
+			</d2l-demo-snippet>
+			<h2>Editable Grid</h2>
+			<d2l-demo-snippet>
+				<template>
+					<p><em>Editable grid placeholder.</em></p>
+				</template>
+			</d2l-demo-snippet>
+			<h2>RTL Grid</h2>
+			<d2l-demo-snippet>
+				<template>
+					<p><em>RTL grid placeholder.</em></p>
+				</template>
+			</d2l-demo-snippet>
+			<h2>Collision Demo</h2>
+			<d2l-demo-snippet>
+				<template>
+					<p><em>Collision demo placeholder.</em></p>
+				</template>
+			</d2l-demo-snippet>
+
+		</d2l-demo-page>
+	</body>
+</html>
@@ -37,6 +37,7 @@ <h2 class="d2l-heading-2">Components</h2>
 			<li><a href="demo/components/community/index.html">Community</a></li>
 			<li><a href="demo/components/file-uploader/index.html">File Uploader</a></li>
 			<li><a href="demo/components/grade-result/index.html">Grade Result</a></li>
+			<li><a href="demo/components/grid/index.html">Grid</a></li>
 			<li><a href="demo/components/media-player/index.html">Media Player</a></li>
 			<li>
 				Navigation

@@ -0,0 +1,88 @@
+# @brightspace-ui/accessible-grid
+
+[![NPM version](https://img.shields.io/npm/v/@brightspace-ui/accessible-grid.svg)](https://www.npmjs.org/package/@brightspace-ui/accessible-grid)
+
+Scannable and Editable grids for Brightspace
+
+## Installation
+
+Install from NPM:
+
+```shell
+npm install @brightspace-ui/accessible-grid
+```
+
+## Usage
+
+```html
+<script type="module">
+    import '@brightspace-ui/accessible-grid/accessible-grid.js';
+</script>
+<d2l-accessible-grid>My element</d2l-accessible-grid>
+```
+
+**Properties:**
+
+| Property | Type | Description |
+|--|--|--|
+| | | |
+
+**Accessibility:**
+
+To make your usage of `d2l-accessible-grid` accessible, use the following properties when applicable:
+
+| Attribute | Description |
+|--|--|
+| | |
+
+## Developing and Contributing
+
+After cloning the repo, run `npm install` to install dependencies.
+
+### Testing
+
+To run the full suite of tests:
+
+```shell
+npm test
+```
+
+Alternatively, tests can be selectively run:
+
+```shell
+# eslint
+npm run lint:eslint
+
+# stylelint
+npm run lint:style
+
+# accessibility tests
+npm run test:axe
+
+# unit tests
+npm run test:unit
+```
+
+This repo uses [@brightspace-ui/testing](https://github.com/BrightspaceUI/testing)'s vdiff command to perform visual regression testing:
+
+```shell
+# vdiff
+npm run test:vdiff
+
+# re-generate goldens
+npm run test:vdiff golden
+```
+
+### Running the demos
+
+To start a [@web/dev-server](https://modern-web.dev/docs/dev-server/overview/) that hosts the demo page and tests:
+
+```shell
+npm start
+```
+
+### Versioning and Releasing
+
+This repo is configured to use `semantic-release`. Commits prefixed with `fix:` and `feat:` will trigger patch and minor releases when merged to `main`.
+
+To learn how to create major releases and release from maintenance branches, refer to the [semantic-release GitHub Action](https://github.com/BrightspaceUI/actions/tree/main/semantic-release) documentation.
@@ -0,0 +1,76 @@
+import { css, html, LitElement } from 'lit';
+import { LocalizeLabsElement } from '../../localize-labs-element.js';
+import { PropertyRequiredMixin } from '@brightspace-ui/core/mixins/property-required/property-required-mixin.js';
+/**
+ * Data-only model carrier for `d2l-accessible-grid`.
+ * This element exposes authored cell geometry/label and dispatches lifecycle
+ * events so the host can rebuild its rendered tree. It renders NO chrome,
+ * Aria and focus management live on the host-rendered role="gridcell" divs (see accessible-grid.js).
+ */
+class AccessibleGridCell extends LocalizeLabsElement(PropertyRequiredMixin(LitElement)) {
+
+	static get properties() {
+		return {
+			/** Optional stable identifier used for focus restoration and slot naming. */
+			cellKey: { type: String, attribute: 'cell-key', reflect: true },
+			/** Row span (default 1). */
+			height: { type: Number, reflect: true },
+			/** Accessible label for this cell (required -- announced at pickup). */
+			label: { type: String, required: true },
+			/** Column span (default 1). */
+			width: { type: Number, reflect: true },
+			/** Zero-based column anchor. */
+			x: { type: Number, reflect: true },
+			/** Zero-based row anchor. */
+			y: { type: Number, reflect: true },
+		};
+	}
+
+	static get styles() {
+		return css`:host { display: contents; }`;
+	}
+
+	constructor() {
+		super();
+		this.cellKey = undefined;
+		this.height = 1;
+		this.label = '';
+		this.width = 1;
+		this.x = 0;
+		this.y = 0;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.dispatchEvent(new CustomEvent('d2l-accessible-grid-cell-connected', {
+			bubbles: true,
+			composed: true,
+		}));
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.dispatchEvent(new CustomEvent('d2l-accessible-grid-cell-disconnected', {
+			bubbles: true,
+			composed: true,
+		}));
+	}
+
+	render() {
+		return html`<slot></slot>`;
+	}
+
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		const watched = ['x', 'y', 'width', 'height', 'label', 'cellKey'];
+		if (watched.some(p => changedProperties.has(p))) {
+			this.dispatchEvent(new CustomEvent('d2l-accessible-grid-cell-changed', {
+				bubbles: true,
+				composed: true,
+			}));
+		}
+	}
+
+}
+
+customElements.define('d2l-accessible-grid-cell', AccessibleGridCell);