@wix/zero-config-implementation 1.96.0 → 1.97.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.96.0",
+  "version": "1.97.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -106,5 +106,5 @@
       ]
     }
   },
-  "falconPackageHash": "d3a6a9c74757e90d4bf8667577b7d75107131acdedfc47058f1a69da"
+  "falconPackageHash": "0b3ebaeffed6f192d5ccd84f8598e0e524b0edb36eb3ca0961bab4c7"
 }

package/src/converters/a11y-builder.test.ts

@@ -0,0 +1,32 @@
+import { DATA } from '@wix/react-component-schema'
+import { describe, expect, it } from 'vitest'
+import type { PropWriteInfo, TrackingStores } from '../information-extractors/react/types'
+import { collectUsedA11yAttributes } from './a11y-builder'
+
+function propUsagesFor(propPaths: string[]): TrackingStores['propUsages'] {
+  const emptyWriteInfo = (): PropWriteInfo => ({ elements: new Map(), attributes: new Map() })
+  return new Map(propPaths.map((propPath) => [propPath, emptyWriteInfo()]))
+}
+
+describe('collectUsedA11yAttributes', () => {
+  it('returns an empty array when propUsages or propPath is unavailable', () => {
+    expect(collectUsedA11yAttributes(undefined, 'props.a11y')).toEqual([])
+    expect(collectUsedA11yAttributes(propUsagesFor(['props.a11y.role']), undefined)).toEqual([])
+  })
+
+  it('returns an empty array when no accessibility fields are recorded', () => {
+    expect(collectUsedA11yAttributes(propUsagesFor([]), 'props.a11y')).toEqual([])
+  })
+
+  it('allows only the current editor-configurable fields', () => {
+    const allAttributes = Object.values(DATA.A11Y_ATTRIBUTES).map((attribute) => `props.a11y.${attribute}`)
+
+    expect(collectUsedA11yAttributes(propUsagesFor(allAttributes), 'props.a11y')).toEqual(['ariaLabel', 'tag'])
+  })
+
+  it('keeps allowed fields in schema order', () => {
+    const propUsages = propUsagesFor(['props.a11y.tag', 'props.a11y.role', 'props.a11y.ariaLabel'])
+
+    expect(collectUsedA11yAttributes(propUsages, 'props.a11y')).toEqual(['ariaLabel', 'tag'])
+  })
+})

package/src/converters/a11y-builder.ts

@@ -1,25 +1,31 @@
 import { DATA } from '@wix/react-component-schema'
 import type { TrackingStores } from '../information-extractors/react'
 
+type A11yAttribute = (typeof DATA.A11Y_ATTRIBUTES)[keyof typeof DATA.A11Y_ATTRIBUTES]
+
+const EDITOR_CONFIGURABLE_A11Y_ATTRIBUTES: ReadonlySet<A11yAttribute> = new Set([
+  DATA.A11Y_ATTRIBUTES.ariaLabel,
+  DATA.A11Y_ATTRIBUTES.tag,
+])
+
 /**
- * Walks the known A11y attributes (from DATA.A11Y_ATTRIBUTES) in deterministic
- * enum order and returns the subset whose `${propPath}.${attribute}` key was
- * recorded in propUsages by the prop-tracker. When propUsages or propPath is
- * unavailable, returns an empty array — per the schema, an empty list means
- * "all possible A11Y values", which is a safe default.
+ * Returns the editor-configurable attributes the component reads, in schema
+ * order. The caller must omit the a11y data item when this returns an empty
+ * list because the manifest schema interprets an empty list as all attributes.
  */
 export function collectUsedA11yAttributes(
   propUsages: TrackingStores['propUsages'] | undefined,
   propPath: string | undefined,
-): (typeof DATA.A11Y_ATTRIBUTES)[keyof typeof DATA.A11Y_ATTRIBUTES][] {
+): A11yAttribute[] {
   if (!propUsages || !propPath) return []
 
-  const used: (typeof DATA.A11Y_ATTRIBUTES)[keyof typeof DATA.A11Y_ATTRIBUTES][] = []
+  const usedAttributes: A11yAttribute[] = []
   for (const attribute of Object.values(DATA.A11Y_ATTRIBUTES)) {
-    if (attribute === DATA.A11Y_ATTRIBUTES.Unknown_AriaAttributes) continue
+    if (!EDITOR_CONFIGURABLE_A11Y_ATTRIBUTES.has(attribute)) continue
     if (propUsages.has(`${propPath}.${attribute}`)) {
-      used.push(attribute)
+      usedAttributes.push(attribute)
     }
   }
-  return used
+
+  return usedAttributes
 }

package/src/converters/to-editor-component.test.ts

@@ -54,6 +54,45 @@ function createComponent(rootElement: ExtractedElement): ComponentInfoWithCss {
   }
 }
 
+function createComponentWithA11yUsages(propPaths: string[]): ComponentInfoWithCss {
+  return {
+    ...createComponent(createElementWithDisplayMatcher('div', matcherDataFromCss(''))),
+    props: {
+      a11y: {
+        name: 'a11y',
+        type: 'A11y',
+        required: false,
+        resolvedType: { kind: 'semantic', value: 'A11y', source: '@wix/editor-react-types' },
+        propPath: 'props.a11y',
+        logicOnly: false,
+      },
+    },
+    propUsages: new Map(propPaths.map((propPath) => [propPath, { elements: new Map(), attributes: new Map() }])),
+  }
+}
+
+describe('toEditorReactComponent accessibility conversion', () => {
+  it('omits the a11y item when the component reads only component-owned fields', () => {
+    const component = createComponentWithA11yUsages(['props.a11y.role', 'props.a11y.tabIndex'])
+
+    expect(toEditorReactComponent(component).editorElement?.data?.a11y).toBeUndefined()
+  })
+
+  it('emits only the allowed fields when reads are mixed', () => {
+    const component = createComponentWithA11yUsages([
+      'props.a11y.role',
+      'props.a11y.ariaLabel',
+      'props.a11y.ariaExpanded',
+      'props.a11y.tag',
+    ])
+
+    expect(toEditorReactComponent(component).editorElement?.data?.a11y).toMatchObject({
+      dataType: 'a11y',
+      a11y: { attributes: ['ariaLabel', 'tag'] },
+    })
+  })
+})
+
 function createSemanticElement({
   traceId,
   name,

package/src/converters/to-editor-component.ts

@@ -10,7 +10,7 @@ import type {
   ElementItem,
   States,
 } from '@wix/react-component-schema'
-import { CSS_PROPERTIES, ELEMENTS } from '@wix/react-component-schema'
+import { CSS_PROPERTIES, DATA, ELEMENTS } from '@wix/react-component-schema'
 import { camelCase } from 'case-anything'
 import { IoError } from '../errors'
 import { buildRefElementManifestKey } from '../extensions/ref-elements/path-utils'
@@ -184,6 +184,7 @@ function buildData(
 
     const result = buildDataItem(prop, defaultValue, propUsages, prop.propPath)
     if (result.isErr()) throw result.error
+    if (result.value.dataType === DATA.DATA_TYPE.a11y && !result.value.a11y?.attributes?.length) continue
     // ActiveItemIndex props default to 0 when no default is specified
     if (prop.activeItemIndexTarget && result.value.defaultValue === undefined) {
       result.value.defaultValue = 0