Skip to content

Commit

Permalink
Make tables accessible at high zoom levels (#16324)
Browse files Browse the repository at this point in the history 
* Make top bar and tables accessible when zoomed in

* Change word-break to IE-compatible value.

* Fix failing tests

* Fix collapsing floated tables.

* Add deprecated.

* Fix overflow issue

* Undo header changes that moved to another PR.

* Word wrapping on fixed width and aligned tables.

* Add fixture for table block deprecation.

* Fix striped table styles.

* Change wrapper to figure.

* Address PR comments.

* Fix failing tests.
  • Loading branch information
@tellthemachines
tellthemachines authored Jul 9, 2019
1 parent 779a916 commit 105cb47
Show file tree
Hide file tree
Showing 30 changed files with 332 additions and 50 deletions.
81 changes: 81 additions & 0 deletions packages/block-library/src/table/deprecated.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { RichText, getColorClassName } from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import metadata from './block.json';

const supports = {
align: true,
};

const deprecated = [
{
attributes: metadata.attributes,
supports,
save( { attributes } ) {
const {
hasFixedLayout,
head,
body,
foot,
backgroundColor,
} = attributes;
const isEmpty = ! head.length && ! body.length && ! foot.length;

if ( isEmpty ) {
return null;
}

const backgroundClass = getColorClassName( 'background-color', backgroundColor );

const classes = classnames( backgroundClass, {
'has-fixed-layout': hasFixedLayout,
'has-background': !! backgroundClass,
} );

const Section = ( { type, rows } ) => {
if ( ! rows.length ) {
return null;
}

const Tag = `t${ type }`;

return (
<Tag>
{ rows.map( ( { cells }, rowIndex ) => (
<tr key={ rowIndex }>
{ cells.map( ( { content, tag, scope }, cellIndex ) =>
<RichText.Content
tagName={ tag }
value={ content }
key={ cellIndex }
scope={ tag === 'th' ? scope : undefined }
/>
) }
</tr>
) ) }
</Tag>
);
};

return (
<table className={ classes }>
<Section type="head" rows={ head } />
<Section type="body" rows={ body } />
<Section type="foot" rows={ foot } />
</table>
);
},
},
];

export default deprecated;
14 changes: 8 additions & 6 deletions packages/block-library/src/table/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,7 @@ export class TableEdit extends Component {
);
}

const classes = classnames( className, backgroundColor.class, {
const tableClasses = classnames( backgroundColor.class, {
'has-fixed-layout': hasFixedLayout,
'has-background': !! backgroundColor.color,
} );
Expand Down Expand Up @@ -499,11 +499,13 @@ export class TableEdit extends Component {
] }
/>
</InspectorControls>
<table className={ classes }>
<Section type="head" rows={ head } />
<Section type="body" rows={ body } />
<Section type="foot" rows={ foot } />
</table>
<figure className={ className }>
<table className={ tableClasses }>
<Section type="head" rows={ head } />
<Section type="body" rows={ body } />
<Section type="foot" rows={ foot } />
</table>
</figure>
</>
);
}
Expand Down
11 changes: 10 additions & 1 deletion packages/block-library/src/table/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,17 @@
&[data-align="left"],
&[data-align="right"],
&[data-align="center"] {
// Stop table block from collapsing when tables are floated.
height: auto;

table {
// Ensure the table element is not full-width when aligned.
width: auto;
}
td,
th {
word-break: break-all;
}
}

&[data-align="center"] {
Expand All @@ -19,9 +26,11 @@


.wp-block-table {
// Remove default <figure> style.
margin: 0;

table {
border-collapse: collapse;
width: 100%;
}

td,
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/table/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { __, _x } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import deprecated from './deprecated';
import edit from './edit';
import icon from './icon';
import metadata from './block.json';
Expand All @@ -30,4 +31,5 @@ export const settings = {
transforms,
edit,
save,
deprecated,
};
12 changes: 7 additions & 5 deletions packages/block-library/src/table/save.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,12 @@ export default function save( { attributes } ) {
};

return (
<table className={ classes }>
<Section type="head" rows={ head } />
<Section type="body" rows={ body } />
<Section type="foot" rows={ foot } />
</table>
<figure>
<table className={ classes }>
<Section type="head" rows={ head } />
<Section type="body" rows={ body } />
<Section type="foot" rows={ foot } />
</table>
</figure>
);
}
28 changes: 22 additions & 6 deletions packages/block-library/src/table/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,21 @@
$subtle-pale-blue: #e7f5fe;
$subtle-pale-pink: #fcf0ef;

overflow-x: auto;

table {
width: 100%;
}

// Fixed layout toggle
&.has-fixed-layout {
.has-fixed-layout {
table-layout: fixed;
width: 100%;

td,
th {
word-break: break-all;
}
}

&.alignleft,
Expand All @@ -17,25 +28,30 @@
// The table element needs to be kept as display table
// for table features to work reliably.
display: table;

// Table cannot be 100% width if it is aligned, so set
// width as auto.
width: auto;

td,
th {
// Aligned tables shouldn't scroll horizontally so we need their contents to wrap.
word-break: break-all;
}
}

&.has-subtle-light-gray-background-color {
.has-subtle-light-gray-background-color {
background-color: $subtle-light-gray;
}

&.has-subtle-pale-green-background-color {
.has-subtle-pale-green-background-color {
background-color: $subtle-pale-green;
}

&.has-subtle-pale-blue-background-color {
.has-subtle-pale-blue-background-color {
background-color: $subtle-pale-blue;
}

&.has-subtle-pale-pink-background-color {
.has-subtle-pale-pink-background-color {
background-color: $subtle-pale-pink;
}

Expand Down
4 changes: 1 addition & 3 deletions packages/block-library/src/table/theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
.wp-block-table {
width: 100%;
min-width: $break-mobile / 2;
border-collapse: collapse;

td,
th {
padding: 0.5em;
border: 1px solid;
word-break: break-all;
word-break: normal;
}
}
2 changes: 1 addition & 1 deletion packages/e2e-tests/fixtures/blocks/core__table.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:core/table -->
<table class="wp-block-table"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table>
<figure class="wp-block-table"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>
<!-- /wp:core/table -->
2 changes: 1 addition & 1 deletion packages/e2e-tests/fixtures/blocks/core__table.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,6 @@
"foot": []
},
"innerBlocks": [],
"originalContent": "<table class=\"wp-block-table\"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table>"
"originalContent": "<figure class=\"wp-block-table\"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>"
}
]
4 changes: 2 additions & 2 deletions packages/e2e-tests/fixtures/blocks/core__table.parsed.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
"blockName": "core/table",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n<table class=\"wp-block-table\"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table>\n",
"innerHTML": "\n<figure class=\"wp-block-table\"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>\n",
"innerContent": [
"\n<table class=\"wp-block-table\"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table>\n"
"\n<figure class=\"wp-block-table\"><table><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>\n"
]
},
{
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/fixtures/blocks/core__table.serialized.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- wp:table -->
<table class="wp-block-table"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table>
<figure class="wp-block-table"><table class=""><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>…</td><td>…</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table></figure>
<!-- /wp:table -->
3 changes: 3 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__table__deprecated-1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:core/table -->
<table class="wp-block-table"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href="https://wordpress.org/news/2003/05/wordpress-now-available/">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href="https://wordpress.org/news/2004/01/wordpress-10/">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href="https://codex.wordpress.org/WordPress_Versions">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href="https://wordpress.org/news/2015/12/clifford/">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href="https://wordpress.org/news/2016/04/coleman/">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/08/pepper/">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href="https://wordpress.org/news/2016/12/vaughan/">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table>
<!-- /wp:core/table -->
Loading

1 comment on commit 105cb47

@thomashigginbotham
Copy link

Choose a reason for hiding this comment

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

Why was the table element wrapped in a figure element? A figure is something that should be referenced from the main content, and there's no way the Table block could know if that's the case, so it seems safer to err on the side of it not being a figure.

I came across this issue when I discovered a bug in iOS 12. When the table is wider and taller than the viewport and the figure is inside a wrapper element with its own overflow settings, it becomes impossible to scroll past the table. There are a significant number of users on iOS 12 (> 10%).

A more accessible alternative would be to use a caption element inside the table. However, I'd like to understand the reasoning and ramifications regarding the use of the figure element.

Please sign in to comment.