@ulu/frontend 0.1.0-beta.73 → 0.1.0-beta.74

package/docs-dev/javascript/ui-modal-builder/index.html

@@ -5378,6 +5378,11 @@ in twig for example)</li>
 <td>Extra class/classes to add to title</td>
 </tr>
 <tr>
+<td>titleId</td>
+<td><code>string</code></td>
+<td>Set the title id (to tie to a custom title implementation, if using built in title this will be set automatically)</td>
+</tr>
+<tr>
 <td>nonModal</td>
 <td><code>boolean</code></td>
 <td>If <code>true</code>, the modal will not prevent interaction with elements behind it. Defaults to <code>false</code>.</td>

package/js/ui/modal-builder.js

@@ -10,6 +10,7 @@ import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
 import { Resizer } from "./resizer.js";
 import { baseAttribute, closeAttribute, defaults as dialogDefaults } from "./dialog.js";
 
+
 /**
  * Modal Builder Component Initializer
  */
@@ -27,6 +28,7 @@ export const initializer = new ComponentInitializer({
  * @property {string|null} title - The title of the modal. Defaults to `null`.
  * @property {string|null} titleIcon - The class name for an icon to display in the title. Defaults to `null`.
  * @property {string} titleClass - Extra class/classes to add to title
+ * @property {string} titleId - Set the title id (to tie to a custom title implementation, if using built in title this will be set automatically)
  * @property {boolean} nonModal - If `true`, the modal will not prevent interaction with elements behind it. Defaults to `false`.
  * @property {boolean} documentEnd - If `true`, the modal will be appended to the end of the `document.body`. Defaults to `true`.
  * @property {boolean} allowResize - If `true`, the modal will be resizable. Defaults to `false`.
@@ -56,6 +58,8 @@ export const defaults = {
   title: null,
   titleIcon: null,
   titleClass: "",
+  labelledby: null,
+  describedby: null,
   nonModal: false,
   documentEnd: true,
   allowResize: false,
@@ -85,7 +89,7 @@ export const defaults = {
    * @returns {String} Markup for modal
    */
   template(id, config) {
-    const { baseClass } = config;
+    const { baseClass, describedby } = config;
     const classes = [
       baseClass,
       `${ baseClass }--${ config.position }`,
@@ -97,11 +101,17 @@ export const defaults = {
       ...(config.noMinHeight ? [`${ baseClass }--no-min-height`] : [] ),
       ...(config.class ? [config.class] : []), 
     ];
+    const labelledby = config.title ? `${ id }--title` : config.labelledby;
     return `
-      <dialog id="${ id }" class="${ classes.join(" ") }">
+      <dialog 
+        id="${ id }" 
+        class="${ classes.join(" ") }" 
+        ${ labelledby ? `aria-labelledby="${ labelledby }"` : "" }
+        ${ describedby ? `aria-describedby="${ describedby }"` : "" }
+      >
         ${ config.title ? `
           <header class="${ baseClass }__header">
-            <h2 class="${ baseClass }__title ${ config.titleClass }">
+            <h2 id="${ labelledby }" class="${ baseClass }__title ${ config.titleClass }">
               ${ config.titleIcon ? 
                 `<span class="${ baseClass }__title-icon ${ config.titleIcon }" aria-hidden="true"></span>` : "" 
               }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.73",
+  "version": "0.1.0-beta.74",
   "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",

package/types/ui/modal-builder.d.ts

@@ -23,6 +23,8 @@ export namespace defaults {
     export let title: any;
     export let titleIcon: any;
     export let titleClass: string;
+    export let labelledby: any;
+    export let describedby: any;
     export let nonModal: boolean;
     export let documentEnd: boolean;
     export let allowResize: boolean;
@@ -67,6 +69,10 @@ export type DefaultModalOptions = {
      * - Extra class/classes to add to title
      */
     titleClass: string;
+    /**
+     * - Set the title id (to tie to a custom title implementation, if using built in title this will be set automatically)
+     */
+    titleId: string;
     /**
      * - If `true`, the modal will not prevent interaction with elements behind it. Defaults to `false`.
      */

package/types/ui/modal-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AAgIA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EAmDd;AA9LD;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;IAsDD,uDAGC;IACD,yDAGC;IACD;;;;;OAKG;IACH,0DAoCC;;;;;;;;;;;;WAhGW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;iBACP,OAAO;;;;cACP,QAAQ,GAAC,UAAU,GAAC,YAAY,GAAC,WAAW,GAAC,aAAa,GAAC,eAAe,GAAC,cAAc;;;;eACzF,OAAO;;;;gBACP,OAAO;;;;UACP,SAAS,GAAC,OAAO,GAAC,OAAO,GAAC,YAAY;;;;WACtC,OAAO;;;;iBACP,OAAO;;;;WACP,MAAM;;;;eACN,MAAM;;;;oBACN,MAAM;;;;sBACN,MAAM;;;;WACN,OAAO;;;;8BACE,MAAM,KAAG,MAAM;;;;mBACf,MAAM,KAAG,MAAM;;qCAvCD,oBAAoB"}
+{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AA0IA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAQC;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EAmDd;AAvMD;;GAEG;AACH,+CAGG;;;;;;;;;;;;;;;;;;;;;;IAyDD,uDAGC;IACD,yDAGC;IACD;;;;;OAKG;IACH,0DA0CC;;;;;;;;;;;;WAzGW,MAAM,GAAC,IAAI;;;;eACX,MAAM,GAAC,IAAI;;;;gBACX,MAAM;;;;aACN,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;iBACP,OAAO;;;;cACP,QAAQ,GAAC,UAAU,GAAC,YAAY,GAAC,WAAW,GAAC,aAAa,GAAC,eAAe,GAAC,cAAc;;;;eACzF,OAAO;;;;gBACP,OAAO;;;;UACP,SAAS,GAAC,OAAO,GAAC,OAAO,GAAC,YAAY;;;;WACtC,OAAO;;;;iBACP,OAAO;;;;WACP,MAAM;;;;eACN,MAAM;;;;oBACN,MAAM;;;;sBACN,MAAM;;;;WACN,OAAO;;;;8BACE,MAAM,KAAG,MAAM;;;;mBACf,MAAM,KAAG,MAAM;;qCAzCD,oBAAoB"}