Query Pagination: allow hiding the label text #50779
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mikachan
added
the
[Block] Query Pagination
mikachan
requested review from
ajitbohra,
ryanwelcher,
juanmaguitar,
fabiankaegy and
ndiego
as code owners
|
Size Change: +9.41 kB (+1%) Total Size: 1.39 MB
ℹ️ View Unchanged
|
vcanales
reviewed
May 26, 2023
There was a problem hiding this comment.
The span element that wraps the arrow has aria-hidden="true" in the markup, which according to the spec should remove it from the accessibility tree.
The presence of the aria-hidden attribute hides content from assistive technology but doesn't visually hide anything.
aria-hidden="true"should not be used on elements that can receive focus. Additionally, since this attribute is inherited by an element's children, it should not be added onto the parent or ancestor of a focusable element.
I think aria-hidden should be set to false if we expect to be able to tab to the arrow itself when the text label is hidden.
It does not affect the functionality, at least not in Chrome and Safari, but it would be safe to adhere to the spec regardless.
|
Thanks for testing this out, @vcanales!
I believe because the 
It would probably be best practice to have a text label, but as we're offering a design that only uses the icon, I think adding an
|
carolinan
approved these changes
May 29, 2023
|
Flaky tests detected in ece2e7f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5118981101
|
ntsekouras
reviewed
Jun 1, 2023
ntsekouras
reviewed
Jun 1, 2023
mikachan
added a commit
that referenced
this pull request
Jun 1, 2023
* Wrap showLabel logic in a useEffect * Only render PlainText if showLabel is true * Update packages/block-library/src/query-pagination/edit.js Co-authored-by: Nik Tsekouras <[email protected]> * Add showLabel to deps --------- Co-authored-by: Nik Tsekouras <[email protected]>
7 tasks
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
* Add showLabel attribute * Add QueryPaginationLabelControl * Add showLabel to query-pagination-next * Update docs * Add showLabel to query-pagination-previous * Always show label if there is no pagination arrow * Update test fixtures * Update toggle label and description * Make comment backticks consistent
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
) * Wrap showLabel logic in a useEffect * Only render PlainText if showLabel is true * Update packages/block-library/src/query-pagination/edit.js Co-authored-by: Nik Tsekouras <[email protected]> * Add showLabel to deps --------- Co-authored-by: Nik Tsekouras <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This adds an extra display option to the Query Pagination block which allows users to hide the text for the pagination links. This then unlocks several display options for the pagination links:
Why?
Closes #49266.
How?
This adds a new boolean attribute,
showLabel, to the Query Pagination block. The default value istrue, and when set tofalse, it will hide the text labels.showLabelis controlled by a toggle control which is only displayed when an arrow icon type is selected. The attribute cannot be set tofalseif there is nopaginationArrowset, to prevent the pagination link from being empty when no arrow or label is set.Testing Instructions
Testing Instructions for Keyboard
Editor testing instructions:
Front end testing instructions:
Screenshots or screencast
Settings panel:
Screen.Recording.2023-05-19.at.11.17.35.mov