@wix/zero-config-implementation 1.96.0 → 1.98.0

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.96.0",
+  "version": "1.98.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": "741408430f509ba8b4ac3b6f2ff22c4fae1bf06d9f8b98e2a9e8e079"
 }

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

@@ -43,17 +43,71 @@ function createElementWithDisplayMatcher(tag: string, matcherData: MatchedCssDat
   }
 }
 
-function createComponent(rootElement: ExtractedElement): ComponentInfoWithCss {
+function createComponent(rootElement: ExtractedElement, renderDisplayElementAsChild = false): ComponentInfoWithCss {
+  const componentRoot = renderDisplayElementAsChild
+    ? {
+        traceId: 'trace-container',
+        name: 'container',
+        tag: 'div',
+        attributes: {},
+        extractorData: new Map<string, unknown>(),
+        children: [{ ...rootElement, traceId: 'trace-display', name: 'display' }],
+      }
+    : rootElement
+
   return {
     componentName: 'DisplayComponent',
     props: {},
-    elements: [rootElement],
+    elements: [componentRoot],
     propUsages: new Map(),
     css: [],
     varUsedByTraceId: new Map(),
   }
 }
 
+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() }])),
+  }
+}
+
+function getDisplayProperty(result: ReturnType<typeof toEditorReactComponent>) {
+  return result.editorElement?.elements?.display?.inlineElement?.cssProperties?.display
+}
+
+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,
@@ -76,6 +130,14 @@ function createSemanticElement({
 }
 
 describe('toEditorReactComponent display conversion', () => {
+  it('omits display from the root editor element', () => {
+    const rootElement = createElementWithDisplayMatcher('div', matcherDataFromCss('display: flex'))
+
+    const result = toEditorReactComponent(createComponent(rootElement))
+
+    expect(result.editorElement?.cssProperties?.display).toBeUndefined()
+  })
+
   it('resolves local display fallback chains before emitting the manifest display value', () => {
     const rootElement = createElementWithDisplayMatcher(
       'span',
@@ -84,10 +146,10 @@ describe('toEditorReactComponent display conversion', () => {
       ),
     )
 
-    const result = toEditorReactComponent(createComponent(rootElement))
+    const result = toEditorReactComponent(createComponent(rootElement, true))
     expect(result.editorElement).toBeDefined()
 
-    expect(result.editorElement?.cssProperties?.display).toEqual({
+    expect(getDisplayProperty(result)).toEqual({
       display: {
         displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, 'inlineFlex'],
       },
@@ -97,10 +159,10 @@ describe('toEditorReactComponent display conversion', () => {
   it('keeps using the tag default when no display declaration exists', () => {
     const rootElement = createElementWithDisplayMatcher('span', matcherDataFromCss(''))
 
-    const result = toEditorReactComponent(createComponent(rootElement))
+    const result = toEditorReactComponent(createComponent(rootElement, true))
     expect(result.editorElement).toBeDefined()
 
-    expect(result.editorElement?.cssProperties?.display).toEqual({
+    expect(getDisplayProperty(result)).toEqual({
       display: {
         displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, 'inline'],
       },
@@ -127,9 +189,9 @@ describe('toEditorReactComponent display conversion', () => {
     it.each(tagDefaults)('maps a <%s> tag default (%s) onto its enum name', (tag, _cssDisplay, expectedEnumValue) => {
       const rootElement = createElementWithDisplayMatcher(tag, matcherDataFromCss(''))
 
-      const result = toEditorReactComponent(createComponent(rootElement))
+      const result = toEditorReactComponent(createComponent(rootElement, true))
 
-      expect(result.editorElement?.cssProperties?.display).toEqual({
+      expect(getDisplayProperty(result)).toEqual({
         display: {
           displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, expectedEnumValue],
         },
@@ -138,14 +200,14 @@ describe('toEditorReactComponent display conversion', () => {
 
     it('treats an explicit `display: table-cell` declaration the same as the tag default', () => {
       const fromTag = toEditorReactComponent(
-        createComponent(createElementWithDisplayMatcher('td', matcherDataFromCss(''))),
+        createComponent(createElementWithDisplayMatcher('td', matcherDataFromCss('')), true),
       )
       const fromCss = toEditorReactComponent(
-        createComponent(createElementWithDisplayMatcher('div', matcherDataFromCss('display: table-cell'))),
+        createComponent(createElementWithDisplayMatcher('div', matcherDataFromCss('display: table-cell')), true),
       )
 
-      expect(fromCss.editorElement?.cssProperties?.display).toEqual(fromTag.editorElement?.cssProperties?.display)
-      expect(fromCss.editorElement?.cssProperties?.display).toEqual({
+      expect(getDisplayProperty(fromCss)).toEqual(getDisplayProperty(fromTag))
+      expect(getDisplayProperty(fromCss)).toEqual({
         display: {
           displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, CSS_PROPERTIES.DISPLAY_VALUE.tableCell],
         },
@@ -155,9 +217,9 @@ describe('toEditorReactComponent display conversion', () => {
     it('still maps kebab-case values that do have an enum representation', () => {
       const rootElement = createElementWithDisplayMatcher('div', matcherDataFromCss('display: inline-block'))
 
-      const result = toEditorReactComponent(createComponent(rootElement))
+      const result = toEditorReactComponent(createComponent(rootElement, true))
 
-      expect(result.editorElement?.cssProperties?.display).toEqual({
+      expect(getDisplayProperty(result)).toEqual({
         display: {
           displayValues: [CSS_PROPERTIES.DISPLAY_VALUE.none, CSS_PROPERTIES.DISPLAY_VALUE.inlineBlock],
         },
@@ -169,8 +231,8 @@ describe('toEditorReactComponent display conversion', () => {
 
       for (const [tag] of tagDefaults) {
         const rootElement = createElementWithDisplayMatcher(tag, matcherDataFromCss(''))
-        const result = toEditorReactComponent(createComponent(rootElement))
-        const emittedValues = result.editorElement?.cssProperties?.display?.display?.displayValues ?? []
+        const result = toEditorReactComponent(createComponent(rootElement, true))
+        const emittedValues = getDisplayProperty(result)?.display?.displayValues ?? []
 
         expect(emittedValues.filter((displayValue) => !allowedValues.has(displayValue))).toEqual([])
       }
@@ -195,9 +257,9 @@ describe('toEditorReactComponent display conversion', () => {
             'div',
             matcherDataFromCss(`display: ${toCssSpelling(enumValue)}`),
           )
-          const result = toEditorReactComponent(createComponent(rootElement))
+          const result = toEditorReactComponent(createComponent(rootElement, true))
 
-          return result.editorElement?.cssProperties?.display?.display?.displayValues?.[1] !== enumValue
+          return getDisplayProperty(result)?.display?.displayValues?.[1] !== enumValue
         })
 
       expect(unreachable).toEqual([])

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'
@@ -127,7 +127,7 @@ function buildEditorElement(
       component.innerElementProps,
       component.propUsages,
     ),
-    cssProperties: buildCssProperties(rootElement),
+    cssProperties: buildCssProperties(rootElement, true),
     cssCustomProperties: rootCustomProps,
     ...(rootStates && { states: rootStates }),
     ...(displayGroups && { displayGroups }),
@@ -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
@@ -223,7 +224,7 @@ function buildElements(
     const semanticClass = getSemanticBlockName(element)
 
     const data = innerEntry && propUsages ? buildData(innerEntry.props, propUsages) : undefined
-    const cssProps = buildCssProperties(element)
+    const cssProps = buildCssProperties(element, false)
     const cssCustomProps = nearestCommonAncestorCustomProps.get(element.traceId) ?? {}
 
     // Inner-element custom states come from custom-class triggers only; prop
@@ -562,7 +563,10 @@ function toDisplayEnumValue(cssValue: string): DisplayEnumValue {
   return (CSS_DISPLAY_TO_ENUM[cssValue] ?? cssValue) as DisplayEnumValue
 }
 
-function buildCssProperties(element: ExtractedElement | undefined): Record<string, CssPropertyItem> {
+function buildCssProperties(
+  element: ExtractedElement | undefined,
+  isRootElement: boolean,
+): Record<string, CssPropertyItem> {
   const result: Record<string, CssPropertyItem> = {}
 
   const cssData = element?.extractorData.get('css-properties') as CssPropertiesData | undefined
@@ -573,7 +577,9 @@ function buildCssProperties(element: ExtractedElement | undefined): Record<strin
   const cssPropertyValues = element ? getMatchedPropertyValues(element) : new Map<string, string>()
   for (const propName of decidedProperties) {
     if (propName === CSS_PROPERTY_TYPE.display && element) {
-      result[propName] = buildDisplayProperty(element)
+      if (!isRootElement) {
+        result[propName] = buildDisplayProperty(element)
+      }
       continue
     }
     const resolvedValue = resolveLonghand(propName, cssPropertyValues)