Use button instead of details/summary

app/javascript/mastodon/features/about/index.jsx

@@ -62,10 +62,11 @@ class Section extends PureComponent {
     collapsed: !this.props.open,
   };
 
-  handleClick = (e) => {
+  handleClick = () => {
     const { onOpen } = this.props;
-    
-    this.setState({ collapsed: !e.currentTarget.open }, () => onOpen && onOpen());
+    const { collapsed } = this.state;
+
+    this.setState({ collapsed: !collapsed }, () => onOpen && onOpen());
   };
 
   render () {
@@ -73,13 +74,15 @@ class Section extends PureComponent {
     const { collapsed } = this.state;
 
     return (
-      <details open={!collapsed} onToggle={this.handleClick} className={classNames('about__section', { active: !collapsed })}>
-        <summary className='about__section__title'>
+      <div className={classNames('about__section', { active: !collapsed })}>
+        <button aria-expanded={!collapsed} onClick={this.handleClick} className='about__section__title'>
           <Icon id={collapsed ? 'chevron-right' : 'chevron-down'} icon={collapsed ? ChevronRightIcon : ExpandMoreIcon} /> {title}
-        </summary>
+        </button>
 
-        <div className='about__section__body'>{children}</div>
-      </details>
+        {!collapsed && (
+          <div className='about__section__body'>{children}</div>
+        )}
+      </div>
     );
   }
 

app/javascript/styles/mastodon/components.scss

@@ -9146,11 +9146,8 @@ noscript {
       background: lighten($ui-base-color, 4%);
       color: $highlight-text-color;
       cursor: pointer;
-      list-style: none;
-    }
-
-    &__title::-webkit-details-marker {
-      display: none;
+      border: unset;
+      width: 100%;
     }
 
     &.active &__title {