Fixes playwright tests to work with 1.58.1

src/routes/_site-components/CopyBtn.svelte

@@ -9,11 +9,9 @@
 
 		try {
 			if (navigator.clipboard && window.isSecureContext) {
-				// Use modern Clipboard API
 				await navigator.clipboard.writeText(text);
 				return true;
 			} else {
-				// Fallback for older browsers or non-secure contexts
 				const textarea = document.createElement('textarea');
 				textarea.value = text;
 				textarea.style.position = 'fixed';

test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Annotations-html-svelte-1.aria.yml

@@ -1,10 +1,10 @@
 - table:
   - rowgroup:
     - row "Param Default Required Description":
-      - cell "Param"
-      - cell "Default"
-      - cell "Required"
-      - cell "Description"
+      - columnheader "Param"
+      - columnheader "Default"
+      - columnheader "Required"
+      - columnheader "Description"
   - rowgroup:
     - row "text string None yes The text content of the annotation":
       - cell "text string":
@@ -48,12 +48,19 @@
       - cell "None"
       - cell "yes"
       - cell "A list of annotation objects. It expects values of top, right, bottom and left whose values are CSS values like '10px' or '5%' that will be used to absolutely position the text div.":
+        - text: ""
         - code: top
+        - text: ""
         - code: right
+        - text: ""
         - code: bottom
+        - text: ""
         - code: left
+        - text: ""
         - code: "'10px'"
+        - text: ""
         - code: "'5%'"
+        - text: ""
     - 'row "getText Function /** @param {Annotation} d */ d => d.text no An accessor function to get the field to display."':
       - cell "getText Function":
         - strong: getText

test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AnnotationsData-html-svelte-1.aria.yml

@@ -1,10 +1,10 @@
 - table:
   - rowgroup:
     - row "Param Default Required Description":
-      - cell "Param"
-      - cell "Default"
-      - cell "Required"
-      - cell "Description"
+      - columnheader "Param"
+      - columnheader "Default"
+      - columnheader "Required"
+      - columnheader "Description"
   - rowgroup:
     - 'row "anchor string None yes Anchor position, format: `{left"':
       - cell "anchor string":
@@ -30,16 +30,22 @@
     - row /x \(string \| number\) None no X position \(can be percentage string like "\d+%" or data value\)/:
       - cell "x (string | number)":
         - strong: x
+        - text: ""
         - code: string
+        - text: ""
         - code: number
+        - text: ""
       - cell "None"
       - cell "no"
       - cell /X position \(can be percentage string like "\d+%" or data value\)/
     - row /y \(string \| number\) None no Y position \(can be percentage string like "\d+%" or data value\)/:
       - cell "y (string | number)":
         - strong: "y"
+        - text: ""
         - code: string
+        - text: ""
         - code: number
+        - text: ""
       - cell "None"
       - cell "no"
       - cell /Y position \(can be percentage string like "\d+%" or data value\)/
@@ -158,6 +164,10 @@
         - code: $percentRange
       - cell "no"
       - cell "If true will set the top and left CSS positions to percentages instead of pixels.":
+        - text: ""
         - code: "true"
+        - text: ""
         - code: top
-        - code: left
+        - text: ""
+        - code: left
+        - text: ""

test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Area-D3-svelte-1.aria.yml

@@ -1,10 +1,10 @@
 - table:
   - rowgroup:
     - row "Param Default Required Description":
-      - cell "Param"
-      - cell "Default"
-      - cell "Required"
-      - cell "Description"
+      - columnheader "Param"
+      - columnheader "Default"
+      - columnheader "Required"
+      - columnheader "Description"
   - rowgroup:
     - row "fill string '#ab00d610' no The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color.":
       - cell "fill string":
@@ -22,5 +22,7 @@
         - code: curveLinear
       - cell "no"
       - cell "An optional D3 interpolation function. See d3-shape for options. Pass this function in uncalled, i.e. without the open-close parentheses.":
+        - text: ""
         - link "d3-shape":
-          - /url: https://github.com/d3/d3-shape#curves
+          - /url: https://github.com/d3/d3-shape#curves
+        - text: ""

test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Area-svelte-1.aria.yml

@@ -1,10 +1,10 @@
 - table:
   - rowgroup:
     - row "Param Default Required Description":
-      - cell "Param"
-      - cell "Default"
-      - cell "Required"
-      - cell "Description"
+      - columnheader "Param"
+      - columnheader "Default"
+      - columnheader "Required"
+      - columnheader "Description"
   - rowgroup:
     - row "fill string '#ab00d610' no The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color.":
       - cell "fill string":

test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Arrows-svelte-1.aria.yml

@@ -1,10 +1,10 @@
 - table:
   - rowgroup:
     - row "Param Default Required Description":
-      - cell "Param"
-      - cell "Default"
-      - cell "Required"
-      - cell "Description"
+      - columnheader "Param"
+      - columnheader "Default"
+      - columnheader "Required"
+      - columnheader "Description"
   - rowgroup:
     - row "annotations Array<Annotation> None yes A list of annotation objects. See the Column chart example for the schema and options.":
       - cell "annotations Array<Annotation>":
@@ -13,8 +13,10 @@
       - cell "None"
       - cell "yes"
       - cell "A list of annotation objects. See the Column chart example for the schema and options.":
+        - text: ""
         - link "Column":
           - /url: https://layercake.graphics/example/Column
+        - text: ""
     - row "containerClass string '.chart-container' no The class name / CSS selector of the parent element of the <LayerCake> component. This is used to crawl the DOM for the text annotations.":
       - cell "containerClass string":
         - strong: containerClass
@@ -23,4 +25,6 @@
         - code: "'.chart-container'"
       - cell "no"
       - cell "The class name / CSS selector of the parent element of the <LayerCake> component. This is used to crawl the DOM for the text annotations.":
-        - code: <LayerCake>
+        - text: ""
+        - code: <LayerCake>
+        - text: ""

test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisRadial-svelte-1.aria.yml

@@ -1,10 +1,10 @@
 - table:
   - rowgroup:
     - row "Param Default Required Description":
-      - cell "Param"
-      - cell "Default"
-      - cell "Required"
-      - cell "Description"
+      - columnheader "Param"
+      - columnheader "Default"
+      - columnheader "Required"
+      - columnheader "Description"
   - rowgroup:
     - row "lineLengthFactor number 1.1 no How far to extend the lines from the circle's center. A value of 1 puts them at the circle's circumference.":
       - cell "lineLengthFactor number":
@@ -14,7 +14,9 @@
         - code: "1.1"
       - cell "no"
       - cell "How far to extend the lines from the circle's center. A value of 1 puts them at the circle's circumference.":
+        - text: ""
         - code: "1"
+        - text: ""
     - row /labelPlacementFactor number \d+\.\d+ no How far to place the labels from the circle's center\. A value of 1 puts them at the circle's circumference\./:
       - cell "labelPlacementFactor number":
         - strong: labelPlacementFactor
@@ -23,4 +25,6 @@
         - code: /\d+\.\d+/
       - cell "no"
       - cell "How far to place the labels from the circle's center. A value of 1 puts them at the circle's circumference.":
-        - code: "1"
+        - text: ""
+        - code: "1"
+        - text: ""

test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisX-percent-range-html-svelte-1.aria.yml

@@ -1,10 +1,10 @@
 - table:
   - rowgroup:
     - row "Param Default Required Description":
-      - cell "Param"
-      - cell "Default"
-      - cell "Required"
-      - cell "Description"
+      - columnheader "Param"
+      - columnheader "Default"
+      - columnheader "Required"
+      - columnheader "Description"
   - rowgroup:
     - row "tickMarks boolean false no Show a vertical mark for each tick.":
       - cell "tickMarks boolean":
@@ -57,15 +57,21 @@
     - row "ticks (number | Array<any> | Function) undefined no If this is a number, it passes that along to the d3Scale.ticks function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function.":
       - cell "ticks (number | Array<any> | Function)":
         - strong: ticks
+        - text: ""
         - code: number
+        - text: ""
         - code: Array<any>
+        - text: ""
         - code: Function
+        - text: ""
       - cell "undefined":
         - code: undefined
       - cell "no"
       - cell "If this is a number, it passes that along to the d3Scale.ticks function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function.":
+        - text: ""
         - link "d3Scale.ticks":
           - /url: https://github.com/d3/d3-scale
+        - text: ""
     - row "tickGutter number 0 no The amount of whitespace between the start of the tick and the chart drawing area (the yRange min).":
       - cell "tickGutter number":
         - strong: tickGutter
@@ -82,7 +88,9 @@
         - code: "0"
       - cell "no"
       - cell "Any optional value passed to the dx attribute on the text label.":
+        - text: ""
         - code: dx
+        - text: ""
     - row "dy number 0 no Any optional value passed to the dy attribute on the text label.":
       - cell "dy number":
         - strong: dy
@@ -91,18 +99,28 @@
         - code: "0"
       - cell "no"
       - cell "Any optional value passed to the dy attribute on the text label.":
+        - text: ""
         - code: dy
+        - text: ""
     - 'row "units (''px'' | ''%'') $percentRange === true ? ''%'' : ''px'' no If percentRange={true} it defaults to ''%'', otherwise, the default is ''px''. Options: ''%'' or ''px''"':
       - cell "units ('px' | '%')":
         - strong: units
+        - text: ""
         - code: "'px'"
+        - text: ""
         - code: "'%'"
+        - text: ""
       - 'cell "$percentRange === true ? ''%'' : ''px''"':
         - code: "$percentRange === true ? '%' : 'px'"
       - cell "no"
       - 'cell "If percentRange={true} it defaults to ''%'', otherwise, the default is ''px''. Options: ''%'' or ''px''"':
+        - text: ""
         - code: "percentRange={true}"
+        - text: ""
         - code: "'%'"
+        - text: ""
         - code: "'px'"
+        - text: ""
         - code: "'%'"
+        - text: ""
         - code: "'px'"

test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisX-svelte-1.aria.yml

@@ -1,10 +1,10 @@
 - table:
   - rowgroup:
     - row "Param Default Required Description":
-      - cell "Param"
-      - cell "Default"
-      - cell "Required"
-      - cell "Description"
+      - columnheader "Param"
+      - columnheader "Default"
+      - columnheader "Required"
+      - columnheader "Description"
   - rowgroup:
     - row "tickMarks boolean false no Show a vertical mark for each tick.":
       - cell "tickMarks boolean":
@@ -57,15 +57,21 @@
     - row "ticks (number | Array<any> | Function) undefined no If this is a number, it passes that along to the d3Scale.ticks function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function.":
       - cell "ticks (number | Array<any> | Function)":
         - strong: ticks
+        - text: ""
         - code: number
+        - text: ""
         - code: Array<any>
+        - text: ""
         - code: Function
+        - text: ""
       - cell "undefined":
         - code: undefined
       - cell "no"
       - cell "If this is a number, it passes that along to the d3Scale.ticks function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function.":
+        - text: ""
         - link "d3Scale.ticks":
           - /url: https://github.com/d3/d3-scale
+        - text: ""
     - row "tickGutter number 0 no The amount of whitespace between the start of the tick and the chart drawing area (the yRange min).":
       - cell "tickGutter number":
         - strong: tickGutter
@@ -82,7 +88,9 @@
         - code: "0"
       - cell "no"
       - cell "Any optional value passed to the dx attribute on the text label.":
+        - text: ""
         - code: dx
+        - text: ""
     - row /dy number \d+ no Any optional value passed to the dy attribute on the text label\./:
       - cell "dy number":
         - strong: dy
@@ -91,4 +99,6 @@
         - code: /\d+/
       - cell "no"
       - cell "Any optional value passed to the dy attribute on the text label.":
-        - code: dy
+        - text: ""
+        - code: dy
+        - text: ""