Skip to content

UnitControl: Enable keyboard access (via tab) to unit select by default #25704

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.

Sign up for GitHub

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
Merged
ItsJonQ merged 1 commit into from
Oct 1, 2020
Merged

UnitControl: Enable keyboard access (via tab) to unit select by default #25704

ItsJonQ merged 1 commit into from
Oct 1, 2020

Conversation

@ItsJonQ
Copy link

@ItsJonQ ItsJonQ commented Sep 29, 2020

This update ensures the unit select element within UnitControl is keyboard accessible by default.
The solution was to adjust the default setting for the component via the isUnitSelectTabbable prop.

Screen Capture on 2020-09-29 at 10-19-52

(GIF above demonstrates keyboard tabbing through elements, including the unit select)

Resolves: #25703

How has this been tested?

Local Gutenberg

  • npm run dev
  • Add a Cover block
  • Click on the Height control
  • Press Tab. Ensure that you the unit select can be accessed.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • [n/a] My code has proper inline documentation.
  • [n/a] I've included developer documentation if appropriate.
  • [n/a] I've updated all React Native files affected by any refactorings/renamings in this PR.

@ItsJonQ ItsJonQ requested a review from mtias September 29, 2020 14:24
@ItsJonQ ItsJonQ self-assigned this Sep 29, 2020
@github-actions
Copy link

github-actions bot commented Sep 29, 2020

Size Change: -1 B

Total Size: 1.17 MB

Filename Size Change
build/components/index.js 168 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.52 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 620 B 0 B
build/block-directory/index.js 8.61 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 129 kB 0 B
build/block-editor/style-rtl.css 11.1 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.6 kB 0 B
build/block-library/editor.css 8.6 kB 0 B
build/block-library/index.js 135 kB 0 B
build/block-library/style-rtl.css 7.61 kB 0 B
build/block-library/style.css 7.6 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/blocks/index.js 47.5 kB 0 B
build/components/style-rtl.css 15.4 kB 0 B
build/components/style.css 15.4 kB 0 B
build/compose/index.js 9.42 kB 0 B
build/core-data/index.js 12 kB 0 B
build/data-controls/index.js 1.27 kB 0 B
build/data/index.js 8.42 kB 0 B
build/date/index.js 31.9 kB 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/index.js 10.7 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/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.25 kB 0 B
build/edit-post/style.css 6.24 kB 0 B
build/edit-site/index.js 20.4 kB 0 B
build/edit-site/style-rtl.css 3.76 kB 0 B
build/edit-site/style.css 3.77 kB 0 B
build/edit-widgets/index.js 18.1 kB 0 B
build/edit-widgets/style-rtl.css 2.81 kB 0 B
build/edit-widgets/style.css 2.81 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/index.js 45.4 kB 0 B
build/editor/style-rtl.css 3.83 kB 0 B
build/editor/style.css 3.82 kB 0 B
build/element/index.js 4.44 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.49 kB 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/i18n/index.js 3.55 kB 0 B
build/is-shallow-equal/index.js 709 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/index.js 3.02 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/media-utils/index.js 5.12 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/index.js 3.27 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.44 kB 0 B
build/primitives/index.js 1.34 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 13.5 kB 0 B
build/server-side-render/index.js 2.6 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.74 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

mtias
mtias approved these changes Oct 1, 2020
View reviewed changes
Copy link
Member

@mtias mtias left a comment

Choose a reason for hiding this comment

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

This makes sense to me as a default. Should it be disabled if there's a single unit available?

@ItsJonQ
Copy link
Author

ItsJonQ commented Oct 1, 2020

Should it be disabled if there's a single unit available?

It already does that 🎉 . It transforms from being a select to a div if there's only 1 label

@ItsJonQ ItsJonQ merged commit f007eb1 into master Oct 1, 2020
@ItsJonQ ItsJonQ deleted the fix/unit-control-unit-select-keyboard-access branch October 1, 2020 14:21
@github-actions github-actions bot added this to the Gutenberg 9.2 milestone Oct 1, 2020
@priethor priethor added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Jul 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mtias mtias mtias approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra

@chrisvanpatten chrisvanpatten Awaiting requested review from chrisvanpatten

@youknowriad youknowriad Awaiting requested review from youknowriad

Assignees

@ItsJonQ ItsJonQ

Labels

[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components

Projects

None yet

Milestone

Gutenberg 9.2

Development

Successfully merging this pull request may close these issues.

UnitControl: Unit selector is not tabbable

4 participants

@ItsJonQ @mtias @priethor