Increased contrast in table block for a11y reasons (#6333)

plone · Sep 27, 2024 · 47886f8 · 47886f8
1 parent d81a0d3
commit 47886f8
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git a/packages/volto/cypress/tests/core/blocks/blocks-table.js b/packages/volto/cypress/tests/core/blocks/blocks-table.js
@@ -29,7 +29,7 @@ describe('Table Block Tests', () => {
     cy.get('.block-editor-slateTable [role=textbox]')
       .first()
       .click()
-      .should('have.css', 'outline', 'rgb(135, 143, 147) none 0px');
+      .should('have.css', 'outline', 'rgba(0, 0, 0, 0.87) none 0px');
 
     cy.get(
       '.celled.fixed.table thead tr th:first-child() [contenteditable="true"]',

diff --git a/packages/volto/news/2487.bugfix b/packages/volto/news/2487.bugfix
@@ -0,0 +1 @@
+Increase specificity of table header style selector to properly override colors for better contrast @jackahl
diff --git a/packages/volto/news/6334.bugfix b/packages/volto/news/6334.bugfix
@@ -0,0 +1 @@
+Use lighter blue as link color in inverted tables to improve contrast for a11y @jackahl
diff --git a/packages/volto/theme/themes/pastanaga/collections/table.overrides b/packages/volto/theme/themes/pastanaga/collections/table.overrides
@@ -6,7 +6,7 @@
 }
 
 /* Headers */
-.ui.table th {
+.ui.table thead th {
   padding: @headerVerticalPadding @headerHorizontalPadding;
   border-left: @headerDivider;
   background: @headerBackground;
@@ -34,3 +34,8 @@
 .ui.table tr:first-child > th:only-child {
   border-radius: @borderRadius @borderRadius 0em 0em;
 }
+
+/* inline link color*/
+.ui.table.inverted a {
+  color: @lightPrimaryColor;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Increase specificity of table header style selector to properly override colors for better contrast @jackahl
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Use lighter blue as link color in inverted tables to improve contrast for a11y @jackahl