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

Button Block - Ability to make a button a semantic <button> element #57404

Open
robruiz opened this issue Dec 27, 2023 · 4 comments
Open

Button Block - Ability to make a button a semantic <button> element #57404

robruiz opened this issue Dec 27, 2023 · 4 comments
Labels
[Block] Buttons Affects the Buttons Block [Type] Enhancement A suggestion for improvement.

Comments

@robruiz
Copy link

robruiz commented Dec 27, 2023

What problem does this address?

Currently, when a user adds a "button" to the buttons block, it's not a semantic button element. The only option is a div with an anchor tag inside. This is bad for semantic mark up and also effects SEO and accessibility to some degree.

What is your proposed solution?

Either make the default element a instead of a

or add the ability for the admin to choose what type of element to use (similar to how the group block allows you to control it's element tag type). Personally, I feel the anchor tag should wrap the button element, but I'm indifferent here as anything would be better than the current approach.

@robruiz robruiz added the [Type] Enhancement A suggestion for improvement. label Dec 27, 2023
@Mamaduka Mamaduka added the [Block] Buttons Affects the Buttons Block label Dec 27, 2023
@skorasaurus skorasaurus added the [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed label Dec 27, 2023
@skorasaurus
Copy link
Member

Hi,

Thanks for reporting;
This has been discussed and/or requested in #36052 . Feel free to add your reaction and follow its progress in the issue.

@robruiz
Copy link
Author

robruiz commented Dec 28, 2023

I'm not so sure these two issues are exactly related. Nowhere in the description does it discuss the semantics or exact element usage. I'm surprised this is being looked at as such a trivial issue. The semantics are extremely misleading currently.

@skorasaurus skorasaurus reopened this Dec 28, 2023
@Casper128
Copy link

At this moment I am trying to make a website with Gutenberg which should be accessible with a level AA or AAA if possible but this behavior that @robruiz reports is clearly not healthy for accessibility

@Casper128
Copy link

Casper128 commented Mar 6, 2024

I am currently thinking of using this focus while Wordpress responds something for a solution, this leaves my solution alternative for another person

index.js

/**
 * WordPress dependencies
 */

import { __ } from '@wordpress/i18n';
import { addFilter } from '@wordpress/hooks';
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody,SelectControl } from '@wordpress/components';

/**
 * Custom controls
 *
 * @param {*} BlockEdit
 * @return {Element} BlockEdit instance
 */


const withHandlerTagNameControls = (BlockEdit) => (props) => {
	const { attributes: { type, tagName },attributes, setAttributes, name } = props;
	if (name !== 'core/button') return <BlockEdit {...props} />;
	console.log(props);
	return (
		<>
			<BlockEdit {...props} />
			<InspectorControls>
				<PanelBody title={'Controls TagName'} initialOpen={true}>
					<SelectControl
						label={'tagName'}
						value={tagName}
						options={[
							{ label: 'hyperlink', value: 'a' },
							{ label: 'Button', value: 'button' },
						]}
						onChange={(value) => setAttributes({ tagName: value })}
					/>
				</PanelBody>
			</InspectorControls>
		</>
	);

};

addFilter('editor.BlockEdit', 'core/button', withHandlerTagNameControls);

this can be used with webpack or wp scripts in plugins basic for compiler and adding in your theme

@skorasaurus skorasaurus removed the [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed label Jun 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

4 participants