@guiexpert/table 1.1.90 → 1.1.91

package/README.md

@@ -25,7 +25,8 @@ This is the UI-agnostic table component for your next web app. 😊
 - Row and Column Spanning
 - Fixed Columns (Left and Right)
 - Tree table (Hierarchical View)
-- Accessibility support: Keyboard Shortcuts
+- Accessibility: screen readers (WAI-ARIA grid/treegrid, row/column counts with virtual scrolling, announcements of
+  sorting, filter and copy) and full keyboard navigation (arrows, Home/End, Page Up/Down, header focus, Enter) – since 1.1.91
 - Custom Filtering
 - In-place Cell Editing
 - Userdefined Key and Mouse Events
@@ -39,6 +40,7 @@ This is the UI-agnostic table component for your next web app. 😊
 
 ## Links
 
+- [Training: GuiExpert Table step by step](https://gui.expert/training/)
 - [Demos](https://gui.expert/demos)
 - [Documentation](https://gui.expert/doc)
 - [API](https://gui.expert/api)

package/css/main.css

@@ -7,6 +7,26 @@
   height: 100%;
 }
 
+/* Keyboard focus ring of the table (the table is one tab stop; the focused cell has its own frame). */
+.ge-table:focus-visible {
+  outline: 2px solid var(--ge-table-focus-outline-color, var(--ge-table-focus-border));
+  outline-offset: -2px;
+}
+
+/* Visually hidden, but read by screen readers – e.g. a text alternative in an own cell renderer:
+   <span class="ge-table-sr-only">75 percent</span> */
+.ge-table-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
 .ge-table-col-div {
   text-align: center;
   line-height: 2.5;
@@ -108,6 +128,16 @@
         line-height: 2;
       }
     }
+    /* a nested object: its fields, headed by the property name */
+    fieldset.form-group {
+      border: 0;
+      margin: 0;
+      padding: 0;
+      legend {
+        font-weight: bold;
+        padding: 6px 0;
+      }
+    }
   }
   .ge-table-dialog-footer {
     display: flex;
@@ -194,7 +224,9 @@
 .ge-table-hover-column { background-color: var(--ge-table-hover-column-bg); }
 .ge-table-hover-row { background-color: var(--ge-table-hover-row-bg); }
 
-.ge-table-focus-border { background-color: var(--ge-table-focus-border); }
+/* Focus frame of the focused cell (2 px). --ge-table-focus-outline-color (not set by default) overrides the
+   color of the cell frame and of the host's keyboard focus ring at once. */
+.ge-table-focus-border { background-color: var(--ge-table-focus-outline-color, var(--ge-table-focus-border)); }
 .ge-table-color-col-resize-handle-hover { background-color: var(--ge-table-color-col-resize-handle-hover-bg); }
 .ge-table-color-dragged-col-div { background-color: var(--ge-table-color-dragged-col-div-bg); }
 .ge-table-color-drop-zone { background-color: var(--ge-table-color-drop-zone-bg); }
@@ -300,8 +332,10 @@
   --ge-table-color-drop-zone: #fafafa;
   --ge-table-color-tree-arrow-collapsed-color: var(--ge-table-body-west-text);
 
-  --ge-table-color-star-rating: #fcb515;
-  --ge-table-color-progress-bar: #36BB6C;
+  /* light theme: ≥ 3 : 1 against white (WCAG 1.4.11, the stars and bars are images for screen readers);
+     before 1.1.91: #fcb515 (1.8 : 1) and #36BB6C (2.5 : 1) */
+  --ge-table-color-star-rating: #a86f00;
+  --ge-table-color-progress-bar: #1e874b;
 }
 
 
@@ -422,10 +456,22 @@ html[data-theme="dark"] {
   padding-left: 116px;
 }
 
-.ge-table-col-tree.ge-table-tree-deep-5 {
+.ge-table-col-tree.ge-table-tree-deep-6 {
   padding-left: 136px;
 }
 
+.ge-table-col-tree.ge-table-tree-deep-7 {
+  padding-left: 156px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-8 {
+  padding-left: 176px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-9 {
+  padding-left: 196px;
+}
+
 .ge-table-col-div.ge-table-col-tree.ge-table-tree-cell {
   display: grid;
   grid-template-columns: 16px 1fr;

package/css/table-classes.css

@@ -7,6 +7,26 @@
   height: 100%;
 }
 
+/* Keyboard focus ring of the table (the table is one tab stop; the focused cell has its own frame). */
+.ge-table:focus-visible {
+  outline: 2px solid var(--ge-table-focus-outline-color, var(--ge-table-focus-border));
+  outline-offset: -2px;
+}
+
+/* Visually hidden, but read by screen readers – e.g. a text alternative in an own cell renderer:
+   <span class="ge-table-sr-only">75 percent</span> */
+.ge-table-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
 .ge-table-col-div {
   text-align: center;
   line-height: 2.5;
@@ -108,6 +128,16 @@
         line-height: 2;
       }
     }
+    /* a nested object: its fields, headed by the property name */
+    fieldset.form-group {
+      border: 0;
+      margin: 0;
+      padding: 0;
+      legend {
+        font-weight: bold;
+        padding: 6px 0;
+      }
+    }
   }
   .ge-table-dialog-footer {
     display: flex;

package/css/table-color-classes.css

@@ -70,7 +70,9 @@
 .ge-table-hover-column { background-color: var(--ge-table-hover-column-bg); }
 .ge-table-hover-row { background-color: var(--ge-table-hover-row-bg); }
 
-.ge-table-focus-border { background-color: var(--ge-table-focus-border); }
+/* Focus frame of the focused cell (2 px). --ge-table-focus-outline-color (not set by default) overrides the
+   color of the cell frame and of the host's keyboard focus ring at once. */
+.ge-table-focus-border { background-color: var(--ge-table-focus-outline-color, var(--ge-table-focus-border)); }
 .ge-table-color-col-resize-handle-hover { background-color: var(--ge-table-color-col-resize-handle-hover-bg); }
 .ge-table-color-dragged-col-div { background-color: var(--ge-table-color-dragged-col-div-bg); }
 .ge-table-color-drop-zone { background-color: var(--ge-table-color-drop-zone-bg); }

package/css/table-color-vars.css

@@ -79,8 +79,10 @@ html, html[data-theme="light"] {
   --ge-table-color-drop-zone: #fafafa;
   --ge-table-color-tree-arrow-collapsed-color: var(--ge-table-body-west-text);
 
-  --ge-table-color-star-rating: #fcb515;
-  --ge-table-color-progress-bar: #36BB6C;
+  /* light theme: ≥ 3 : 1 against white (WCAG 1.4.11, the stars and bars are images for screen readers);
+     before 1.1.91: #fcb515 (1.8 : 1) and #36BB6C (2.5 : 1) */
+  --ge-table-color-star-rating: #a86f00;
+  --ge-table-color-progress-bar: #1e874b;
 }
 
 

package/css/table-tree.css

@@ -43,10 +43,22 @@
   padding-left: 116px;
 }
 
-.ge-table-col-tree.ge-table-tree-deep-5 {
+.ge-table-col-tree.ge-table-tree-deep-6 {
   padding-left: 136px;
 }
 
+.ge-table-col-tree.ge-table-tree-deep-7 {
+  padding-left: 156px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-8 {
+  padding-left: 176px;
+}
+
+.ge-table-col-tree.ge-table-tree-deep-9 {
+  padding-left: 196px;
+}
+
 .ge-table-col-div.ge-table-col-tree.ge-table-tree-cell {
   display: grid;
   grid-template-columns: 16px 1fr;