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

FIX: Replace the AM/PM toggle ButtonGroup with ToggleGroupControl. #61562

Closed

Conversation

patil-vipul
Copy link

@patil-vipul patil-vipul commented May 10, 2024

What?

Fixes #61163

Why?

When the is12Hour={true} setting is enabled, the AM/PM toggle relies solely on visual cues to convey its state, which presents a challenge for screen readers. This design overlooks accessibility needs, potentially creating barriers for users who rely on such assistive technologies.

How?

The previous ButtonGroup for toggling between AM/PM is replaced with ToggleGroupControl for better accessibility.

Testing Instructions

  • Create a new post and add the Date block.
  • Make sure your site is configured for 12 Hrs Time Format from the Settings >> General
  • Now edit the time on the date block using the "Edit" option (pencil icon) in the Block Controls Toolbar.
  • Test using the screen reader to read aloud the intended use of ToggleGroupControl.

Testing Instructions for Keyboard

  • Create a new post and add the Date block.
  • Make sure your site is configured for 12 Hrs Time Format from the Settings >> General
  • Now edit the time on the date block using the "Edit" option (pencil icon) in the Block Controls Toolbar.
  • Navigate to AM/PM selector using Tab key.
  • Once on AM/PM selector you can toggle between the two states using arrow keys.
  • To select the highlighted option press Spacebar.

Screenshots or screencast

Screenshot 2024-05-10 at 12 50 35 PM

@patil-vipul patil-vipul requested a review from ajitbohra as a code owner May 10, 2024 07:21
Copy link

github-actions bot commented May 10, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @gutenbergplugin.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: gutenbergplugin.

Co-authored-by: afercia <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: amitraj2203 <[email protected]>
Co-authored-by: jorgefilipecosta <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: sirreal <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: ockham <[email protected]>
Co-authored-by: narenin <[email protected]>
Co-authored-by: draganescu <[email protected]>
Co-authored-by: geriux <[email protected]>
Co-authored-by: colorful-tones <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: ajlende <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: jeryj <[email protected]>
Co-authored-by: nateinaction <[email protected]>
Co-authored-by: Aljullu <[email protected]>
Co-authored-by: SantosGuillamot <[email protected]>
Co-authored-by: senadir <[email protected]>
Co-authored-by: kevin940726 <[email protected]>
Co-authored-by: artemiomorales <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: shail-mehta <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: stokesman <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: patil-vipul <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @patil-vipul! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label May 10, 2024
@juanfra juanfra added [Type] Enhancement A suggestion for improvement. [Block] Query Loop Affects the Query Loop Block [Block] Post Template Affects the Post Template Block labels May 10, 2024
@mirka mirka requested a review from a team May 20, 2024 15:45
@mirka mirka added the [Package] Components /packages/components label May 20, 2024
Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

Great work here, thank you for the contribution!

Comment on lines 285 to 287
* This is not ideal, but best of we can do for now until we refactor
* AM/PM into accessible elements, like radio buttons.
*/
Copy link
Member

Choose a reason for hiding this comment

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

I believe we can remove this comment now?

afercia and others added 19 commits June 17, 2024 10:26
Co-authored-by: afercia <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: jameskoster <[email protected]>
…esence (WordPress#62132)

* Refactor image block control rendering logic for clarity.

* Refactor conditional rendering logic for block controls.

Co-authored-by: amitraj2203 <[email protected]>
Co-authored-by: michalczaplinski <[email protected]>
Co-authored-by: annezazu <[email protected]>
* "Edit" instead of color count

* remove unused style

* use chevron

* Update style-variations.spec.js

* lint

Co-authored-by: richtabor <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: annezazu <[email protected]>
…uled) (WordPress#62070)

Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: annezazu <[email protected]>
Add a `scriptmoduledata_{ MODULE_ID }` filter that allows data to be
embedded in page HTML for use by Script Modules.

For example:

    add_filter(
      'scriptmoduledata_MyScriptModuleID',
      function ( array $data ): array {
        $data['doesIt'] = 'it works';
        return $data;
      }
    );

See the proposal for details:

https://make.wordpress.org/core/2024/05/06/proposal-server-to-client-data-sharing-for-script-modules/
…rdPress#62088)

If a block variation's `isActive` property is a `string[]`, support "object paths" (i.e. dot ["property accessors"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors)), such as

```js
isActive: [ 'namespace', 'query.postType' ]
```

---------

Co-authored-by: ntsekouras <[email protected]>
…dPress#62076)

* Implemented: Update alt text decision tree links to be translatable

* Implemented: Update alt text decision tree links to be translatable

* Implemented Suggestions

* Implemented comment related changes

Co-authored-by: narenin <[email protected]>
Co-authored-by: joedolson <[email protected]>
Co-authored-by: michalczaplinski <[email protected]>
Co-authored-by: t-hamano <[email protected]>
…rdPress#62074)

* hide the presets panel for when there are less or exactly one presets available

* tweak logic to return null if there is only one variation (the default).

---------

Co-authored-by: draganescu <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: MaggieCabrera <[email protected]>
Co-authored-by: bgardner <[email protected]>
Co-authored-by: hbhalodia <[email protected]>
…agraph block (WordPress#62069)

* Mobile - Prevent deleting content when backspacing in the first Paragraph block at start

* Update Changelog

Co-authored-by: geriux <[email protected]>
Co-authored-by: twstokes <[email protected]>
* Add PostDiscussionPanel editor component JSDocs

* Auto-generate editor docs or PostDiscussionPanel component

* Refine PostDiscussionPanel editor component JSDocs

* Auto-generate editor docs for PostDiscussionPanel updates
* Add PostExcerptPanel editor component JSDocs

* Auto-generate editor docs for PostExcerptPanel component

* Refine PostExcerptPanel editor component JSDocs

* Auto-generate editor docs for PostExcerptPanel updates
…onents (WordPress#61970)

* Add PostPendingStatus editor component JSDocs

* Add PostPendingStatusCheck editor component JSDocs

* Auto-generate editor docs for PostPendingStatus additions

* Refine PostPendingStatusCheck component JSDocs

* Auto-generate editor docs for PostPendingStatusCheck updates
Co-authored-by: jorgefilipecosta <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: jasmussen <[email protected]>
@ciampo
Copy link
Contributor

ciampo commented Jul 10, 2024

Hey @mirka , I lost track of whether this improvement was ever applied in a different PR. In case it hasn't, do you think it's good for us to pick the task up and apply it?

@mirka
Copy link
Member

mirka commented Jul 10, 2024

@ciampo There are some folks in #61163 volunteering to pick this up, FWIW.

@patil-vipul Are you still willing to re-submit your PR?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Post Template Affects the Post Template Block [Block] Query Loop Affects the Query Loop Block First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

DateTimePicker: AM/PM switcher is not screen reader accessible