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.

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: Change aria-label depending on content of paragraph block #11653

Merged
merged 2 commits into from Nov 9, 2018

Conversation

Projects
None yet
5 participants
@tofumatt
Member

tofumatt commented Nov 9, 2018

Fix issue introduced in #11560.

This only shows an aria-label for RichText blocks when they aren't empty. I think it's a start; let me know if that fixes the issue I introduced in #11560
#11560 (comment).

@tofumatt tofumatt added this to the 4.4 milestone Nov 9, 2018

@tofumatt tofumatt requested review from afercia and WordPress/gutenberg-core Nov 9, 2018

@afercia

This comment has been minimized.

Contributor

afercia commented Nov 9, 2018

Thanks @tofumatt
This actually renders an aria-label="false" where false is evaluated as a string and used as the attribute value.

screenshot 2018-11-09 at 08 49 10

Additionally, quoting from #1659:

The aria-label attribute works as a <label> element and gives a name to its control. So both when the Editable is empty or already filled up with content, screen readers will announce the Editable with the name given by the aria-label.

[sorry for my broken English]

the aria-label should identify what the Editable is. For a paragraph, it should say: Paragraph content or similar wording

The placeholder values:

are more "suggestions" that should go in a description (see #5981 (comment)). Instead, each editable field should be labelled to communicate what it is, as one would normally do for form fields.

@jasmussen

This comment has been minimized.

Contributor

jasmussen commented Nov 9, 2018

I added a followup comment on the phrasing in #11560 (comment) — if that phrasing was intentional, then I won't be the blocker. But if it was a typo or slightly unintentional, do you think you could lump in the phrasing change in this PR? Thanks Matt.

@youknowriad youknowriad modified the milestones: 4.4, 4.3 Nov 9, 2018

@youknowriad

This comment has been minimized.

Contributor

youknowriad commented Nov 9, 2018

I added to 4.3 as it's smallish we can get it quickly in.

@tofumatt tofumatt changed the title from fix: Only show aria-label when content is empty to fix: Change aria-label depending on content of paragraph block Nov 9, 2018

@tofumatt

This comment has been minimized.

Member

tofumatt commented Nov 9, 2018

I've updated the code to reflect the real state of this block; when empty it's functionally an empty block that by default accepts text to become a paragraph or the slash key to open the inserter.

Now the label instructs users what is there; when there is content: the label "Paragraph Block" is read. When there is no content: "Empty block; start writing or type forward slash to choose a block" is read.

I think that's a good solution for now.

I also tweaked the text as per @jasmussen's request.

@tofumatt tofumatt requested a review from jasmussen Nov 9, 2018

@jasmussen

Approving based on content of placeholder. Thanks so much for this, it's way better, and should pair nicely with #11659 which makes the text not wrap on mobile or in columns.

@mcsf

mcsf approved these changes Nov 9, 2018 edited

You may want to wait for a second (Joen beat me to it!) 👍, but this looks correct to me.

@mcsf mcsf added the Accessibility label Nov 9, 2018

@youknowriad youknowriad merged commit eba8b7f into master Nov 9, 2018

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@youknowriad youknowriad deleted the fix/11560-empty-block-label-bug branch Nov 9, 2018

grey-rsi pushed a commit to OnTheGoSystems/gutenberg that referenced this pull request Nov 22, 2018

fix: Change aria-label depending on content of paragraph block (WordP…
…ress#11653)

* fix: Only show aria-label when content is empty

Fix issue introduced in WordPress#11560

* Improve aria labels so they reflect state of block/empty block
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment