Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix accessibility scan failures #425

Merged
merged 8 commits into from
Dec 13, 2023
+66 −22
Merged

Fix accessibility scan failures #425

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
436e836
Add labels to user note textareas
adamwoodnz Dec 5, 2023
88565dd
Fix contrast issues with code reference title labels
adamwoodnz Dec 5, 2023
f95f136
Create semantic colors palette
adamwoodnz Dec 11, 2023
d133e25
Use semantic colors for code titles
adamwoodnz Dec 11, 2023
8e61474
Fix contrast issues with Command GitHub UI
adamwoodnz Dec 11, 2023
9c8e048
Replace sass semantics colors with theme vars
adamwoodnz Dec 11, 2023
653386d
Add code title type chip background colors to theme vars
adamwoodnz Dec 11, 2023
ec82acf
Remove syntax yellow from color palette
adamwoodnz Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions source/wp-content/themes/wporg-developer-2023/inc/user-content.php
View file
Original file line number Diff line number Diff line change
@@ -298,6 +298,7 @@ public static function wp_editor_comments( $comment = false ) {
echo "<ul class='tablist' style='display: none;'>";
echo '<li><a href="#comment-form-comment">' . __( 'Write', 'wporg' ) . '</a></li>';
echo '<li><a href="#comment-preview">' . __( 'Preview', 'wporg' ) . '</a></li></ul>';
echo '<label class="screen-reader-text" for="comment">' . esc_html__( 'Note', 'wporg' ) . '</label>';
}

echo '<div class="comment-form-comment tab-section" id="comment-form-comment">';
@@ -379,6 +380,11 @@ public static function wp_editor_feedback( $comment, $display = 'show', $edit =
ob_start();
echo "<div id='feedback-editor-{$comment_id}' class='feedback-editor{$class}'{$display}>\n";
echo "<form id='feedback-form-{$instance}{$form_type}' class='feedback-form' method='post' action='{$action}' name='feedback-form-{$instance}'>\n";
printf(
"<label class='screen-reader-text' for='feedback-comment-%s'>%s</label>",
esc_attr( $instance ),
esc_html__( 'Feedback', 'wporg' ),
);
wp_editor( $content, 'feedback-comment-' . $instance, array(
'media_buttons' => false,
'textarea_name' => 'comment',
20 changes: 11 additions & 9 deletions source/wp-content/themes/wporg-developer-2023/src/code-short-title/style.scss
View file
Original file line number Diff line number Diff line change
@@ -29,7 +29,6 @@
border-radius: 2px;
margin-right: 8px;
padding: 2px 8px;
font-size: var(--wp--preset--font-size--small);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Size is already small

font-weight: 500;
word-break: keep-all;
}
@@ -53,43 +52,46 @@
.function {
&.wp-block-wporg-code-short-title,
a {
color: #008a20;
color: var(--wp--custom--wporg-code-short-title--color--function);
}

.wp-block-wporg-code-short-title__type {
background: rgba(0, 138, 32, 0.1);
color: var(--wp--custom--wporg-code-short-title--color--function-type);
background: var(--wp--custom--wporg-code-short-title--background-color--function-type);
}
}

.hook {
&.wp-block-wporg-code-short-title,
a {
color: #d63638;
color: var(--wp--custom--wporg-code-short-title--color--hook);
}

.wp-block-wporg-code-short-title__type {
background: rgba(214, 54, 56, 0.1);
color: var(--wp--custom--wporg-code-short-title--color--hook-type);
background: var(--wp--custom--wporg-code-short-title--background-color--hook-type);
}
}

.class {
&.wp-block-wporg-code-short-title,
a {
color: #bd8600;
color: var(--wp--custom--wporg-code-short-title--color--class);
}

.wp-block-wporg-code-short-title__type {
background: rgba(189, 134, 0, 0.05);
color: var(--wp--custom--wporg-code-short-title--color--class-type);
background: var(--wp--custom--wporg-code-short-title--background-color--class-type);
}
}

.method {
&.wp-block-wporg-code-short-title,
a {
color: #135e96;
color: var(--wp--custom--wporg-code-short-title--color--method);
}

.wp-block-wporg-code-short-title__type {
background: rgba(19, 94, 150, 0.1);
background: var(--wp--custom--wporg-code-short-title--background-color--method-type);
}
}
4 changes: 2 additions & 2 deletions source/wp-content/themes/wporg-developer-2023/src/command-github/style.scss
View file
Original file line number Diff line number Diff line change
@@ -37,11 +37,11 @@
}

.green {
color: var(--wp--preset--color--syntax-green);
color: var(--wp--custom--wporg-command-github--color--open);
}

.red {
color: var(--wp--preset--color--syntax-red);
color: var(--wp--custom--wporg-command-github--color--closed);
}

@media screen and (min-width: 380px) {
58 changes: 47 additions & 11 deletions source/wp-content/themes/wporg-developer-2023/theme.json
View file
Original file line number Diff line number Diff line change
@@ -13,36 +13,49 @@
"slug": "linen",
"color": "#fbfaf7",
"name": "Linen"

},
{
"slug": "syntax-black",
"color": "#000000",
"name": "Black"
"color": "var(--wp--preset--color--black)",
"name": "Syntax Black"
},
{
"slug": "syntax-red",
"color": "#d63638",
"name": "Red"
"color": "var(--wp--custom--color--red-50)",
"name": "Syntax Red"
},
{
"slug": "syntax-green",
"color": "#008a20",
"name": "Green"
"color": "var(--wp--custom--color--green-50)",
"name": "Syntax Green"
},
{
"slug": "syntax-blue",
"color": "#135e96",
"name": "Blue"
"color": "var(--wp--custom--color--blue-60)",
"name": "Syntax Blue"
},
{
"slug": "syntax-grey",
"color": "#646970",
"name": "Grey"
"color": "var(--wp--custom--color--grey-50)",
"name": "Syntax Grey"
}
]
},
"custom": {
"color": {
Copy link
Contributor Author

@adamwoodnz adamwoodnz Dec 11, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Colors picked from existing sass palette which is unused in the new theme.

Only adding what we need for now.

Adding to custom means they are available for semantic colors in blocks but don't show in the editor palette.

"blue-60": "#135e96",
"blue-60-alpha-10": "#135e9619",
"green-50": "#008a20",
"green-50-alpha-5": "#008a200C",
"green-60": "#007017",
"grey-50": "#646970",
"red-50": "#d63638",
"red-50-alpha-5": "#d636380C",
"red-60": "#b32d2e",
"yellow-40": "#bd8600",
"yellow-40-alpha-5": "#bd86000C",
"yellow-50": "#996800"
},
"heading": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--ibm-plex-sans)",
@@ -151,6 +164,29 @@
"top": "150px"
}
}
},
"wporg-command-github": {
"color": {
"open": "var(--wp--custom--color--green-60)",
"closed": "var(--wp--custom--color--red-60)"
}
},
"wporg-code-short-title": {
"color": {
"class": "var(--wp--custom--color--yellow-40)",
"class-type": "var(--wp--custom--color--yellow-50)",
"function": "var(--wp--custom--color--green-50)",
"function-type": "var(--wp--custom--color--green-60)",
"hook": "var(--wp--custom--color--red-50)",
"hook-type": "var(--wp--custom--color--red-60)",
"method": "var(--wp--custom--color--blue-60)"
},
"background-color": {
"class-type": "var(--wp--custom--color--yellow-40-alpha-5)",
"function-type": "var(--wp--custom--color--green-50-alpha-5)",
"hook-type": "var(--wp--custom--color--red-50-alpha-5)",
"method-type": "var(--wp--custom--color--blue-60-alpha-10)"
}
}
},
"typography": {