@progress/kendo-themes-html 14.7.1-dev.7 → 14.9.0-dev.0

package/dist/meta/appbar.json

@@ -21,7 +21,12 @@
       ],
       "states": [],
       "aria": [],
-      "keyboard": [],
+      "keyboard": [
+        {
+          "trigger": "Tab",
+          "behavior": "Moves focus through the inner elements; the AppBar itself has no keyboard navigation."
+        }
+      ],
       "ux": [
         {
           "trigger": "Application header",

package/dist/meta/card.json

@@ -13,8 +13,38 @@
         "selected",
         "disabled"
       ],
-      "aria": [],
-      "keyboard": [],
+      "aria": [
+        {
+          "prop": null,
+          "attribute": "role=\"listitem\"",
+          "description": "Required when the card is located in a `.k-card-list`."
+        },
+        {
+          "prop": null,
+          "attribute": "tabindex=\"0\"",
+          "description": "The card is focusable when navigatable; inner elements are not focusable until Enter is pressed."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-describedby=\".k-card-title id\"",
+          "description": "Associates the card with its title element."
+        },
+        {
+          "prop": null,
+          "attribute": "aria-keyshortcuts=\"Enter\"",
+          "description": "Announces the Enter key that enables navigation inside the card."
+        }
+      ],
+      "keyboard": [
+        {
+          "trigger": "Enter",
+          "behavior": "Enables navigation inside a navigatable card."
+        },
+        {
+          "trigger": "Tab",
+          "behavior": "Moves focus through the elements inside the card, following their own keyboard navigation sequence."
+        }
+      ],
       "ux": [
         {
           "trigger": "Content container",

package/dist/meta/index.json

@@ -282,7 +282,12 @@
         ],
         "states": [],
         "aria": [],
-        "keyboard": [],
+        "keyboard": [
+          {
+            "trigger": "Tab",
+            "behavior": "Moves focus through the inner elements; the AppBar itself has no keyboard navigation."
+          }
+        ],
         "ux": [
           {
             "trigger": "Application header",
@@ -1310,8 +1315,38 @@
           "selected",
           "disabled"
         ],
-        "aria": [],
-        "keyboard": [],
+        "aria": [
+          {
+            "prop": null,
+            "attribute": "role=\"listitem\"",
+            "description": "Required when the card is located in a `.k-card-list`."
+          },
+          {
+            "prop": null,
+            "attribute": "tabindex=\"0\"",
+            "description": "The card is focusable when navigatable; inner elements are not focusable until Enter is pressed."
+          },
+          {
+            "prop": null,
+            "attribute": "aria-describedby=\".k-card-title id\"",
+            "description": "Associates the card with its title element."
+          },
+          {
+            "prop": null,
+            "attribute": "aria-keyshortcuts=\"Enter\"",
+            "description": "Announces the Enter key that enables navigation inside the card."
+          }
+        ],
+        "keyboard": [
+          {
+            "trigger": "Enter",
+            "behavior": "Enables navigation inside a navigatable card."
+          },
+          {
+            "trigger": "Tab",
+            "behavior": "Moves focus through the elements inside the card, following their own keyboard navigation sequence."
+          }
+        ],
         "ux": [
           {
             "trigger": "Content container",
@@ -10848,6 +10883,19 @@
         "keyboard": [],
         "ux": []
       },
+      {
+        "name": "SchedulerCell",
+        "isPrimary": true,
+        "rootClass": "k-scheduler-cell",
+        "options": [],
+        "states": [
+          "selected",
+          "readonly"
+        ],
+        "aria": [],
+        "keyboard": [],
+        "ux": []
+      },
       {
         "name": "SchedulerContent",
         "isPrimary": true,

package/dist/meta/scheduler.json

@@ -265,6 +265,19 @@
       "keyboard": [],
       "ux": []
     },
+    {
+      "name": "SchedulerCell",
+      "isPrimary": true,
+      "rootClass": "k-scheduler-cell",
+      "options": [],
+      "states": [
+        "selected",
+        "readonly"
+      ],
+      "aria": [],
+      "keyboard": [],
+      "ux": []
+    },
     {
       "name": "SchedulerContent",
       "isPrimary": true,

package/dist/types/appbar/appbar.spec.d.ts

@@ -16,4 +16,7 @@ export type KendoAppbarProps = KendoAppbarOptions & {
  * @ux {Sections} Divided into start, center, and end sections for flexible content placement.
  */
 export declare const Appbar: KendoComponent<KendoAppbarProps & React.HTMLAttributes<HTMLDivElement>>;
+/**
+ * @keyboard {Tab} Moves focus through the inner elements; the AppBar itself has no keyboard navigation.
+ */
 export default Appbar;

package/dist/types/card/card.spec.d.ts

@@ -13,7 +13,15 @@ export type KendoCardState = {
  * @ux {Content container} Groups related content in a visually elevated surface.
  * @ux {Header and footer} Optional header and footer sections hold titles and actions.
  * @ux {Media} Supports an image or other media element at the top of the card.
+ * @aria {role="listitem"} Required when the card is located in a `.k-card-list`.
+ * @aria {tabindex="0"} The card is focusable when navigatable; inner elements are not focusable until Enter is pressed.
+ * @aria {aria-describedby=".k-card-title id"} Associates the card with its title element.
+ * @aria {aria-keyshortcuts="Enter"} Announces the Enter key that enables navigation inside the card.
  * @ux {Actions} Optional action buttons are placed in the card body or footer.
  */
 export declare const Card: KendoComponent<KendoCardProps & KendoCardState & React.HTMLAttributes<HTMLDivElement>>;
+/**
+ * @keyboard {Enter} Enables navigation inside a navigatable card.
+ * @keyboard {Tab} Moves focus through the elements inside the card, following their own keyboard navigation sequence.
+ */
 export default Card;

package/dist/types/scheduler/scheduler-cell.spec.d.ts

@@ -7,6 +7,9 @@ export type KendoSchedulerCellProps = {
     dayText?: string;
     colspan?: number;
     rowspan?: number;
+    selected?: boolean;
+    readonly?: boolean;
+    nonwork?: boolean;
 };
 export declare const SchedulerCell: KendoComponent<KendoSchedulerCellProps & ((React.AllHTMLAttributes<HTMLDivElement> & {
     as: 'div';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "14.7.1-dev.7",
+  "version": "14.9.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [

package/src/appbar/appbar.spec.tsx

@@ -68,4 +68,8 @@ Appbar.className = APPBAR_CLASSNAME;
 Appbar.defaultOptions = defaultOptions;
 Appbar.moduleName = APPBAR_MODULE_NAME;
 Appbar.folderName = APPBAR_FOLDER_NAME;
+/**
+ * @keyboard {Tab} Moves focus through the inner elements; the AppBar itself has no keyboard navigation.
+ */
+
 export default Appbar;

package/src/card/card.spec.tsx

@@ -29,6 +29,10 @@ export type KendoCardState = { [K in (typeof states)[number]]?: boolean };
  * @ux {Content container} Groups related content in a visually elevated surface.
  * @ux {Header and footer} Optional header and footer sections hold titles and actions.
  * @ux {Media} Supports an image or other media element at the top of the card.
+ * @aria {role="listitem"} Required when the card is located in a `.k-card-list`.
+ * @aria {tabindex="0"} The card is focusable when navigatable; inner elements are not focusable until Enter is pressed.
+ * @aria {aria-describedby=".k-card-title id"} Associates the card with its title element.
+ * @aria {aria-keyshortcuts="Enter"} Announces the Enter key that enables navigation inside the card.
  * @ux {Actions} Optional action buttons are placed in the card body or footer.
  */
 export const Card: KendoComponent<KendoCardProps & KendoCardState & React.HTMLAttributes<HTMLDivElement>> = (
@@ -79,4 +83,9 @@ Card.defaultOptions = defaultOptions;
 Card.moduleName = CARD_MODULE_NAME;
 Card.folderName = CARD_FOLDER_NAME;
 
+/**
+ * @keyboard {Enter} Enables navigation inside a navigatable card.
+ * @keyboard {Tab} Moves focus through the elements inside the card, following their own keyboard navigation sequence.
+ */
+
 export default Card;

package/src/scheduler/scheduler-cell.spec.tsx

@@ -1,10 +1,10 @@
-import { classNames } from '../misc';
+import { classNames, States, stateClassNames } from '../misc';
 
 import { KendoComponent } from '../_types/component';
 import { SCHEDULER_FOLDER_NAME, SCHEDULER_MODULE_NAME } from './constants';
 const className = 'k-scheduler-cell';
 
-const states = [];
+const states = [States.selected, States.readonly];
 
 const options = {};
 
@@ -18,6 +18,9 @@ export type KendoSchedulerCellProps = {
     dayText?: string;
     colspan?: number;
     rowspan?: number;
+    selected?: boolean;
+    readonly?: boolean;
+    nonwork?: boolean;
 }
 
 export const SchedulerCell: KendoComponent<KendoSchedulerCellProps & ( | ( React.AllHTMLAttributes<HTMLDivElement> & { as: 'div' } ) | ( React.HTMLAttributes<HTMLTableCellElement> & { as: 'th' |'td' } ) )> = (
@@ -34,6 +37,9 @@ export const SchedulerCell: KendoComponent<KendoSchedulerCellProps & ( | ( React
         dayText,
         colspan,
         rowspan,
+        selected,
+        readonly,
+        nonwork,
         as: Component = 'div',
         ...other
     } = props;
@@ -51,9 +57,14 @@ export const SchedulerCell: KendoComponent<KendoSchedulerCellProps & ( | ( React
             className={classNames(
                 className,
                 props.className,
+                stateClassNames(className, {
+                    selected,
+                    readonly,
+                }),
                 {
                     'k-scheduler-times-all-day': allDay,
                     'k-today': today,
+                    'k-nonwork-hour': nonwork,
                 },
                 cellType?.map((t) => ({
                     [`k-${t}-cell`]: true,

package/src/scheduler/tests/scheduler-cell-states.tsx

@@ -0,0 +1,132 @@
+import { Fragment } from "react";
+import { SchedulerBody, SchedulerCell, SchedulerContent, SchedulerHead, SchedulerHeader, SchedulerTable, SchedulerTimes, SchedulerWeek } from "..";
+
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
+
+const days = [
+  { day: "Mon", date: "2" },
+  { day: "Tue", date: "3" },
+  { day: "Wed", date: "4", today: true },
+  { day: "Thu", date: "5" },
+  { day: "Fri", date: "6" },
+  { day: "Sat", date: "7", nonwork: true },
+  { day: "Sun", date: "8", nonwork: true },
+];
+
+const hours = ["8:00 AM", "9:00 AM", "10:00 AM", "11:00 AM"];
+
+// Rows are half-hour slots; the 10:00 AM slot is read-only on all days (non-work + readonly on the weekend)
+const isReadonly = (row: number) => row === 4;
+
+// The slot below the read-only one is selected on all days
+const isSelectedRow = (row: number) => row === 5;
+
+// State names on the first cell of the non-work column and of the read-only and selected rows, keyed by "row-day"
+const labels: Record<string, string> = {
+  "0-Sat": "non-work",
+  "0-Sun": "non-work",
+  "4-Mon": "readonly",
+  "5-Mon": "selected",
+};
+
+export default () => (
+  <>
+    <style>{style}</style>
+    <div id="test-area" className="k-d-grid k-grid-cols-1">
+      <p>This test covers the read-only, non-work and selected cell states, and their combinations.</p>
+      <SchedulerWeek
+        children={
+          <tbody>
+            <SchedulerHead as="tr">
+              <td>
+                <SchedulerTimes>
+                  <SchedulerTable role="none">
+                    <tbody>
+                      <tr style={{ height: "55px" }}>
+                        <SchedulerCell as="th" />
+                      </tr>
+                      <tr style={{ height: "86px" }}>
+                        <SchedulerCell as="th" allDay text="all day" />
+                      </tr>
+                    </tbody>
+                  </SchedulerTable>
+                </SchedulerTimes>
+              </td>
+              <td>
+                <SchedulerHeader>
+                  <SchedulerTable>
+                    <tbody>
+                      <tr className="k-scheduler-date-group">
+                        {days.map(({ day, date, today }) => (
+                          <SchedulerCell key={day} as="th" today={today} dayText={day} text={date} />
+                        ))}
+                      </tr>
+                    </tbody>
+                  </SchedulerTable>
+                  <SchedulerTable className="k-scheduler-header-all-day">
+                    <tbody>
+                      <tr style={{ height: "86px" }}>
+                        {days.map(({ day, nonwork }) => (
+                          <SchedulerCell key={day} as="td" nonwork={nonwork} />
+                        ))}
+                      </tr>
+                    </tbody>
+                  </SchedulerTable>
+                </SchedulerHeader>
+              </td>
+            </SchedulerHead>
+            <SchedulerBody as="tr">
+              <td>
+                <SchedulerTimes>
+                  <SchedulerTable role="none">
+                    <tbody>
+                      {hours.map((hour) => (
+                        <Fragment key={hour}>
+                          <tr>
+                            <SchedulerCell as="th">
+                              <span>{hour}</span>
+                            </SchedulerCell>
+                          </tr>
+                          <tr>
+                            <SchedulerCell as="th" cellType={["slot"]} />
+                          </tr>
+                        </Fragment>
+                      ))}
+                    </tbody>
+                  </SchedulerTable>
+                </SchedulerTimes>
+              </td>
+              <td>
+                <SchedulerContent tabIndex={0}>
+                  <SchedulerTable>
+                    <tbody>
+                      {Array.from({ length: hours.length * 2 }, (_, row) => (
+                        <tr key={row} className={row % 2 === 0 ? "k-middle-row" : undefined}>
+                          {days.map(({ day, nonwork }) => (
+                            <SchedulerCell
+                              key={day}
+                              as="td"
+                              readonly={isReadonly(row)}
+                              selected={isSelectedRow(row)}
+                              nonwork={nonwork}
+                            >
+                              {labels[`${row}-${day}`] ?? <>&nbsp;</>}
+                            </SchedulerCell>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </SchedulerTable>
+                </SchedulerContent>
+              </td>
+            </SchedulerBody>
+          </tbody>
+        }
+      />
+    </div>
+  </>
+);

package/src/scheduler/tests/scheduler-events-popover.tsx

@@ -29,7 +29,7 @@ export default () => (
       <span>No Data</span>
 
       <section>
-        <Popover className="k-scheduler-popover" style={{ width: "220px" }} callout="left">
+        <Popover className="k-scheduler-popover" style={{ width: "220px" }}>
           <div className="k-popover-header">
             <div className="k-month">Jan</div>
             <div className="k-link k-day">02</div>
@@ -54,7 +54,7 @@ export default () => (
       </section>
 
       <section>
-        <Popover className="k-scheduler-popover" style={{ width: "220px" }} callout="left">
+        <Popover className="k-scheduler-popover" style={{ width: "220px" }}>
           <div className="k-popover-header">
             <div className="k-month">Jan</div>
             <div className="k-link k-day">02</div>
@@ -107,7 +107,7 @@ export default () => (
       </section>
 
       <section>
-        <Popover className="k-scheduler-popover" style={{ width: "220px" }} callout="left">
+        <Popover className="k-scheduler-popover" style={{ width: "220px" }}>
           <div className="k-popover-header">
             <div className="k-month">Jan</div>
             <div className="k-link k-day">29</div>