Fix the Lock Block modal dialog group labelling and semantics

[afercia]

Description

When locking a block, a modal dialog opens. So far, so good.
There are a few accessibility issues to fix in the modal dialog content though.

1
The checkboxes within the modal are grouped in a div element with role=group and aria-labelledby. Turns out the aria-labelledby ID reference value points to the first checkbox label text. As a result, the actual name of the group is 'Lock all':

gutenberg/packages/block-editor/src/components/block-lock/modal.js

Lines 111 to 121 in 37bb7c5

	<div
	role="group"
	aria-labelledby={ instanceId }
	className="block-editor-block-lock-modal__options"
	>
	<CheckboxControl
	__nextHasNoMarginBottom
	className="block-editor-block-lock-modal__options-title"
	label={
	<span id={ instanceId }>{ __( 'Lock all' ) }</span>
	}

When tabbing into the group, screen readers will announce the group name 'Lock all", which is wrong. The complete announcement would be something like: Lock all, unticked, thickbox, Lock all, group:

Instead, the group name should clarify what all the three checkboxes are about. That's something along the lines of 'Choose what to restrict or lock' (better wording needed).

Worth also reminding that a <fieldset> element with a visible <legend> element is always preferable to the ARIA pattern with role=group. One more thing to remind is that the labelling of a fieidset / group should be short: it's the group name. It's not the place for long descriptions or instructions.

2
The first checkbox <label> element contains a <span> element, not sure why. Please remove it. If an ID is needed, that should be set on the <label> element itself but it's likely that to fix the previous point an aria-label should be used in place of aria-labelledby so the ID won't be necessary any longer.

3
Checkboxes nesting.
The first checkbox 'Lock all' is logically a 'first-level' option that contains tho logical 'sub-options'. However, only the second and third checkboxes are list items in a single-level unordered list. There's no great value in using a list this way. If the goal is to convey the logical nesting of the options, the 'Lock all' checkbox should be within a list and the other two checkboxes should be in a nested list.
Also, worth reminding that Safari doesn't expose to screen readers the list role when the list is styled. VoiceOver doesn't announce the list as a list, while other screen readers do. To cover this Safari + VoiceOver inconsistency, each ul element should have a (technically redundant) role=list attribute.

Step-by-step reproduction instructions

• Edit a post.
• Select a paragraph block and choose 'Lock' from its toolbar > Options menu.
• A 'Lock paragraph' modal dialog opens.
• Use the Chrome dev tools > accessibility tan to inspect the div element with role=group.
• Observe the div accessible name is 'Lock all'.
• Inspect the first checkbox.
• Observe its associated label element contains an unnecessary span element.
• Inspect the other two checkboxes.
• Observe they're within an unordered list, while the first checkbox isn't.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Mamaduka]

Thank you for the great feedback, @afercia ���

If I recall correctly, I borrowed the markup from Preferences > Block Visiblity UI. Now I realize it didn't translate correctly for this model.

Question: Should we use the paragraph text as the <legend> value or shorten it?

This is the current text - "Choose specific attributes to restrict or lock all available options."

[afercia]

@Mamaduka thanks for the ping.

Question: Should we use the paragraph text as the value or shorten it?

A shorter text for the legend would be ideal. A longer description may be provided separately, if needed.

[afercia]

@Mamaduka @ciampo any objections if I assign this issue to myself and try a fix?

[Mamaduka]

@afercia, no objections 🙇 Sorry, that I couldn't find time to work on it.