[ch-tab-render][ch-flexible-layout-render] Add support for `accessi…

…bleName` property on items (#462) * [ch-tab-render][ch-flexible-layout-render] Add support for accessibleName property on items ## Breaking changes - [ch-tab-render][ch-flexible-layout-render] Because the `accessibleName` property is added on the items, the name property is now marked as optional. * Update renders.tsx
genexuslabs · Dec 3, 2024 · 6b3bb56 · 6b3bb56
1 parent a2bf476
commit 6b3bb56
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/src/components/flexible-layout/internal/flexible-layout/types.ts b/src/components/flexible-layout/internal/flexible-layout/types.ts
@@ -134,14 +134,18 @@ export type FlexibleLayoutWidget = {
   conserveRenderState?: boolean;
   id: string;
 
+  accessibleName?: string;
+
   /**
    * Specify if the tab button is disabled.
    * If disabled, it will not fire any user interaction related event
    * (for example, click event).
    */
   disabled?: boolean;
 
-  name: string;
+  // TODO: Check in the drag and drop algorithm if the name property can be
+  // optional. To model tabs with only icons this property must be optional
+  name?: string;
 
   startImgSrc?: string;
 

diff --git a/src/components/tab/tab.tsx b/src/components/tab/tab.tsx
@@ -993,7 +993,9 @@ export class ChTabRender implements DraggableView {
         id={item.id}
         role="tab"
         aria-controls={PANEL_ID(item.id)}
-        aria-label={!this.showCaptions ? item.name : null}
+        aria-label={
+          item.accessibleName ?? (!this.showCaptions ? item.name : null)
+        }
         aria-selected={selected.toString()}
         class={{
           [TAB_BUTTON_CLASS]: true,
@@ -1159,6 +1161,8 @@ export class ChTabRender implements DraggableView {
 
     return (
       <button
+        // TODO: Check if this is necessary
+        // aria-hidden="true"
         class={{
           [TAB_BUTTON_CLASS]: true,
           [DRAG_PREVIEW]: true,

diff --git a/src/components/tab/types.ts b/src/components/tab/types.ts
@@ -14,7 +14,11 @@ export type TabModel = TabItemModel[];
 
 export type TabItemModel = {
   id: string;
-  name: string;
+
+  accessibleName?: string;
+
+  // TODO: Rename to caption???
+  name?: string;
 
   /**
    * Same as the contain CSS property. This property indicates that an item

diff --git a/src/components/test/test-flexible-layout/renders.tsx b/src/components/test/test-flexible-layout/renders.tsx
@@ -115,7 +115,7 @@ export const defaultLayout: FlexibleLayoutModel = {
           type: "tabbed",
           selectedWidgetId: START_PAGE,
           widgets: [
-            { id: START_PAGE, name: "Start Page" },
+            { id: START_PAGE, accessibleName: "Start Page" },
             {
               id: STRUCT_EDITOR,
               name: "Struct Editor",
@@ -215,7 +215,7 @@ export const layout2: FlexibleLayoutModel = {
               size: "1fr",
               type: "tabbed",
               selectedWidgetId: START_PAGE,
-              widgets: [{ id: START_PAGE, name: "Start Page" }]
+              widgets: [{ id: START_PAGE, accessibleName: "Start Page" }]
             },
             {
               id: "sub-group-2-2-2",
@@ -339,7 +339,7 @@ export const layout3: FlexibleLayoutModel = {
                   widgets: [
                     {
                       id: START_PAGE,
-                      name: "Start Page",
+                      accessibleName: "Start Page",
                       startImgSrc: `${ASSETS_PREFIX}/toolbar/home.svg`,
                       closeButton: false
                     }