FOUR-22582 : [SUMMER 25] UI Improvements Summer 2025 - Accesibility

src/components/accordions.js

@@ -1,45 +1,45 @@
 export default [
   {
-    name: 'Variable',
+    name: "Variable",
     fields: [
-      { name: 'name', hideFor: 'FormImage' },
-      'fieldValue',
-      'label',
-      'dataFormat',
-      'dataMask',
-      'validation',
-      'readonly',
-      'disabled',
-      'initiallyChecked',
-      'screen',
-      'multipleUpload',
-      'linkUrl',
-      'collection',
-      'record',
-      'collectionmode',
-      'submitCollectionCheck',
+      { name: "name", hideFor: "FormImage" },
+      "fieldValue",
+      "label",
+      "dataFormat",
+      "dataMask",
+      "validation",
+      "readonly",
+      "disabled",
+      "initiallyChecked",
+      "screen",
+      "multipleUpload",
+      "linkUrl",
+      "collection",
+      "record",
+      "collectionmode",
+      "submitCollectionCheck"
     ],
-    open: true,
+    open: true
   },
   {
-    name: 'Configuration',
+    name: "Configuration",
     fields: [
-      { name: 'name', showFor: 'FormImage' },
-      'image',
-      'eventData',
-      'tooltip',
-      'type',
-      'placeholder',
-      'content',
-      'helper',
-      'Multiselect checkbox (doesn’t exist)',
-      'richtext',
-      'rows',
-      { name: 'options', showFor: 'FormMultiColumn' },
-      'form',
-      'editable',
+      { name: "name", showFor: "FormImage" },
+      "image",
+      "eventData",
+      "tooltip",
+      "type",
+      "placeholder",
+      "content",
+      "helper",
+      "Multiselect checkbox (doesn’t exist)",
+      "richtext",
+      "rows",
+      { name: "options", showFor: "FormMultiColumn" },
+      "form",
+      "editable"
     ],
-    open: false,
+    open: false
   },
   {
     name(control) {
@@ -50,43 +50,53 @@ export default [
       return control.component === "FormRecordList" ? "Columns" : "Data Source";
     },
     fields: [
-      'fields',
-      'paginationOption',
-      { name: 'options', hideFor: 'FormMultiColumn' },
+      "fields",
+      "paginationOption",
+      { name: "options", hideFor: "FormMultiColumn" }
     ],
-    open: false,
+    open: false
   },
   {
-    name: 'Design',
+    name: "Design",
     fields: ['color', 'bgcolor', 'variant', 'variantStyle', 'toggle', 'height', 'width', 'designerMode', 'bgcolormodern'],
-    open: false,
+    open: false
   },
   {
-    name: 'Advanced',
-    fields: ['conditionalHide', 'deviceVisibility', 'customCssSelector', 'defaultValue', 'showForDesktop',
-      {name: 'customFormatter', showFor: 'FormInput'},
-      {name: 'ariaLabel', showFor: 'FormInput'},
-      {name: 'ariaLabel', showFor: 'FormSelectList'},
-      {name: 'ariaLabel', showFor: 'FormDatePicker'},
-      {name: 'ariaLabel', showFor: 'FormCheckbox'},
-      {name: 'ariaLabel', showFor: 'FormDatePicker'},
-      {name: 'ariaLabel', showFor: 'FileUpload'},
-      {name: 'ariaLabel', showFor: 'FileDownload'},
-      {name: 'ariaLabel', showFor: 'FormSelectList'},
-      {name: 'ariaLabel', showFor: 'FormButton'},
-      {name: 'ariaLabel', showFor: 'FormTextArea'},
-      {name: 'tabindex', showFor: 'FormInput'},
-      {name: 'tabindex', showFor: 'FormSelectList'},
-      {name: 'tabindex', showFor: 'FormDatePicker'},
-      {name: 'tabindex', showFor: 'FormCheckbox'},
-      {name: 'tabindex', showFor: 'FormDatePicker'},
-      {name: 'tabindex', showFor: 'FileUpload'},
-      {name: 'tabindex', showFor: 'FileDownload'},
-      {name: 'tabindex', showFor: 'FormSelectList'},
-      {name: 'tabindex', showFor: 'FormButton'},
-      {name: 'tabindex', showFor: 'FormTextArea'},
-      {name: 'encryptedConfig', showFor: 'FormInput'},
+    name: "Advanced",
+    fields: [
+      "conditionalHide",
+      "deviceVisibility",
+      "customCssSelector",
+      "defaultValue",
+      "showForDesktop",
+      { name: "customFormatter", showFor: "FormInput" },
+      { name: "encryptedConfig", showFor: "FormInput" }
     ],
-    open: false,
+    open: false
   },
+  {
+    name: "Accessibility",
+    fields: [
+      { name: "ariaLabel", showFor: "FormInput" },
+      { name: "ariaLabel", showFor: "FormSelectList" },
+      { name: "ariaLabel", showFor: "FormDatePicker" },
+      { name: "ariaLabel", showFor: "FormCheckbox" },
+      { name: "ariaLabel", showFor: "FormDatePicker" },
+      { name: "ariaLabel", showFor: "FileUpload" },
+      { name: "ariaLabel", showFor: "FileDownload" },
+      { name: "ariaLabel", showFor: "FormSelectList" },
+      { name: "ariaLabel", showFor: "FormButton" },
+      { name: "ariaLabel", showFor: "FormTextArea" },
+      { name: "tabindex", showFor: "FormInput" },
+      { name: "tabindex", showFor: "FormSelectList" },
+      { name: "tabindex", showFor: "FormDatePicker" },
+      { name: "tabindex", showFor: "FormCheckbox" },
+      { name: "tabindex", showFor: "FileUpload" },
+      { name: "tabindex", showFor: "FileDownload" },
+      { name: "tabindex", showFor: "FormSelectList" },
+      { name: "tabindex", showFor: "FormButton" },
+      { name: "tabindex", showFor: "FormTextArea" }
+    ],
+    open: false
+  }
 ];

src/form-builder-controls.js

@@ -14,7 +14,11 @@ import FormListTable from './components/renderer/form-list-table';
 import FormAnalyticsChart from "./components/renderer/form-analytics-chart";
 import FormCollectionRecordControl from './components/renderer/form-collection-record-control.vue';
 import FormCollectionViewControl from './components/renderer/form-collection-view-control.vue';
+<<<<<<< HEAD
+import { handlerEventProperty } from './components/inspector/button/handler-event-property';
+=======
 import { handlerEventProperty, handlerSecurityProperty } from './components/inspector/button/handler-event-property';
+>>>>>>> origin/develop
 import {DataTypeProperty, DataFormatProperty, DataTypeDateTimeProperty} from './VariableDataTypeProperties';
 import {
   FormInput,
@@ -763,7 +767,10 @@ export default [
         fieldValue: null,
         tooltip: {},
         handler: '',
+<<<<<<< HEAD
+=======
         handlerSecurityEnabled: true,
+>>>>>>> origin/develop
       },
       inspector: [
         {

tests/e2e/specs/FormTextArea.spec.js

@@ -165,7 +165,7 @@ describe("Form Text Area Field", () => {
       { position: "bottom" }
     );
     cy.get("[data-cy=screen-element-container]").click();
-    cy.get("[data-cy=accordion-Advanced]").click();
+    cy.get("[data-cy=accordion-Accessibility]").click();
     cy.get("[data-cy=inspector-ariaLabel]").clear().type("Aria label test");
     cy.get("[data-cy=mode-preview]").click();
     cy.get("[data-cy=preview-content] [name=form_text_area_1]").should(
@@ -182,7 +182,7 @@ describe("Form Text Area Field", () => {
       { position: "bottom" }
     );
     cy.get("[data-cy=screen-element-container]").click();
-    cy.get("[data-cy=accordion-Advanced]").click();
+    cy.get("[data-cy=accordion-Accessibility]").click();
     cy.get("[data-cy=inspector-tabindex]").clear().type("5");
     cy.get("[data-cy=mode-preview]").click();
     cy.get("[data-cy=preview-content] [name=form_text_area_1]").should(