Our buttons use aria-checked instead of aria-pressed attribute

[mlewand]

📝 Provide detailed reproduction steps (if any)

1. Open latest feature-rich example (permalink).
2. Turn on show blocks mode using the show blocks button.
3. Inspect the show block button's markup.

✔️ Expected result

Per WAI-ARIA spec a proper attribute for a button role is aria-pressed attribute.

❌ Actual result

It has a following markup:

<button role="button" class="ck ck-button ck-on" type="button" tabindex="-1"
	aria-labelledby="ck-editor__aria-label_eaf76021d0235078ca4f127438479200d" data-cke-tooltip-text="Show blocks"
	data-cke-tooltip-position="s" aria-checked="true"><svg
		class="ck ck-icon ck-reset_all-excluded ck-icon_inherit-color ck-button__icon" viewBox="0 0 20 20">
		<path
			d="m6.395 9.196 2.545-.007V6.498a.598.598 0 0 1 .598-.598h.299a.598.598 0 0 1 .598.598v6.877a.598.598 0 0 1-.598.598h-.299a.598.598 0 0 1-.598-.598v-2.691l-2.545.007v2.691a.598.598 0 0 1-.598.598h-.299a.598.598 0 0 1-.598-.598V6.505a.598.598 0 0 1 .598-.598h.299a.598.598 0 0 1 .598.598v2.691Z">
		</path>
		<path
			d="M15.094 13.417V6.462a.562.562 0 0 0-.562-.562h-.782a1 1 0 0 0-.39.08l-1.017.43a.562.562 0 0 0-.343.517v.197c0 .4.406.67.775.519l.819-.337v6.111c0 .31.251.562.561.562h.377c.31 0 .562-.251.562-.562Z">
		</path>
		<path d="M0 15.417v1.5h1.5v-1.5H0Z"></path>
		<path d="M18.5 15.417v1.5H20v-1.5h-1.5Z"></path>
		<path d="M18.5 12.333v1.5H20v-1.5h-1.5Z"></path>
		<path d="M18.5 9.25v1.5H20v-1.5h-1.5Z"></path>
		<path d="M18.5 6.167v1.5H20v-1.5h-1.5Z"></path>
		<path d="M0 18.5v.5a1 1 0 0 0 1 1h.5v-1.5H0Z"></path>
		<path d="M3.083 18.5V20h1.5v-1.5h-1.5Z"></path>
		<path d="M6.167 18.5V20h1.5v-1.5h-1.5Z"></path>
		<path d="M9.25 18.5V20h1.5v-1.5h-1.5Z"></path>
		<path d="M12.333 18.5V20h1.5v-1.5h-1.5Z"></path>
		<path d="M15.417 18.5V20h1.5v-1.5h-1.5Z"></path>
		<path d="M18.5 18.5V20h.5a1 1 0 0 0 1-1v-.5h-1.5Z"></path>
		<path clip-rule="evenodd" d="M0 1a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v3.583h-1.5V1.5h-17v12.333H0V1Z"></path>
	</svg><span class="ck ck-button__label" id="ck-editor__aria-label_eaf76021d0235078ca4f127438479200d">Show
		blocks</span></button>

We're using aria-checked which is invalid attribute for this role.

It's not limited to show blocks, other "simple" buttons have this issue too, just enable other features of editor (like bold, undetline, lists etc) for your current selection and run following code in devtools:

❓ Possible solution

Just change it to aria-pressed and all should be good.

📃 Other details

I noticed this during live accessibility workshop session on 17th of August. If needed more info could be found there, It should be around 60-70 minute mark.

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Witoso]

☝️ @gorzelinski if you want to dip your toes into something impactful yet simple. cc @arkflpc

[gorzelinski]

Sure, I can take a look.