Skip to content

Conversation

@ItsJonQ
Copy link

@ItsJonQ ItsJonQ commented Jan 21, 2021

This update fixes the voiceover focus interactions for the (next) FontSizeControl component (recently merged #27594)

The solution was to update to the latest @wp-g2 version (v0.0.143):
https://github.com/ItsJonQ/g2/releases

These changes include updates to z-index and interaction fixes to the underlying SelectDropdown component (ItsJonQ/g2#239).

Potentially resolves #28411

How has this been tested?

Tested locally on Gutenberg with Chrome + Firefox + Voiceover (Mac OS)
Also tested in the @wp-g2 pull request in a similar manner.

To test:

  • run npm run dev
  • Click on a text-based block (e.g. Paragraph)
  • Ensure the font size picker interactions are working as intended

Checklist:

  • My code is tested.
  • [n/a] 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 added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Feature] Component System WordPress component system labels Jan 21, 2021
@ItsJonQ ItsJonQ requested a review from talldan January 21, 2021 22:47
@ItsJonQ ItsJonQ self-assigned this Jan 21, 2021
@github-actions
Copy link

github-actions bot commented Jan 21, 2021

Size Change: -9.58 kB (-1%)

Total Size: 1.36 MB

Filename Size Change
build/annotations/index.js 3.78 kB +1 B (0%)
build/api-fetch/index.js 3.4 kB -1 B (0%)
build/autop/index.js 2.84 kB +1 B (0%)
build/block-directory/index.js 9.08 kB -2 B (0%)
build/block-editor/index.js 123 kB -7 B (0%)
build/block-library/index.js 144 kB +2 B (0%)
build/blocks/index.js 48.3 kB -1 B (0%)
build/components/index.js 268 kB -9.55 kB (-3%)
build/core-data/index.js 16.8 kB -4 B (0%)
build/data-controls/index.js 827 B -1 B (0%)
build/data/index.js 8.8 kB -6 B (0%)
build/date/index.js 31.8 kB -1 B (0%)
build/deprecated/index.js 768 B -1 B (0%)
build/dom/index.js 4.93 kB +1 B (0%)
build/edit-navigation/index.js 11.2 kB -1 B (0%)
build/edit-post/index.js 307 kB -8 B (0%)
build/edit-site/index.js 24.1 kB -8 B (0%)
build/edit-widgets/index.js 20.1 kB +4 B (0%)
build/editor/index.js 41.8 kB +5 B (0%)
build/element/index.js 4.61 kB -3 B (0%)
build/format-library/index.js 6.76 kB -5 B (0%)
build/hooks/index.js 2.27 kB -1 B (0%)
build/i18n/index.js 3.74 kB -1 B (0%)
build/is-shallow-equal/index.js 699 B +1 B (0%)
build/keyboard-shortcuts/index.js 2.54 kB -1 B (0%)
build/keycodes/index.js 1.93 kB -1 B (0%)
build/list-reusable-blocks/index.js 3.15 kB -1 B (0%)
build/notices/index.js 1.85 kB +3 B (0%)
build/plugins/index.js 2.54 kB -1 B (0%)
build/priority-queue/index.js 791 B +1 B (0%)
build/redux-routine/index.js 2.84 kB +3 B (0%)
build/reusable-blocks/index.js 2.92 kB -1 B (0%)
build/rich-text/index.js 13.4 kB +2 B (0%)
build/server-side-render/index.js 2.77 kB +1 B (0%)
build/shortcode/index.js 1.7 kB -1 B (0%)
build/viewport/index.js 1.86 kB +2 B (0%)
build/wordcount/index.js 1.22 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/style-rtl.css 1.01 kB 0 B
build/block-directory/style.css 1.01 kB 0 B
build/block-editor/style-rtl.css 11.9 kB 0 B
build/block-editor/style.css 11.9 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 61 B 0 B
build/block-library/blocks/archives/editor.css 60 B 0 B
build/block-library/blocks/audio/editor-rtl.css 58 B 0 B
build/block-library/blocks/audio/editor.css 58 B 0 B
build/block-library/blocks/audio/style-rtl.css 103 B 0 B
build/block-library/blocks/audio/style.css 103 B 0 B
build/block-library/blocks/block/editor-rtl.css 161 B 0 B
build/block-library/blocks/block/editor.css 161 B 0 B
build/block-library/blocks/button/editor-rtl.css 475 B 0 B
build/block-library/blocks/button/editor.css 474 B 0 B
build/block-library/blocks/button/style-rtl.css 453 B 0 B
build/block-library/blocks/button/style.css 451 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 227 B 0 B
build/block-library/blocks/buttons/editor.css 227 B 0 B
build/block-library/blocks/buttons/style-rtl.css 297 B 0 B
build/block-library/blocks/buttons/style.css 297 B 0 B
build/block-library/blocks/calendar/style-rtl.css 208 B 0 B
build/block-library/blocks/calendar/style.css 208 B 0 B
build/block-library/blocks/categories/editor-rtl.css 84 B 0 B
build/block-library/blocks/categories/editor.css 83 B 0 B
build/block-library/blocks/categories/style-rtl.css 79 B 0 B
build/block-library/blocks/categories/style.css 79 B 0 B
build/block-library/blocks/code/style-rtl.css 90 B 0 B
build/block-library/blocks/code/style.css 90 B 0 B
build/block-library/blocks/columns/editor-rtl.css 190 B 0 B
build/block-library/blocks/columns/editor.css 190 B 0 B
build/block-library/blocks/columns/style-rtl.css 421 B 0 B
build/block-library/blocks/columns/style.css 421 B 0 B
build/block-library/blocks/cover/editor-rtl.css 392 B 0 B
build/block-library/blocks/cover/editor.css 393 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.25 kB 0 B
build/block-library/blocks/cover/style.css 1.25 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 486 B 0 B
build/block-library/blocks/embed/editor.css 486 B 0 B
build/block-library/blocks/embed/style-rtl.css 375 B 0 B
build/block-library/blocks/embed/style.css 375 B 0 B
build/block-library/blocks/file/editor-rtl.css 199 B 0 B
build/block-library/blocks/file/editor.css 198 B 0 B
build/block-library/blocks/file/style-rtl.css 248 B 0 B
build/block-library/blocks/file/style.css 248 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.45 kB 0 B
build/block-library/blocks/freeform/editor.css 2.45 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 679 B 0 B
build/block-library/blocks/gallery/editor.css 679 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.07 kB 0 B
build/block-library/blocks/gallery/style.css 1.06 kB 0 B
build/block-library/blocks/group/editor-rtl.css 318 B 0 B
build/block-library/blocks/group/editor.css 317 B 0 B
build/block-library/blocks/group/style-rtl.css 57 B 0 B
build/block-library/blocks/group/style.css 57 B 0 B
build/block-library/blocks/heading/editor-rtl.css 129 B 0 B
build/block-library/blocks/heading/editor.css 129 B 0 B
build/block-library/blocks/heading/style-rtl.css 76 B 0 B
build/block-library/blocks/heading/style.css 76 B 0 B
build/block-library/blocks/html/editor-rtl.css 281 B 0 B
build/block-library/blocks/html/editor.css 281 B 0 B
build/block-library/blocks/image/editor-rtl.css 717 B 0 B
build/block-library/blocks/image/editor.css 716 B 0 B
build/block-library/blocks/image/style-rtl.css 477 B 0 B
build/block-library/blocks/image/style.css 478 B 0 B
build/block-library/blocks/latest-comments/editor-rtl.css 159 B 0 B
build/block-library/blocks/latest-comments/editor.css 158 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 269 B 0 B
build/block-library/blocks/latest-comments/style.css 269 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B 0 B
build/block-library/blocks/latest-posts/editor.css 137 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 523 B 0 B
build/block-library/blocks/latest-posts/style.css 522 B 0 B
build/block-library/blocks/list/editor-rtl.css 65 B 0 B
build/block-library/blocks/list/editor.css 65 B 0 B
build/block-library/blocks/list/style-rtl.css 63 B 0 B
build/block-library/blocks/list/style.css 63 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 191 B 0 B
build/block-library/blocks/media-text/editor.css 191 B 0 B
build/block-library/blocks/media-text/style-rtl.css 535 B 0 B
build/block-library/blocks/media-text/style.css 532 B 0 B
build/block-library/blocks/more/editor-rtl.css 434 B 0 B
build/block-library/blocks/more/editor.css 434 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 392 B 0 B
build/block-library/blocks/navigation-link/editor.css 394 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 704 B 0 B
build/block-library/blocks/navigation-link/style.css 702 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.38 kB 0 B
build/block-library/blocks/navigation/editor.css 1.37 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 183 B 0 B
build/block-library/blocks/navigation/style.css 183 B 0 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B 0 B
build/block-library/blocks/nextpage/editor.css 395 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 109 B 0 B
build/block-library/blocks/paragraph/editor.css 109 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 273 B 0 B
build/block-library/blocks/paragraph/style.css 273 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 209 B 0 B
build/block-library/blocks/post-author/editor.css 209 B 0 B
build/block-library/blocks/post-author/style-rtl.css 183 B 0 B
build/block-library/blocks/post-author/style.css 184 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 249 B 0 B
build/block-library/blocks/post-comments-form/style.css 249 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 139 B 0 B
build/block-library/blocks/post-content/editor.css 139 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B 0 B
build/block-library/blocks/post-excerpt/editor.css 73 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 338 B 0 B
build/block-library/blocks/post-featured-image/editor.css 338 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 100 B 0 B
build/block-library/blocks/post-featured-image/style.css 100 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 63 B 0 B
build/block-library/blocks/preformatted/style.css 63 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 183 B 0 B
build/block-library/blocks/pullquote/editor.css 183 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 316 B 0 B
build/block-library/blocks/pullquote/style.css 316 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 90 B 0 B
build/block-library/blocks/query-loop/editor.css 89 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 315 B 0 B
build/block-library/blocks/query-loop/style.css 317 B 0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B 0 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B 0 B
build/block-library/blocks/query-pagination/editor-rtl.css 270 B 0 B
build/block-library/blocks/query-pagination/editor.css 262 B 0 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B 0 B
build/block-library/blocks/query-pagination/style.css 168 B 0 B
build/block-library/blocks/query/editor-rtl.css 159 B 0 B
build/block-library/blocks/query/editor.css 160 B 0 B
build/block-library/blocks/quote/editor-rtl.css 61 B 0 B
build/block-library/blocks/quote/editor.css 61 B 0 B
build/block-library/blocks/quote/style-rtl.css 169 B 0 B
build/block-library/blocks/quote/style.css 169 B 0 B
build/block-library/blocks/rss/editor-rtl.css 201 B 0 B
build/block-library/blocks/rss/editor.css 202 B 0 B
build/block-library/blocks/rss/style-rtl.css 290 B 0 B
build/block-library/blocks/rss/style.css 290 B 0 B
build/block-library/blocks/search/editor-rtl.css 165 B 0 B
build/block-library/blocks/search/editor.css 165 B 0 B
build/block-library/blocks/search/style-rtl.css 342 B 0 B
build/block-library/blocks/search/style.css 344 B 0 B
build/block-library/blocks/separator/editor-rtl.css 99 B 0 B
build/block-library/blocks/separator/editor.css 99 B 0 B
build/block-library/blocks/separator/style-rtl.css 236 B 0 B
build/block-library/blocks/separator/style.css 236 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 504 B 0 B
build/block-library/blocks/shortcode/editor.css 504 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 201 B 0 B
build/block-library/blocks/site-logo/editor.css 201 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 117 B 0 B
build/block-library/blocks/site-logo/style.css 117 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 164 B 0 B
build/block-library/blocks/social-link/editor.css 165 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 711 B 0 B
build/block-library/blocks/social-links/editor.css 712 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.37 kB 0 B
build/block-library/blocks/social-links/style.css 1.37 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 302 B 0 B
build/block-library/blocks/spacer/editor.css 302 B 0 B
build/block-library/blocks/spacer/style-rtl.css 48 B 0 B
build/block-library/blocks/spacer/style.css 48 B 0 B
build/block-library/blocks/subhead/editor-rtl.css 99 B 0 B
build/block-library/blocks/subhead/editor.css 99 B 0 B
build/block-library/blocks/subhead/style-rtl.css 80 B 0 B
build/block-library/blocks/subhead/style.css 80 B 0 B
build/block-library/blocks/table/editor-rtl.css 489 B 0 B
build/block-library/blocks/table/editor.css 489 B 0 B
build/block-library/blocks/table/style-rtl.css 386 B 0 B
build/block-library/blocks/table/style.css 386 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 118 B 0 B
build/block-library/blocks/tag-cloud/editor.css 118 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 94 B 0 B
build/block-library/blocks/tag-cloud/style.css 94 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 680 B 0 B
build/block-library/blocks/template-part/editor.css 679 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B 0 B
build/block-library/blocks/text-columns/editor.css 95 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 166 B 0 B
build/block-library/blocks/text-columns/style.css 166 B 0 B
build/block-library/blocks/verse/editor-rtl.css 62 B 0 B
build/block-library/blocks/verse/editor.css 62 B 0 B
build/block-library/blocks/verse/style-rtl.css 87 B 0 B
build/block-library/blocks/verse/style.css 87 B 0 B
build/block-library/blocks/video/editor-rtl.css 504 B 0 B
build/block-library/blocks/video/editor.css 503 B 0 B
build/block-library/blocks/video/style-rtl.css 193 B 0 B
build/block-library/blocks/video/style.css 193 B 0 B
build/block-library/common-rtl.css 1.01 kB 0 B
build/block-library/common.css 1.01 kB 0 B
build/block-library/editor-rtl.css 9.06 kB 0 B
build/block-library/editor.css 9.05 kB 0 B
build/block-library/style-rtl.css 8.62 kB 0 B
build/block-library/style.css 8.61 kB 0 B
build/block-library/theme-rtl.css 748 B 0 B
build/block-library/theme.css 748 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 11.2 kB 0 B
build/dom-ready/index.js 571 B 0 B
build/edit-navigation/style-rtl.css 1.01 kB 0 B
build/edit-navigation/style.css 1.01 kB 0 B
build/edit-post/style-rtl.css 6.79 kB 0 B
build/edit-post/style.css 6.78 kB 0 B
build/edit-site/style-rtl.css 4.04 kB 0 B
build/edit-site/style.css 4.04 kB 0 B
build/edit-widgets/style-rtl.css 3.2 kB 0 B
build/edit-widgets/style.css 3.2 kB 0 B
build/editor/editor-styles-rtl.css 543 B 0 B
build/editor/editor-styles.css 545 B 0 B
build/editor/style-rtl.css 3.89 kB 0 B
build/editor/style.css 3.89 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/style-rtl.css 637 B 0 B
build/format-library/style.css 639 B 0 B
build/html-entities/index.js 622 B 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/media-utils/index.js 5.33 kB 0 B
build/nux/index.js 3.41 kB 0 B
build/nux/style-rtl.css 731 B 0 B
build/nux/style.css 727 B 0 B
build/primitives/index.js 1.42 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 3.02 kB 0 B
build/warning/index.js 1.14 kB 0 B

compressed-size-action

@talldan
Copy link
Contributor

talldan commented Jan 22, 2021

@ItsJonQ Looking good. Only one of the items I mentioned still seems to be an issue. When the Font Size dropdown (button element) initially receives focus it doesn't seem to have the aria-expanded attribute. That's only added after opening it for the first time. Here's what Voiceover reads when it's focused for the first time:
Screenshot 2021-01-22 at 12 41 43 pm

Compared to when the dropdown has been toggled open and closed at least once:
Screenshot 2021-01-22 at 12 40 28 pm

@ItsJonQ
Copy link
Author

ItsJonQ commented Jan 22, 2021

@talldan Wonderful!! Thank you for that feedback 🙏

@gziolo
Copy link
Member

gziolo commented Jan 22, 2021

Reakit is deduplicated now 🎉
Screen Shot 2021-01-22 at 16 22 07

Copy link
Member

@diegohaz diegohaz left a comment

Choose a reason for hiding this comment

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

Nice! Tested with NVDA and JAWS on Firefox and the reset button focus has been fixed. The only remaining issue from @talldan's list is the lack of aria-expanded in the first render.

@ItsJonQ
Copy link
Author

ItsJonQ commented Jan 22, 2021

@talldan + @diegohaz Fixing it here:
ItsJonQ/g2#244

Will create a release and make an update in this PR as soon as I can 🙏

@ItsJonQ
Copy link
Author

ItsJonQ commented Jan 22, 2021

@gziolo Hmm! It looks like there's something in the latest rtlcss V3.0.0 that's causing issues with babel (specifically with let)

https://github.com/WordPress/gutenberg/runs/1750693127?check_suite_focus=true

@gziolo
Copy link
Member

gziolo commented Jan 22, 2021

@gziolo Hmm! It looks like there's something in the latest rtlcss V3.0.0 that's causing issues with babel (specifically with let)

https://github.com/WordPress/gutenberg/runs/1750693127?check_suite_focus=true

I can see it in the source of the package. It looks like they write code to target code in Node.js mostly. It looks like @jsnajdr was right that it's inevitable that we will have to start transpiling some of the packages in node_modules :(

@ItsJonQ
Copy link
Author

ItsJonQ commented Jan 26, 2021

Not sure what to do with the failing E2E test :(.

I think there's something to it, but I'm not sure what.

● Font Size Picker › should reset a named font size using the reset button

    expect(received).toMatchSnapshot()

    Snapshot name: `Font Size Picker should reset a named font size using the reset button 1`

    - Snapshot  - 2
    + Received  + 2

    - <!-- wp:paragraph -->
    - <p>Paragraph with font size reset using button</p>
    + <!-- wp:paragraph {"fontSize":"normal"} -->
    + <p class="has-normal-font-size">Paragraph with font size reset using button</p>
      <!-- /wp:paragraph -->

       96 | 		// Ensure content matches snapshot.
       97 | 		const content = await getEditedPostContent();
    >  98 | 		expect( content ).toMatchSnapshot();
          | 		                  ^
       99 | 	} );
      100 | 
      101 | 	it( 'should reset a named font size using input field', async () => {

Replicating the actions locally, it works as expected.

Running it locally, the "reset" related ones pass for me.

There's another failure, but that's related to the theme's font setting for what a "small" size (test is looking for 13, but the theme uses 19 for small).

Screen Shot 2021-01-26 at 10 34 51 AM

@ItsJonQ
Copy link
Author

ItsJonQ commented Jan 27, 2021

cc'ing @gziolo. Would you know what we can do for the E2E failure? The hardest thing is that it's inconsistent between my local machine and what's on Github actions

@gziolo gziolo force-pushed the fix/font-size-picker-next-a11y branch from 16e63df to 1a30b14 Compare February 2, 2021 13:19
@gziolo
Copy link
Member

gziolo commented Feb 2, 2021

I rebased this branch. It fails for me locally for the following test:

should reset a named font size using the reset button

It passes in the interactive mode. There needs to be something wrong with the data propagation when the check is done very quickly.

The one you mentioned that fails for you, it passes for me 🤷🏻

It fails locally when you run an interactive mode but without delay:

npm run test-e2e packages/e2e-tests/specs/editor/various/font-size-picker.test.js -- --puppeteer-interactive --puppeteer-slowmo=1

You can record it and check it in slow motion what happened. I need to relocate now :)

@ItsJonQ ItsJonQ mentioned this pull request Feb 4, 2021
6 tasks
@ItsJonQ
Copy link
Author

ItsJonQ commented Feb 5, 2021

This should be resolved in #28707.
That PR updates @wp-g2/* to the latest v0.0.150.

@ItsJonQ
Copy link
Author

ItsJonQ commented Feb 8, 2021

Resolved in #28707

@ItsJonQ ItsJonQ closed this Feb 8, 2021
@gziolo gziolo deleted the fix/font-size-picker-next-a11y branch February 8, 2021 22:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

FontSizePicker accessibility issues

5 participants