ExpandableSectionToggle - allow adding aria-label to internal button

[dgdavid]

Is this a new component or an extension of an existing one?

Kind of extension to an existing one.

Describe the feature

When using a detached ExpandableSection, it would be beneficial to have the ability to pass an aria-label to the underlying element used by ExpandableSectionToggle. This would enhance accessibility in the following scenarios:

• Icon-only toggles: when using only a custom icon (actually not possible out-of-the-box in current implementation, but we are hidden the default one with CSS :/), being able to set a specific aria-label would ensure that the toggle remains accessible.

• Shortening accessibility text: when the toggle has verbose text to provide a larger clickable area (e.g., for better usability), an aria-label would allow a more concise accessible label to be provided, reducing redundancy without compromising accessibility.

While the second use case approach might be debatable and probably the right approach would be not using such a large text for the toggle , providing an aria-label option seems reasonable and could address a few corner cases for users requiring tailored accessibility.

Are there visuals for this feature? If applicable, please include examples for each state and for varying widths

No

Any other information?

Request actually applies to not detached version too. In fact, the code for producing both toggles are almost identical with the exception of onClick prop.

[thatblindgeye]

@dgdavid Allowing an aria-label should definitely be added in. FWIW we actually ahve a PR up that would allow customizing the icon #12051 so you may be able to get rid of some of that custom CSS if we do merge that enhancement 🎉

For your second scenario, I would actually advise against overriding the visible text to make the accessible name shorter - unfortunately definitely the whole "probably the right approach would be not using such a large text for the toggle" as you mentioned 😆.

There have been cases where I had recommended overriding the accessible name to increase it for uniqueness (specifically a table implementation where there were a bunch of repeated links with the same text like "Read documentation", where basically applying an aria-labelledby so that the links accessible name was that visible text + some other visible text within the row).

An interesting read on this topic if you're interested, Don't Overwrite Visual Labels With aria-label (admittedly this article may actually go against what I said in the above paragraph, but that specific scenario might align with the articles' last section).

[dgdavid]

@thatblindgeye, thanks a lot for both, the comment and addressing this feature request in #12071.

For your second scenario, I would actually advise against overriding the visible text to make the accessible name shorter -

Thanks for highlighting that, I'll keep it in mind.

unfortunately definitely the whole "probably the right approach would be not using such a large text for the toggle" as you mentioned 😆.

Sadly, we have a rather unusual use case where a shorter aria-label would make sense. At least until we manage to simplify and improve that part of the interface.

An interesting read on this topic if you're interested, Don't Overwrite Visual Labels With aria-label (admittedly this article may actually go against what I said in the above paragraph, but that specific scenario might align with the articles' last section).

I appreciate the recommendation 🙏 I'll definitely check it out.