Phase 2 : Refactor TextualBody to MVVM and remove legacy component (#33165)

* Refactor TextualBody to MVVM and remove legacy component

* Update snapshot + fix eslint warning

* update css to fix playwright tests failure

* return i18n into the MVVM

* Update snapshots

* Update tests to reflect the css changes

* Update snapshot

* Update css to correct letter-spacing

* Update css to fix playwright issues.

* Preserve inline emote sender rendering in TextualBodyView

* Update snapshot to reflect html change

* Update back to span instead of button, the default button css fails tests

* Extract TextualBodyFactory from MBodyFactory

* Update snapshot

* Update HTML snapshot to pass tests

* Update Snapshots

* Added several tests for coverage

* Remove double checks, merge function already checks.

* Remove unessecery comment

* revert to button

* Update snapshots because of the revert

* added Math.min() to simplify ternary expressions.

* Update playwright screenshots for accessibility

* Update playwright screenshots

* Update css to fix playwright fail

* Update screenshot + snapshots

* Add comments to props

packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.module.css

@@ -37,7 +37,7 @@
     user-select: none;
     display: inline-block;
     margin-inline-start: 9px; /* Preserve legacy EventTile spacing for inline annotations like (edited) */
-    font: var(--cpd-font-body-xs-regular);
+    font-size: 12px; /* Match the legacy EventTile edited-marker size */
     color: var(--cpd-color-text-secondary);
 }
 
@@ -45,8 +45,12 @@
     appearance: none;
     background: none;
     border: none;
+    height: max-content;
     padding: 0;
     cursor: pointer;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
 }
 
 .bodyLink,
@@ -66,10 +70,19 @@
 }
 
 .emoteSender {
-    all: unset;
-    font: inherit;
+    appearance: none;
+    background: none;
+    border: none;
+    padding: 0;
     color: inherit;
     cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+    font-style: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+    text-align: inherit;
 }
 
 .editedMarker:focus-visible,

packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.test.tsx

@@ -74,7 +74,7 @@ describe("TextualBodyView", () => {
             implements TextualBodyViewActions
         {
             public onEditedMarkerClick?: MouseEventHandler<HTMLButtonElement>;
-            public onBodyActionClick?: MouseEventHandler<HTMLElement>;
+            public onBodyActionClick?: MouseEventHandler<HTMLButtonElement>;
             public onEmoteSenderClick?: MouseEventHandler<HTMLButtonElement>;
 
             public constructor(snapshot: TextualBodyViewSnapshot, actions: TextualBodyViewActions) {
@@ -160,7 +160,7 @@ describe("TextualBodyView", () => {
             extends MockViewModel<TextualBodyViewSnapshot>
             implements TextualBodyViewActions
         {
-            public onBodyActionClick?: MouseEventHandler<HTMLElement>;
+            public onBodyActionClick?: MouseEventHandler<HTMLButtonElement>;
 
             public constructor(snapshot: TextualBodyViewSnapshot, actions: TextualBodyViewActions) {
                 super(snapshot);

packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBodyView.tsx

@@ -62,6 +62,10 @@ export interface TextualBodyViewSnapshot {
      * Visible label for the edited marker.
      */
     editedMarkerText?: string;
+    /**
+     * Accessible label announced for the edited marker action.
+     */
+    editedMarkerAriaLabel?: string;
     /**
      * Tooltip description for the edited marker.
      */
@@ -92,7 +96,7 @@ export interface TextualBodyViewActions {
     /**
      * Activation handler used when `bodyWrapper` is `ACTION`.
      */
-    onBodyActionClick?: MouseEventHandler<HTMLElement>;
+    onBodyActionClick?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Click handler for the edited marker.
      */
@@ -165,6 +169,7 @@ export function TextualBodyView({
         bodyActionAriaLabel,
         showEditedMarker,
         editedMarkerText,
+        editedMarkerAriaLabel,
         editedMarkerTooltip,
         editedMarkerCaption,
         showPendingModerationMarker,
@@ -195,6 +200,8 @@ export function TextualBodyView({
                 type="button"
                 className={classNames(styles.annotation, styles.editedMarker)}
                 onClick={onEditedMarkerClick}
+                aria-label={editedMarkerAriaLabel}
+                data-textual-body-edited-marker=""
             >
                 <span>{editedMarkerText}</span>
             </button>
@@ -218,7 +225,7 @@ export function TextualBodyView({
 
     if (showPendingModerationMarker) {
         markers.push(
-            <span key="pending-moderation-marker" className={styles.annotation}>
+            <span key="pending-moderation-marker" className={styles.annotation} data-textual-body-pending-moderation="">
                 {pendingModerationText}
             </span>,
         );

packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/__snapshots__/TextualBody.test.tsx.snap

@@ -40,6 +40,7 @@ exports[`TextualBodyView > renders emote messages with annotations 1`] = `
       </span>
       <button
         class="TextualBody-module_annotation TextualBody-module_editedMarker"
+        data-textual-body-edited-marker=""
         type="button"
       >
         <span>