From 9ae8204a1bae53fc84d3a4edd87be8c14aa7ceb3 Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Tue, 1 Feb 2022 00:04:00 +0000
Subject: [PATCH] Remove fallback elements for IE11 support in comment headers

---
 .../components/CommentHeader/index.tsx        | 46 ++-----------------
 1 file changed, 4 insertions(+), 42 deletions(-)

diff --git a/client/src/components/CommentApp/components/CommentHeader/index.tsx b/client/src/components/CommentApp/components/CommentHeader/index.tsx
index ea5f40fde5..a4fe497574 100644
--- a/client/src/components/CommentApp/components/CommentHeader/index.tsx
+++ b/client/src/components/CommentApp/components/CommentHeader/index.tsx
@@ -2,7 +2,6 @@ import React, { FunctionComponent, useState, useEffect, useRef } from 'react';
 import Icon from '../../../Icon/Icon';
 import type { Store } from '../../state';
 import { TranslatableStrings } from '../../main';
-import { IS_IE11 } from '../../../../config/wagtailConfig';
 
 import { Author } from '../../state/comments';
 
@@ -12,43 +11,6 @@ const dateOptions: Intl.DateTimeFormatOptions | any = {
 };
 const dateTimeFormat = new Intl.DateTimeFormat([], dateOptions);
 
-// Details/Summary components that just become <details>/<summary> tags
-// except for IE11 where they become <div> tags to allow us to style them
-const Details: React.FunctionComponent<
-  React.ComponentPropsWithoutRef<'details'>
-> = ({ children, open, ...extraProps }) => {
-  if (IS_IE11) {
-    return (
-      <div
-        className={'details-fallback' + (open ? ' details-fallback--open' : '')}
-        {...extraProps}
-      >
-        {children}
-      </div>
-    );
-  }
-
-  return (
-    <details open={open} {...extraProps}>
-      {children}
-    </details>
-  );
-};
-
-const Summary: React.FunctionComponent<
-  React.ComponentPropsWithoutRef<'summary'>
-> = ({ children, ...extraProps }) => {
-  if (IS_IE11) {
-    return (
-      <button className="details-fallback__summary" {...extraProps}>
-        {children}
-      </button>
-    );
-  }
-
-  return <summary {...extraProps}>{children}</summary>;
-};
-
 interface CommentReply {
   author: Author | null;
   date: number;
@@ -149,8 +111,8 @@ export const CommentHeader: FunctionComponent<CommentHeaderProps> = ({
             className="comment-header__action comment-header__action--more"
             ref={menuContainerRef}
           >
-            <Details open={menuOpen} onClick={toggleMenu}>
-              <Summary
+            <details open={menuOpen} onClick={toggleMenu}>
+              <summary
                 aria-label={strings.MORE_ACTIONS}
                 aria-haspopup="menu"
                 role="button"
@@ -158,7 +120,7 @@ export const CommentHeader: FunctionComponent<CommentHeaderProps> = ({
                 aria-expanded={menuOpen}
               >
                 <Icon name="ellipsis-v" />
-              </Summary>
+              </summary>
 
               <div
                 className="comment-header__more-actions"
@@ -185,7 +147,7 @@ export const CommentHeader: FunctionComponent<CommentHeaderProps> = ({
                   </button>
                 )}
               </div>
-            </Details>
+            </details>
           </div>
         )}
       </div>