JSFiddle - React, Tailwind, and code Playground

by Comandeer

HTML

<p>CKE</p>
			<div role="application">
				<div role="toolbar">
					<div role="group">
						<a id="cke_8" class="cke_button cke_button__menubutton cke_button_off " href="javascript:void('Label')" title="Label" hidefocus="true" role="button" aria-labelledby="cke_8_label" aria-haspopup="true" aria-disabled="false" aria-expanded="false">
							<span class="cke_button_icon cke_button__menubutton_icon" style="">&nbsp;</span>
							<span id="cke_8_label" class="cke_button_label cke_button__menubutton_label" aria-hidden="false">Label</span>
							<span class="cke_button_arrow"></span>
						</a>
					</div>
				</div>
			</div>

			<p>CKE without moving focus to the menu</p>
			<div role="application">
				<div role="toolbar">
					<div role="group">
						<a id="cke_9" class="cke_button cke_button__menubutton cke_button_off " href="javascript:void('Label')" title="Label" hidefocus="true" role="button" aria-labelledby="cke_9_label" aria-haspopup="true" aria-disabled="false" aria-expanded="false">
							<span class="cke_button_icon cke_button__menubutton_icon" style="">&nbsp;</span>
							<span id="cke_9_label" class="cke_button_label cke_button__menubutton_label" aria-hidden="false">Label</span>
							<span class="cke_button_arrow"></span>
						</a>
					</div>
				</div>
			</div>

			<p>CKE without <code>[aria-expanded]</code></p>
			<div role="application">
				<div role="toolbar">
					<div role="group">
						<a id="cke_10" class="cke_button cke_button__menubutton cke_button_off " href="javascript:void('Label')" title="Label" hidefocus="true" role="button" aria-labelledby="cke_10_label" aria-haspopup="true" aria-disabled="false">
							<span class="cke_button_icon cke_button__menubutton_icon" style="">&nbsp;</span>
							<span id="cke_10_label" class="cke_button_label cke_button__menubutton_label" aria-hidden="false">Label</span>
							<span class="cke_button_arrow"></span>
						</a>
					</div>
				</div>
			</div>

			<p>CKE with...

CSS

.dropdown-menu {
				background: #ccc;
				border: 1px #000 solid;
				margin: 0;
				padding: 0;
				width: 200px;
				display: none;
			}
			.dropdown-menu--open {
				display: block;
			}
			.dropdown-menu li {
				list-style: none;
			}
			.button-desc {
				clip: rect( 0, 0, 0, 0);
				width: 1px;
				height: 1px;
				margin: -1px;
				overflow: hidden;
				position: absolute;
			}

JavaScript

document.getElementById( 'cke_8' ).addEventListener( 'click', function() {
					var menu = document.getElementById( 'menu' );

					menu.classList.toggle( 'dropdown-menu--open' );

					this.setAttribute( 'aria-expanded', menu.classList.contains( 'dropdown-menu--open' ) );

					menu.focus();
				} );

				document.getElementById( 'cke_8' ).addEventListener( 'keyup', function( evt ) {
					if ( evt.keyCode === 32 ) {
						this.click();
					}
				} );

				document.getElementById( 'cke_9' ).addEventListener( 'click', function() {
					var menu = document.getElementById( 'menu' );

					menu.classList.toggle( 'dropdown-menu--open' );

					this.setAttribute( 'aria-expanded', menu.classList.contains( 'dropdown-menu--open' ) );
				} );

				document.getElementById( 'cke_9' ).addEventListener( 'keyup', function( evt ) {
					if ( evt.keyCode === 32 ) {
						this.click();
					}
				} );

				document.getElementById( 'cke_10' ).addEventListener( 'click', function() {
					var menu = document.getElementById( 'menu' );

					menu.classList.toggle( 'dropdown-menu--open' );
					menu.focus();
				} );

				document.getElementById( 'cke_10' ).addEventListener( 'keyup', function( evt ) {
					if ( evt.keyCode === 32 ) {
						this.click();
					}
				} );

				document.getElementById( 'cke_11' ).addEventListener( 'click', function() {
					var menu = document.getElementById( 'menu' );

					menu.classList.toggle( 'dropdown-menu--open' );

					if ( menu.classList.contains( 'dropdown-menu--open' ) ) {
						this.setAttribute( 'aria-label', 'selected' );
					} else {
						this.removeAttribute( 'aria-label' );
					}

					menu.focus();
				} );

				document.getElementById( 'cke_11' ).addEventListener( 'keyup', function( evt ) {
					if ( evt.keyCode === 32 ) {
						this.click();
					}
				} );

				document.getElementById( 'cke_12' ).addEventListener( 'click', function() {
					var menu = document.getElementById( 'menu' );

					menu.classList.toggle(...