Make tables accessible at high zoom levels #16324

tellthemachines · 2019-06-27T07:26:13Z

Description

Partially fixes #15346

In order for wide tables to be scrollable at small breakpoints and/or high zoom levels, I have added a <div> wrapper to the table block markup, setting its overflow to auto.

How has this been tested?

Tested at high zoom levels on Chrome, Firefox, Safari (Mac) and IE (Windows 7 and 10).

Screenshots

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

talldan · 2019-06-27T11:20:53Z

I know similar ideas to this have been previously explored (cc @jasmussen @mtias) without much success, and we'd really wanted to avoid the wrapper, but it does seem like it might be the only option.

Just summarising some of the positives and negatives of the wrapping div:

Pros:

Solves accessibility/usability issues at a higher zoom level.
Reduces text wrapping.
Allows users to create bigger, more complex tables.

Cons:

The markup produced by the block's save function isn't as clean.
The change in markup might affect themes?
Encourages use of big tables.
The scroll area obscures table content.

Looking at some other products:

Google Docs: Wraps text avoiding a scrollable area (but that makes sense for paper documents)
Dropbox Paper: Uses a scrollable area like this PR

talldan · 2019-06-27T11:32:40Z

packages/block-library/src/table/style.scss

 	// Fixed layout toggle
-	&.has-fixed-layout {
+	.has-fixed-layout {


Seeing some inconsistencies between the editor and the post when it comes to the fixed layout. The editor seems to wrap long text, but when viewing the post text isn't wrapped.

talldan · 2019-06-27T11:39:04Z

packages/block-library/src/table/deprecated.js

+	align: true,
+};
+
+const deprecated = [


Would be great to add a test fixture for this deprecation. There are some examples of them in the folder with the fixtures (some have __deprecated in the filename):
https://github.com/WordPress/gutenberg/tree/master/packages/e2e-tests/fixtures/blocks

It should just be a matter of grabbing the block HTML from master (including the comment delimeters) and pasting it into a new html file, then regenerating the fixtures. If the deprecation works it'll output a valid block.

Done, thanks for the reminder!

tellthemachines · 2019-07-01T05:58:40Z

Re some of @talldan 's pros and cons:

The change in markup might affect themes?

Encourages use of big tables.

The scroll area obscures table content.

I checked a few themes (arguably a next to useless endeavour given the amount out there...) and didn't find any problems. But it'll only take someone going table.wp-block-table for this to go bang. Is there any procedure around changes that can potentially affect themes?
But big tables are good! Haha I'm not sure we should be prescriptive about user content though 🤔
The scrollbar should be a clear enough indicator that there's more content to be seen by scrolling. Or am I missing something?

Overall, I'm still for making this change as in my opinion the usability benefits outweigh the costs. But look forward to hearing further discussion points 🙂

ellatrix · 2019-07-04T21:28:56Z

packages/block-library/src/table/edit.js

-					<Section type="body" rows={ body } />
-					<Section type="foot" rows={ foot } />
-				</table>
+				<div className={ className }>


How about changing this to <figure>, so the markup is clean, we can allow a caption, and it's the same as all our other media/figure blocks? Cc @talldan.

ellatrix · 2019-07-04T21:40:31Z

Hi @tellthemachines!

I don't really mind the changes here, it makes sense to support big tables and it looks good after a quick test. If we need a wrapping element, I think it should be figure, as we'd add that regardless at some point.

ellatrix · 2019-07-05T06:39:55Z

packages/block-library/src/table/deprecated.js

+ */
+import { RichText, getColorClassName } from '@wordpress/block-editor';
+
+const blockAttributes = {


We're only adding a wrapper element right? Can't we share this attribute definition between files?

Yes, thanks for pointing that out. Done!

ellatrix · 2019-07-05T06:41:31Z

packages/block-library/src/table/style.scss

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


Why is this needed? Does it deserve a comment?

Assuming we don't want tables to horizontally scroll when they are aligned, we need table content to break. Added comment.

ellatrix

Looks good. Feedback on above comments would be nice. Looks like e2e and unit tests also need to be updated.

afercia · 2019-07-09T12:45:57Z

@tellthemachines thanks for working on this, works great! 🙂

A while ago, we've implemented a similar solution at Yoast, with some additional visual improvements. I'm not saying those are necessarily good for Gutenberg, but I'd like to hear your thoughts and have some design feedback /Cc @mapk. Conversation can continue also on closed issues/PRs 🙂 and if the proposed improvements get some consensus I'd like to open a follow-up issue.

Basically, in our implementation we're trying to solve a few issues:

most operating systems don't display scrollbars by default: users may not understand the table is scrollable so we added a visual hint (hidden from assistive technologies with aria-hidden="true")
added a box-shadow on the right as additional visual hint
added some bottom padding to the table wrapper so that the horizontal scrollbar doesn't hide the table content

All these three things kick in only when there's not enough space to display the table entirely so there's some width/viewport JS calculation running behind the scenes.

Screenshots:

The table while scrolling horizontally and the scrollbar becomes visible:

When there's enough space, all the visual indicators are not displayed:

Any thoughts more than welcome!

afercia · 2019-07-09T13:12:32Z

packages/block-library/src/table/style.scss

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


talldan · 2019-07-19T04:21:15Z

@afercia Just doing some table block triage, and there is an issue covering your suggestion:
#8401

afercia · 2019-07-19T06:32:27Z

@talldan thanks, will comment there!

tellthemachines requested review from aduth, ajitbohra, gziolo, jorgefilipecosta, nerrad, notnownikki, ntwb, Soean, talldan and youknowriad as code owners June 27, 2019 07:26

talldan reviewed Jun 27, 2019

View reviewed changes

tellthemachines force-pushed the fix/Content-reflow-on-page-zoom branch from b28525d to d909d6a Compare July 1, 2019 00:51

tellthemachines requested a review from talldan July 2, 2019 00:20

ellatrix reviewed Jul 4, 2019

View reviewed changes

tellthemachines requested a review from ellatrix July 5, 2019 05:11

ellatrix reviewed Jul 5, 2019

View reviewed changes

ellatrix approved these changes Jul 5, 2019

View reviewed changes

tellthemachines added 3 commits July 8, 2019 10:36

Make top bar and tables accessible when zoomed in

59f5581

Change word-break to IE-compatible value.

1568a29

Fix failing tests

c63d77b

tellthemachines added 9 commits July 8, 2019 10:36

Fix collapsing floated tables.

d70a446

Add deprecated.

7bc57f9

Fix overflow issue

0331420

Undo header changes that moved to another PR.

c42a622

Word wrapping on fixed width and aligned tables.

fc5b4f7

Add fixture for table block deprecation.

1d54bf2

Fix striped table styles.

caf8d1c

Change wrapper to figure.

d0b7651

Address PR comments.

f8d31dc

tellthemachines force-pushed the fix/Content-reflow-on-page-zoom branch from e09783f to f8d31dc Compare July 8, 2019 00:37

Fix failing tests.

7519de8

tellthemachines merged commit 105cb47 into master Jul 9, 2019

tellthemachines deleted the fix/Content-reflow-on-page-zoom branch July 9, 2019 00:50

afercia reviewed Jul 9, 2019

View reviewed changes

talldan mentioned this pull request Jul 10, 2019

Add table block caption #15554

Merged

5 tasks

talldan added the [Block] Table Affects the Table Block label Jul 19, 2019

talldan added this to Done in Table block Jul 19, 2019

talldan assigned tellthemachines Jul 19, 2019

afercia mentioned this pull request Jul 19, 2019

Table Block: Scrolling is not evident when a browser/device hides scrollbars. #8401

Open

youknowriad added this to the Gutenberg 6.2 milestone Jul 26, 2019

swissspidy mentioned this pull request Sep 25, 2019

Please Stop Changing the HTML Markup of a block #17509

Closed

SeanMcMillan mentioned this pull request Jul 1, 2020

Make wrapping tables in figure tags optional #23617

Closed

talldan mentioned this pull request Jul 31, 2020

Finish resolving accessibility issues with Table Block #24205

Open

priethor removed the [a11y] Zooming label Jul 24, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make tables accessible at high zoom levels #16324

Make tables accessible at high zoom levels #16324

tellthemachines commented Jun 27, 2019 •

edited

talldan commented Jun 27, 2019

talldan Jun 27, 2019

tellthemachines Jul 1, 2019

talldan Jun 27, 2019 •

edited

tellthemachines Jul 1, 2019

tellthemachines commented Jul 1, 2019

ellatrix Jul 4, 2019

tellthemachines Jul 5, 2019

ellatrix commented Jul 4, 2019

ellatrix Jul 5, 2019

tellthemachines Jul 9, 2019

ellatrix Jul 5, 2019

tellthemachines Jul 9, 2019

ellatrix left a comment •

edited

afercia commented Jul 9, 2019 •

edited

afercia Jul 9, 2019

talldan commented Jul 19, 2019

afercia commented Jul 19, 2019

Make tables accessible at high zoom levels #16324

Make tables accessible at high zoom levels #16324

Conversation

tellthemachines commented Jun 27, 2019 • edited

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

talldan commented Jun 27, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan Jun 27, 2019 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tellthemachines commented Jul 1, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ellatrix commented Jul 4, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ellatrix left a comment • edited

Choose a reason for hiding this comment

afercia commented Jul 9, 2019 • edited

Choose a reason for hiding this comment

talldan commented Jul 19, 2019

afercia commented Jul 19, 2019

tellthemachines commented Jun 27, 2019 •

edited

talldan Jun 27, 2019 •

edited

ellatrix left a comment •

edited

afercia commented Jul 9, 2019 •

edited