Skip to content

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

Open
@carolinan

Description

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Developer ExperienceIdeas about improving block and theme developer experience[Block] GroupAffects the Group Block (and row, stack and grid variants)[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions