Sort order: Use unicode characters instead of svg icons (#56833)

Co-authored-by: Andrew Hayward <andrew.hayward@automattic.com>
WordPress · Jan 4, 2024 · f0fd026 · f0fd026
1 parent c277643
commit f0fd026
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -118,6 +118,19 @@
 			padding-bottom: $grid-unit-05;
 		}
 	}
+
+	.dataviews-table-header-button {
+		padding: 0;
+		gap: $grid-unit-05;
+
+		span {
+			speak: none;
+
+			&:empty {
+				display: none;
+			}
+		}
+	}
 }
 
 .dataviews-grid-view {

diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
@@ -4,8 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 import {
-	chevronDown,
-	chevronUp,
 	unseen,
 	check,
 	arrowUp,
@@ -40,7 +38,7 @@ const sortingItemsInfo = {
 	asc: { icon: arrowUp, label: __( 'Sort ascending' ) },
 	desc: { icon: arrowDown, label: __( 'Sort descending' ) },
 };
-const sortIcons = { asc: chevronUp, desc: chevronDown };
+const sortArrows = { asc: '↑', desc: '↓' };
 
 function HeaderMenu( { field, view, onChangeView } ) {
 	const isSortable = field.enableSorting !== false;
@@ -92,12 +90,17 @@ function HeaderMenu( { field, view, onChangeView } ) {
 			align="start"
 			trigger={
 				<Button
-					icon={ isSorted && sortIcons[ view.sort.direction ] }
-					iconPosition="right"
-					text={ field.header }
-					style={ { padding: 0 } }
 					size="compact"
-				/>
+					className="dataviews-table-header-button"
+					style={ { padding: 0 } }
+				>
+					{ field.header }
+					{ isSorted && (
+						<span aria-hidden="true">
+							{ isSorted && sortArrows[ view.sort.direction ] }
+						</span>
+					) }
+				</Button>
 			}
 		>
 			<WithSeparators>