Skip to content
This repository has been archived by the owner on Mar 9, 2024. It is now read-only.

Commit

Permalink
Update widgets.css to use native disclosure widget marker, but enlarged
Browse files Browse the repository at this point in the history
I have just read an article by Scott O'Hara (https://www.scottohara.me/blog/2022/09/12/details-summary.html), where he says that removing the native marker for the disclosure widget can cause accessibility problems because some assistive technology looks to the marker instead of the status of the `open` attribute to know whether the widget is open or not! Yes, it's completely crazy!

So this commit goes back to using the native marker but makes it bigger. Which, really, I suppose is what I should have done in the first place. I will submit a PR to make a similar change for the dashboard widgets, post metaboxes, and menu items that we've already included.
  • Loading branch information
KTS915 authored Oct 10, 2023
1 parent bd953ad commit 937fedf
Showing 1 changed file with 6 additions and 30 deletions.
36 changes: 6 additions & 30 deletions src/wp-admin/css/widgets.css
Original file line number Diff line number Diff line change
Expand Up @@ -42,25 +42,16 @@ summary.widget-title {
user-select: none;
}

summary.widget-title {
list-style: none;
.widget-title h3 {
padding-left: 5px;
}

summary.widget-title::before {
content: '\25B8';
summary.widget-title::marker,
summary.widget-title::-webkit-details-marker {
font-size: 1.4em;
cursor: pointer;
}

details[open] > summary.widget-title::before {
content: '\25BE';
}

/* Fix for Safari */
summary.widget-title::-webkit-details-marker {
display: none;
}

.widgets-holder-wrap .widget-inside {
border: 0;
border-top: 1px solid #c3c4c7;
Expand Down Expand Up @@ -379,29 +370,14 @@ summary.sidebar-name {
color: #1d2327;
font-size: 1.3em;
font-weight: 600;
list-style: none;
}

summary.sidebar-name::before {
content: '\25B8';
padding-right: 0.5em;
summary.sidebar-name::marker,
summary.sidebar-name::-webkit-details-marker {
font-size: 1.2em;
cursor: pointer;
}

#widgets-right .widgets-holder-wrap > details > summary.sidebar-name::before {
padding-right: 0.2em;
}

details[open] > summary.sidebar-name::before {
content: '\25BE';
}

/* Fix for Safari */
summary.sidebar-name::-webkit-details-marker {
display: none;
}

.widgets-holder-wrap .description {
padding: 0 0 15px;
margin: 0;
Expand Down

0 comments on commit 937fedf

Please sign in to comment.