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

Add nav to the selectable elements for the group block #67407

Open
carolinan opened this issue Nov 29, 2024 · 4 comments
Open

Add nav to the selectable elements for the group block #67407

carolinan opened this issue Nov 29, 2024 · 4 comments
Labels
[Block] Group Affects the Group Block (and row, stack and grid variants) Developer Experience Ideas about improving block and theme developer experience [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Enhancement A suggestion for improvement.

Comments

@carolinan
Copy link
Contributor

carolinan commented Nov 29, 2024

What problem does this address?

I am splitting this out of #57664

There seems to be a consensus that the nav HTML element should be added to the list of selectable elements in the Advanced section of the settings for the group block. Currently, the tag can only be added with code.
The purpose of the change would be to make it easier for advanced users who are not developers to create accessible navigations.

Even if there is consensus among contributors, there is still one important aspect that must to be solved:
When multiple nav elements exists on a page, the user needs to be able to distinguish the different nav elements, or, in other words,
users needs to know the purpose of the navigation.
The main navigation, the next and previous posts in a query, the comment pagination etc. and any custom navigations that the users adds, they need to be identifiable.

In the linked PR for the post navigation block, this is solved by adding a block attribute and an option where the user can customize the aria-label for the nav element:

<InspectorControls group="advanced">
				<TextControl
					__next40pxDefaultSize
					__nextHasNoMarginBottom
					label={ __( 'Navigation name' ) }
					value={ ariaLabel || __( 'Posts' ) }
					onChange={ ( newLabel ) =>
						setAttributes( { ariaLabel: newLabel } )
					}
				/>
			</InspectorControls>

How should this be solved for the group block?


WCAG: Using ARIA landmarks to identify regions of a page
WordPress.org Theme requirement: ARIA Landmark Roles

@carolinan carolinan added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Enhancement A suggestion for improvement. [Block] Group Affects the Group Block (and row, stack and grid variants) labels Nov 29, 2024
@carolinan
Copy link
Contributor Author

@carolinan carolinan added the Developer Experience Ideas about improving block and theme developer experience label Nov 29, 2024
@t-hamano
Copy link
Contributor

The Group block has ariaLabel block support, but this block support doesn't provide a UI. What if we add the control for ariaLabel only if tagName is nav?

I created a branch to test this: https://github.com/WordPress/gutenberg/compare/group-aria-label?expand=1

3b3f3b33891bec1c95d54304227b2afe.mp4

@carolinan
Copy link
Contributor Author

@t-hamano I would support such a change to the group block.

@bacoords
Copy link
Contributor

+1 In support of this. There should be the ability to put lists and other blocks inside a nav element without relying on the core navigation block or a custom block

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Group Affects the Group Block (and row, stack and grid variants) Developer Experience Ideas about improving block and theme developer experience [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

3 participants