Pending

User tests: Successful: Unsuccessful:

avatar adarshdubey03
adarshdubey03
7 Mar 2026

…ring list selection

Pull Request resolves #41195 .

  • I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.

Summary of Changes

Toolbar buttons that require list selection currently use the native disabled attribute. Because disabled elements are removed from the keyboard focus order, these buttons cannot be reached by keyboard users or detected by assistive technologies.
This change replaces the native disabled attribute with aria-disabled="true" while keeping the .disabled class for visual styling. The existing component logic already prevents execution when no items are selected, so the behavior remains the same while improving accessibility.

Testing Instructions

Go to administrator → content → articles.
Ensure that no articles are selected.
Use the Tab key to navigate through the toolbar.
Verify that the Actions button can now receive keyboard focus.
Press Enter on the button while no items are selected, no action should be executed.
Select one or more articles.
Confirm that the toolbar buttons become active and function normally

Actual result BEFORE applying this Pull Request

When no items are selected, toolbar buttons using the native disabled attribute cannot receive keyboard focus. As a result, keyboard users and assistive technologies cannot detect that these actions exist.

Expected result AFTER applying this Pull Request

toolbar buttons remain visible and focusable in the keyboard navigation order while being marked as disabled through aria-disabled="true". They continue to appear visually disabled and remain non-functional until the required list selection is made.

Link to documentations

Please select:

  • Documentation link for guide.joomla.org:

  • No documentation changes for guide.joomla.org needed

  • Pull Request link for manual.joomla.org:

  • No documentation changes for manual.joomla.org needed

avatar adarshdubey03 adarshdubey03 - open - 7 Mar 2026
avatar adarshdubey03 adarshdubey03 - change - 7 Mar 2026
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 7 Mar 2026
Category JavaScript Repository NPM Change
avatar brianteeman brianteeman - test_item - 7 Mar 2026 - Tested successfully
avatar brianteeman
brianteeman - comment - 7 Mar 2026

I have tested this item ✅ successfully on 219fc74

GREAT fix - thank you


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/47324.

avatar drmenzelit
drmenzelit - comment - 8 Mar 2026

I'm not sure this change is an improvement. Making the button reachable doesn't add helpful information, the screen reader announces it as "not available dropdown", so now the user knows there is an actions button there, but doesn't know what to do with it.

https://www.codestudy.net/blog/when-to-use-the-disabled-attribute-vs-the-aria-disabled-attribute-for-html-elements/
https://kittygiraudel.com/2024/03/29/on-disabled-and-aria-disabled-attributes/

avatar brianteeman
brianteeman - comment - 8 Mar 2026

@drmenzelit I massively disagree

avatar adarshdubey03
adarshdubey03 - comment - 9 Mar 2026

Hii @drmenzelit !!

The goal of this change is mainly to improve discoverability for keyboard and assistive technology users. When the native disabled attribute is used, the element is removed from the tab order entirely, which means keyboard users may not be aware that these actions exist

using aria-disabled="true" keeps the button focusable while still conveying that the action is currently unavailable. The existing component logic already prevents execution when no items are selected, so the behavior remains unchanged.

avatar Fedik
Fedik - comment - 9 Mar 2026

A whole point of use native <button> element in the toolbar is to support native browser behavior without such workarounds.

I am on a side with @drmenzelit

avatar brianteeman
brianteeman - comment - 9 Mar 2026

@Fedik it's not a work around. This is exactly the correct way to mark a button as disabled to assistive technology. Without it the button is invisible

avatar Fedik
Fedik - comment - 9 Mar 2026

This is exactly the correct way to mark a button as disabled to assistive technology. Without it the button is invisible

You do not find strange that native browser element need such thing?
To me it is something wrong with suggested approach. We maybe missing something.

@drmenzelit wrote: so now the user knows there is an actions button there, but doesn't know what to do with it.

is there an aria- feature that can let say "explain the dropdown/button behavior"? kind of aria-label but not exactly.
Something like "Button is disabled until action XY happened". Or maybe use aria-label?

avatar Fedik
Fedik - comment - 9 Mar 2026

I mean, from what I read/understood the screen reader can see the disabled button,
But do not explain that the button can change state (and how to change the state). Nor current PR.

avatar adarshdubey03
adarshdubey03 - comment - 9 Mar 2026

@Fedik One option might be using aria-describedby to reference a short hint explaining the condition, for example that the action becomes available once an item is selected. that way the button remains discoverable while also giving screen reader users some context about how the state can change

avatar brianteeman
brianteeman - comment - 9 Mar 2026

I mean, from what I read/understood the screen reader can see the disabled button,

No it cant and thats the problem being solved here

avatar drmenzelit
drmenzelit - comment - 9 Mar 2026

I got an answer from someone working on accessibility (it is similar to other explanations we have already posted here). It is correct to use ara-disabled to make the button accessible, my criticism is the missing information about the function of the button.

For this use case, I'd recommend aria-disabled="true" with clear context. The button should remain focusable with a label like "Actions (select items to enable)" and include aria-describedby pointing to text explaining why it's disabled. This way screen readers can discover it and understand the requirement, unlike true disabled which removes it from keyboard navigation entirely.
For disabled buttons on a toolbar — keep it in the tab order. Screen reader users need to know the button exists even when it's unavailable, otherwise they won't know the feature is there at all. Use aria-disabled="true" instead of the disabled attribute so it stays focusable. Then announce why it's disabled via aria-describedby.

Add a Comment

Login with GitHub to post a comment