From 3e809cfbdf8fcec3a04bec0c957381952d5e865d Mon Sep 17 00:00:00 2001 From: Shawn Date: Tue, 8 Oct 2024 11:00:00 -0600 Subject: [PATCH] Replace sort 'buttons' with spans The interactive part of sorting is the entire heading, but by using the 'button' tag for the sort direction arrows indicates to screen readers that the arrows themselves are the interactive content. Not only is this bad practice, but the arrows we are using in Grid.js are below the minimum size requirements for WCAG standard 2.5.8 - 24x24 pixels. By changing the indicators from buttons to spans, we stick to the best practice and avoid the WCAG violation with miniscule changes to the code and no conflicts. --- src/theme/mermaid/sort.scss | 2 +- src/view/plugin/sort/sort.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/theme/mermaid/sort.scss b/src/theme/mermaid/sort.scss index 15edcdee..171f6a53 100644 --- a/src/theme/mermaid/sort.scss +++ b/src/theme/mermaid/sort.scss @@ -1,4 +1,4 @@ -button.gridjs { +span.gridjs { &-sort { float: right; height: 24px; diff --git a/src/view/plugin/sort/sort.tsx b/src/view/plugin/sort/sort.tsx index 0b54e144..4bef056d 100644 --- a/src/view/plugin/sort/sort.tsx +++ b/src/view/plugin/sort/sort.tsx @@ -142,7 +142,7 @@ export function Sort( }; return ( -