Skip to content

A11y: update icon for heading block#15462

Merged
frontdevde merged 1 commit intomasterfrom
update/heading-block-a11y-icon-change
May 17, 2019
Merged

A11y: update icon for heading block#15462
frontdevde merged 1 commit intomasterfrom
update/heading-block-a11y-icon-change

Conversation

@frontdevde
Copy link
Copy Markdown
Contributor

@frontdevde frontdevde commented May 6, 2019

Description

Fixes #15340

Issue description
The "Block Type" menu, and block editor type button, use icons for
each block, and in most cases these are good representations of the
block. However the "Heading" block type uses the letter "T", which
is potentially confusing, since "Heading" doesn't start with "T".

Remediation Guidance
Use the letter "H" as the icon for the Heading block type. This also
matches the other H icons used for setting the level (H2, H3, etc.).

Screenshots

Screen Shot 2019-05-06 at 16 09 56

Types of changes

  • change icon to heading
  • remove unused title icon

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.

@frontdevde frontdevde added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label May 6, 2019
@frontdevde frontdevde added the Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code label May 6, 2019
title: __( 'Heading' ),
description: __( 'Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.' ),
icon,
icon: 'heading',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I'm pretty sure this was done on purpose. Would be good to check the original reasons for using "T". I think it's related to i18n

Copy link
Copy Markdown
Contributor Author

@frontdevde frontdevde May 6, 2019

Choose a reason for hiding this comment

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

See #15340 (comment) and #15340 (comment). From what I understood in #15340 @mapk OK'd the change to H over T.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I do understand the "H" is not a i18n standard for Headings, but it does match the H2, H3, and H4 heading sizes that are surfaced in the block toolbar. So there's some consistency there. Other apps like Dropbox Paper also use "H" for the heading level.

Copy link
Copy Markdown
Contributor

@marekhrabe marekhrabe left a comment

Choose a reason for hiding this comment

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

It looks like we have a consensus about using the H icon and code-wise, nothing else blocks this PR.

@mapk
Copy link
Copy Markdown
Contributor

mapk commented May 16, 2019

Yes, :shipit: LGTM!

@marekhrabe marekhrabe added this to the 5.8 (Gutenberg) milestone May 16, 2019
@frontdevde frontdevde merged commit 84a021c into master May 17, 2019
@frontdevde frontdevde deleted the update/heading-block-a11y-icon-change branch May 17, 2019 10:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Heading block uses a counter-intuitive icon

4 participants