Skip to content
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

Use semantic element for block directory download heading #22713

Merged
merged 1 commit into from
May 29, 2020

Conversation

aduth
Copy link
Member

@aduth aduth commented May 28, 2020

Related Slack conversation (link requires registration): https://wordpress.slack.com/archives/C02QB2JS7/p1590677131416000

This pull request seeks to improve the markup and styling associated with the block directory DownloadableBlockHeader component.

While AXE tests are not anticipated to apply for block directory tests currently, due to an unrelated issue (#22712), they are, and the markup fails with a legitimate error about the markup being generated: "Required ARIA attribute not present: aria-level" (see related documentation).

Technically, aria-level can be considered optional ("If no level is present, a value of 2 is the default"), though the AXE tests are configured to require an explicit value, likely to prevent implicit values from oversights of not considering to add the attribute. It's not clear if the original implementation omitting aria-level was an oversight or intentional (#17431).

Ultimately though, it's not clear why the role is used here in the first place, vs. the more semantic heading elements. It may have been used merely as a convenience for styling, though it's not a very compelling reason, and the styling appears to seek to inherit some default heading styles anyways.

For this reason, the component has been changed to render <h2>, which should be semantically equivalent to how it was rendered previously.

Styling has been updated for a few reasons:

  • The CSS naming guidelines are intentionally crafted so as to avoid the need of SASS "nesting" in most cases. It has been updated here where it appears to be unnecessary.
  • Establish container padding by padding on the container, rather than multiple margin on its children.
  • Use standard (but equivalent) grid size values in place of ad hoc pixel values.
  • Avoid redundant font-weight heading styles, now inherited automatically as h2 element.
  • Otherwise, preserve previous styling by a combination of margin and color overrides to the heading.

Open Question:

Depending if it was intentional to omit aria-level and fall back to the default 2, it would be good to clarify if h2 is the best fit here.

Testing Instructions:

Verify that the presentation of the downloadable block header is identical in this branch compared to master:

  1. (Prerequisite) Enable Block Directory Search experiment from Gutenberg > Experiments screen
  2. Navigate to Posts > Add New
  3. Toggle block inserter
  4. Search "Listicle"
  5. Observe heading "List Item" in presented block directory search result

@aduth aduth added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Feature] Block Directory Related to the Block Directory, a repository of block plugins labels May 28, 2020
@aduth aduth requested review from talldan and noisysocks May 28, 2020 16:17
@github-actions
Copy link

Size Change: -5 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/block-directory/index.js 6.48 kB -3 B (0%)
build/block-directory/style-rtl.css 787 B -1 B
build/block-directory/style.css 787 B -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-editor/index.js 105 kB 0 B
build/block-editor/style-rtl.css 11 kB 0 B
build/block-editor/style.css 11 kB 0 B
build/block-library/editor-rtl.css 7.21 kB 0 B
build/block-library/editor.css 7.21 kB 0 B
build/block-library/index.js 119 kB 0 B
build/block-library/style-rtl.css 7.68 kB 0 B
build/block-library/style.css 7.68 kB 0 B
build/block-library/theme-rtl.css 684 B 0 B
build/block-library/theme.css 686 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/index.js 190 kB 0 B
build/components/style-rtl.css 17.1 kB 0 B
build/components/style.css 17.1 kB 0 B
build/compose/index.js 9.31 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.42 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 771 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.11 kB 0 B
build/edit-navigation/index.js 6.62 kB 0 B
build/edit-navigation/style-rtl.css 857 B 0 B
build/edit-navigation/style.css 856 B 0 B
build/edit-post/index.js 302 kB 0 B
build/edit-post/style-rtl.css 12.2 kB 0 B
build/edit-post/style.css 12.2 kB 0 B
build/edit-site/index.js 14 kB 0 B
build/edit-site/style-rtl.css 5.52 kB 0 B
build/edit-site/style.css 5.53 kB 0 B
build/edit-widgets/index.js 8.05 kB 0 B
build/edit-widgets/style-rtl.css 4.59 kB 0 B
build/edit-widgets/style.css 4.59 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/index.js 44.6 kB 0 B
build/editor/style-rtl.css 5.06 kB 0 B
build/editor/style.css 5.06 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.02 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

Copy link
Contributor

@ryelle ryelle left a comment

Choose a reason for hiding this comment

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

h2 does appear to be the right fit here, since there is no other header in the inserter (and it follows the BlockCard component, which also uses h2). Everything looks good with the style changes too 👍

@aduth aduth merged commit a5cfd79 into master May 29, 2020
@aduth aduth deleted the update/block-directory-semantic-heading branch May 29, 2020 12:22
@github-actions github-actions bot added this to the Gutenberg 8.3 milestone May 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block Directory Related to the Block Directory, a repository of block plugins [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants