Skip to content

Fix: accessible sort button in a list table#382

Merged
rami-elementor merged 2 commits into
core-betafrom
a11y-heading-cells
May 5, 2026
Merged

Fix: accessible sort button in a list table#382
rami-elementor merged 2 commits into
core-betafrom
a11y-heading-cells

Conversation

@rami-elementor
Copy link
Copy Markdown
Contributor

Replace <a href="#"> with a <button>.

@rami-elementor rami-elementor requested a review from a team May 5, 2026 06:52
@sheabunge
Copy link
Copy Markdown
Member

Would this be better kept as a link if we change the sorting variables to sync with query vars, and link it to an actual URL like &order-by=etc?

@rami-elementor
Copy link
Copy Markdown
Contributor Author

Yes but we will have to restructure the entire link logic, currently we have one link for sorting, we will have to create two links for each heading (ASC, DESC). I think it's an over kill.

Besides, the sorting operation is not an external link, it's an action on a table on an existing page. I prefer to keep it as a button.

Copy link
Copy Markdown
Contributor

@louiswol94 louiswol94 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR is sound and merge-worthy as an accessibility and semantics fix. And real URLs as a larger follow-up.

Comment thread src/css/manage/_snippets-table.scss
border: none;
background: none;
font: inherit;
color: #2271b1;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you sure about the hard coded color #2271b1?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I'm sure. It's our $accent color. We use this color in multiple places.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So why not use the varable $accent?

@rami-elementor rami-elementor merged commit 9975bb0 into core-beta May 5, 2026
8 checks passed
@rami-elementor rami-elementor deleted the a11y-heading-cells branch May 5, 2026 19:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants