Skip to content

/ gutenberg

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

Jump to bottom

FSE Document actions - wrap with heading #25874

Merged
merged 6 commits into from Oct 8, 2020
Merged

FSE Document actions - wrap with heading #25874

merged 6 commits into from Oct 8, 2020

Conversation

@Addison-Stavlo
Copy link
Contributor

@Addison-Stavlo Addison-Stavlo commented Oct 6, 2020 •
edited by noahtallen

Description

Instead of re-ordering the items in the header, we will update the wrapper to be a heading element so it can be easily seen via a11y software.

Re-orders the site editor header to have document-actions to appear as the first section in the dom hierarchy (as discussed #25781).

This should introduce no visual change.

resolves #25781

How has this been tested?

Tested on local docker env.

  • Verify the document actions labels are the same visually, but wrapped in an <h1>

Screenshots

This should have no visual change.

Types of changes

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.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.
@Addison-Stavlo Addison-Stavlo requested a review from youknowriad as a code owner Oct 6, 2020
@Addison-Stavlo Addison-Stavlo requested review from noahtallen and jeyip Oct 6, 2020
@Addison-Stavlo Addison-Stavlo mentioned this pull request Oct 6, 2020
Closed
@Addison-Stavlo Addison-Stavlo self-assigned this Oct 6, 2020
@github-actions
Copy link

@github-actions github-actions bot commented Oct 6, 2020 •
edited

Size Change: +8.93 kB (0%)

Total Size: 1.19 MB

Filename Size Change
build/annotations/index.js 3.54 kB +22 B (0%)
build/block-directory/index.js 8.55 kB +1 B
build/block-editor/index.js 129 kB -61 B (0%)
build/block-library/editor-rtl.css 8.65 kB +6 B (0%)
build/block-library/editor.css 8.65 kB +6 B (0%)
build/block-library/index.js 144 kB +9.24 kB (6%) 🔍
build/blocks/index.js 47.5 kB -16 B (0%)
build/components/index.js 169 kB -244 B (0%)
build/compose/index.js 9.43 kB +4 B (0%)
build/core-data/index.js 12.1 kB +12 B (0%)
build/data/index.js 8.61 kB +3 B (0%)
build/date/index.js 31.9 kB +1 B
build/edit-navigation/index.js 10.6 kB -11 B (0%)
build/edit-post/index.js 306 kB -1 B
build/edit-site/index.js 20.9 kB +59 B (0%)
build/edit-site/style-rtl.css 3.73 kB +14 B (0%)
build/edit-site/style.css 3.73 kB +12 B (0%)
build/edit-widgets/index.js 21.3 kB -119 B (0%)
build/editor/index.js 45.4 kB -14 B (0%)
build/element/index.js 4.45 kB +5 B (0%)
build/format-library/index.js 7.49 kB +4 B (0%)
build/i18n/index.js 3.54 kB +1 B
build/list-reusable-blocks/index.js 3.02 kB -2 B (0%)
build/media-utils/index.js 5.12 kB -1 B
build/nux/index.js 3.27 kB +3 B (0%)
build/plugins/index.js 2.44 kB +2 B (0%)
build/shortcode/index.js 1.7 kB +1 B
build/url/index.js 4.06 kB -1 B
build/viewport/index.js 1.74 kB +2 B (0%)
build/warning/index.js 1.14 kB +7 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/api-fetch/index.js 3.35 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/blob/index.js 668 B 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 10.9 kB 0 B
build/block-editor/style.css 10.9 kB 0 B
build/block-library/style-rtl.css 7.66 kB 0 B
build/block-library/style.css 7.65 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.78 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/components/style-rtl.css 15.4 kB 0 B
build/components/style.css 15.4 kB 0 B
build/data-controls/index.js 685 B 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.42 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/edit-post/style-rtl.css 6.29 kB 0 B
build/edit-post/style.css 6.27 kB 0 B
build/edit-widgets/style-rtl.css 3 kB 0 B
build/edit-widgets/style.css 3 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/escape-html/index.js 734 B 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 1.74 kB 0 B
build/html-entities/index.js 621 B 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.39 kB 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/primitives/index.js 1.34 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13 kB 0 B
build/server-side-render/index.js 2.6 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action
@Addison-Stavlo Addison-Stavlo changed the title Reorder site editor header - document actions section first site editor Document actions - wrap with heading Oct 7, 2020
@noahtallen
noahtallen requested changes Oct 7, 2020
View changes
Copy link
Member

@noahtallen noahtallen left a comment

thanks for spinning this up! Just one note
packages/edit-site/src/components/header/document-actions/index.js Outdated Show resolved Hide resolved
@Addison-Stavlo
make document actions the first element in DOM hierarchy
f5b0cb7
@Addison-Stavlo
undo reorder
7d2a82b
@Addison-Stavlo
use heading wrapper
cf1e047
@Addison-Stavlo
add visually hidden prompt
e20859d
@Addison-Stavlo Addison-Stavlo force-pushed the try/reorder-edit-site-header branch from b4b44f5 to e20859d Oct 7, 2020
@noahtallen
noahtallen approved these changes Oct 7, 2020
View changes
Copy link
Member

@noahtallen noahtallen left a comment

I think this is a solid approach which improves accessibility for folks using screen readers etc. It lets us maintain the current visual designs as well -- at least until better designs have been proposed :)

Only note is that I think it should say "edit $postType" instead of "edit document"
Addison-Stavlo and others added 2 commits Oct 8, 2020
@Addison-Stavlo
Merge branch 'master' into try/reorder-edit-site-header
26b246d
@noahtallen
Switch to "edit template"
66ae6f9
@noahtallen
Copy link
Member

@noahtallen noahtallen commented Oct 8, 2020

Screen Shot 2020-10-07 at 8 10 08 PM
@noahtallen noahtallen changed the title site editor Document actions - wrap with heading FSE Document actions - wrap with heading Oct 8, 2020
@noahtallen noahtallen merged commit 7703fa5 into master Oct 8, 2020
15 checks passed
15 checks passed
@github-actions
Cancel Previous Runs Cancel Previous Runs
Details
@github-actions
Check Check
Details
@github-actions
build
Details
@github-actions
Admin - 1
Details
@github-actions
Compare performance with master
Details
@github-actions
pull-request-automation
Details
@github-actions
test (gutenberg-editor-gallery) test (gutenberg-editor-gallery)
Details
@github-actions
test (gutenberg-editor-gallery)
Details
@github-actions
All
Details
@github-actions
JavaScript
Details
@github-actions
Admin - 2
Details
@github-actions
PHP
Details
@github-actions
Admin - 3
Details
@github-actions
Mobile
Details
@github-actions
Admin - 4
Details
@noahtallen noahtallen deleted the try/reorder-edit-site-header branch Oct 8, 2020
@github-actions github-actions bot added this to the Gutenberg 9.2 milestone Oct 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@noahtallen noahtallen

@youknowriad youknowriad

@jeyip jeyip

Assignees

@Addison-Stavlo Addison-Stavlo

Labels
Accessibility (a11y) [Feature] Full Site Editing [a11y] Labelling
Projects
None yet
Milestone
Gutenberg 9.2
Linked issues

Successfully merging this pull request may close these issues.

Improve accessibility hierarchy of document title area
2 participants
@Addison-Stavlo @noahtallen