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

[robruiz]

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.

[skorasaurus]

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]

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.

[Casper128]

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]

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