From 033ec767e30c4cc52dc9c69f53186280ee34ee89 Mon Sep 17 00:00:00 2001
From: Simon Rapilly <85184231+srapilly@users.noreply.github.com>
Date: Tue, 31 Oct 2023 22:20:03 +0000
Subject: [PATCH] Use button instead of details/summary

---
 .../mastodon/features/about/index.jsx         | 19 +++++++++++--------
 .../styles/mastodon/components.scss           |  7 ++-----
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/javascript/mastodon/features/about/index.jsx b/app/javascript/mastodon/features/about/index.jsx
index 0d83da71dcf..239fea1933c 100644
--- a/app/javascript/mastodon/features/about/index.jsx
+++ b/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>
     );
   }
 
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 02a038dfc78..1e71b504447 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/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 {