fix: code review suggestions contd

eBay · Nov 22, 2024 · 671b78d · 671b78d
1 parent 1dcb309
commit 671b78d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/dist/accordion/accordion.css b/dist/accordion/accordion.css
@@ -1,9 +1,11 @@
 ul.accordion {
-    list-style: none;
     margin: 0;
     padding: 0;
     width: 100%;
 }
+ul.accordion ::marker {
+    font-size: 0;
+}
 
 ul.accordion li:not(:last-child) {
     border-bottom: 1px solid var(--color-stroke-subtle);
@@ -31,9 +33,6 @@ ul.accordion details .details__content {
 ul.accordion details[open] .details__content {
     opacity: 1;
     transform: scaleY(1);
-    transition:
-        opacity 0.25s cubic-bezier(0.3, 0, 0, 1),
-        transform 0.25s cubic-bezier(0.3, 0, 0, 1);
 }
 
 ul.accordion--large summary.details__summary {

diff --git a/src/sass/accordion/accordion.scss b/src/sass/accordion/accordion.scss
@@ -2,12 +2,18 @@
 @import "../mixins/private/token-mixins";
 
 ul.accordion {
-    list-style: none;
     margin: 0;
     padding: 0;
     width: 100%;
 }
 
+/*
+Safari does not recognize ordered or unordered lists as lists in the accessibility tree if they have a list-style value of none, unless the list is nested within the <nav> navigation element. This behavior is intentional and is not considered a bug. To work around this issue, use the use ::marker.
+*/
+ul.accordion ::marker {
+    font-size: 0;
+}
+
 ul.accordion li:not(:last-child) {
     border-bottom: 1px solid var(--color-stroke-subtle);
 }
@@ -34,9 +40,6 @@ ul.accordion details .details__content {
 ul.accordion details[open] .details__content {
     opacity: 1;
     transform: scaleY(1);
-    transition:
-        opacity 250ms cubic-bezier(0.3, 0, 0, 1),
-        transform 250ms cubic-bezier(0.3, 0, 0, 1);
 }
 
 ul.accordion--large summary.details__summary {