Problem/Motivation

The inserted <label> markup does not contain any string, which is bad for accessibility.

Steps to reproduce

Create button block, look at source code.

Proposed resolution

Add the button description text as label text as well.
Adding another field in the config settings to allow the definition of a CSS class to be set for the label also seems necessary. Bootstrap themes would most likely set "sr-only" there, so the labels get hidden for non-screenreader users.

User interface changes

Added configuration option for CSS class to be used.

Issue fork admin_feedback-3473523

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

tgoeg created an issue. See original summary.

tgoeg’s picture

tgoeg commented
Issue tags: +Accessibility
bserem’s picture

bserem commented
Issue tags: +GreeceWinterSprint2024
gkffzs’s picture

gkffzs commented
Assigned: Unassigned » gkffzs

gkffzs opened merge request !8

gkffzs’s picture

gkffzs commented
Status: Active » Needs review
tgoeg’s picture

tgoeg commented

Looks good to me, perfect!

You chose "visually-hidden" and it seems to work well on a bootstrap-based theme. I wonder if this is universally applicable to all templates? It seems to be inherited from the "stable" theme in my case. I am not 100% we can rely on this to exist anywhere?

  • bserem committed d09b6760 on 8.x-2.x authored by gkffzs 
    Issue #3473523: Improve label accessibility.
bserem’s picture

bserem commented
Assigned: gkffzs » Unassigned
Status: Needs review » Fixed

Merging following the "looks perfect" review. Thanks both of you.

Should the need arise for further improvements we can open a new issue in the future.

briangon’s picture

briangon commented

Why not just remove the label element entirely and use an aria-label on the button?

That's how I've got it patched. If you go that route I won't need to patch it anymore. 

'#attributes' => [
     [...]
     'aria-label' => 'Answer Yes, this page was helpful',

The label markup appears replicated when rendering, which might be another issue that this solves too.

Only local images are allowed.

tgoeg’s picture

tgoeg commented

I am not an a11y pro - my initial description stems from an a11y certification authority that suggested to solve it that way.

https://stackoverflow.com/questions/22039910/what-is-aria-label-and-how-... mentions bad support for aria-label. The referenced page seems quite dated. Do you know whether things have changed to the better in the meantime?

The description of `aria-label` indeed seems to fit better than adding a label that has to be hidden anyway.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.