fix: Make IDs of comment bar buttons consistent

Author: gonfunko

packages/blockly/core/comments/collapse_comment_bar_button.ts

@@ -41,19 +41,24 @@ export class CollapseCommentBarButton extends CommentBarButton {
    * @param container An SVG group that this button should be a child of.
    */
   constructor(
-    protected readonly id: string,
-    protected readonly workspace: WorkspaceSvg,
-    protected readonly container: SVGGElement,
-    protected readonly commentView: CommentView,
+    id: string,
+    workspace: WorkspaceSvg,
+    container: SVGGElement,
+    commentView: CommentView,
   ) {
-    super(id, workspace, container, commentView);
+    super(
+      `${id}${COMMENT_COLLAPSE_BAR_BUTTON_FOCUS_IDENTIFIER}`,
+      workspace,
+      container,
+      commentView,
+    );
 
     this.icon = dom.createSvgElement(
       Svg.IMAGE,
       {
         'class': 'blocklyFoldoutIcon',
         'href': `${this.workspace.options.pathToMedia}foldout-icon.svg`,
-        'id': `${this.id}${COMMENT_COLLAPSE_BAR_BUTTON_FOCUS_IDENTIFIER}`,
+        'id': this.id,
       },
       this.container,
     );

packages/blockly/core/comments/comment_bar_button.ts

@@ -28,7 +28,7 @@ export abstract class CommentBarButton implements IFocusableNode {
    * @param container An SVG group that this button should be a child of.
    */
   constructor(
-    protected readonly id: string,
+    readonly id: string,
     protected readonly workspace: WorkspaceSvg,
     protected readonly container: SVGGElement,
     protected readonly commentView: CommentView,

packages/blockly/core/comments/delete_comment_bar_button.ts

@@ -41,19 +41,24 @@ export class DeleteCommentBarButton extends CommentBarButton {
    * @param container An SVG group that this button should be a child of.
    */
   constructor(
-    protected readonly id: string,
-    protected readonly workspace: WorkspaceSvg,
-    protected readonly container: SVGGElement,
-    protected readonly commentView: CommentView,
+    id: string,
+    workspace: WorkspaceSvg,
+    container: SVGGElement,
+    commentView: CommentView,
   ) {
-    super(id, workspace, container, commentView);
+    super(
+      `${id}${COMMENT_DELETE_BAR_BUTTON_FOCUS_IDENTIFIER}`,
+      workspace,
+      container,
+      commentView,
+    );
 
     this.icon = dom.createSvgElement(
       Svg.IMAGE,
       {
         'class': 'blocklyDeleteIcon',
         'href': `${this.workspace.options.pathToMedia}delete-icon.svg`,
-        'id': `${this.id}${COMMENT_DELETE_BAR_BUTTON_FOCUS_IDENTIFIER}`,
+        'id': this.id,
       },
       container,
     );

packages/blockly/core/workspace_svg.ts

@@ -254,7 +254,8 @@ export class WorkspaceSvg
    * @param e The right-click event that triggered the context menu.
    */
   configureContextMenu:
-    ((menuOptions: ContextMenuOption[], e: Event) => void) | null = null;
+    | ((menuOptions: ContextMenuOption[], e: Event) => void)
+    | null = null;
 
   /**
    * A dummy wheel event listener used as a workaround for a Safari scrolling issue.
@@ -2977,8 +2978,7 @@ export class WorkspaceSvg
           return (
             comment.view
               .getCommentBarButtons()
-              .find((button) => button.getFocusableElement().id.includes(id)) ??
-            null
+              .find((button) => button.id.includes(id)) ?? null
           );
         }
       }