Ensure that when the Media Library disables media items so that they cannot be selected, that they are also disabled for screenreader access

Updated issue summary - added details of screenreader interaction and error messages. We weren't able to trigger the error with the keyboard on Chrome or Firefox on Mac.

Although I can't reproduce the exact error on my Mac using Voiceover, I could select more than my share of items by navigating with voiceover to parts of a disabled element using VO-arrow (not Tab navigation) then hitting return on any element other than the checkbox field.
The issue summary reporting NVDA announcing "clickable" suggests this is due to a click event listener still being present on the Media Item, even if clickability/keyboard nav is disabled. This patch removes the click listener when the item is disabled, and returns it if it becomes re-enabled. This fixed the similar issue I experienced with Voiceover, but I'll need confirmation from someone experiencing the exact issue reported to confirm it is fixed for them as well. It would also be good to know if there's a better way of communicating what is happening to screenreader users - this patch should put out the fire of too many items being added but the screenreader experience is largely unchanged (aside from hopefully eliminating the "clickable" said by NVDA).

Fixed the test failure which exposed:

• The need for a main media library js file that all js files have as a dependency. The click listener was added to this.
• When the click listener is removed from disabled items, any links in it become clickable, so an onclick attribute is added to links when they are inside a disabled item.

Lucy and I reviewed the patch. The disabled elements are still announced as "clickable," but, clicking on the "clickable" elements no longer does anything. The NVDA user is no longer able to select more items that are allowed by the field.

For each library item, there are two clickable elements that are available when using NVDA's arrow navigation. Either one works to select the item. It would make for better screenreader usability if there were only one actionable element per media item.

Looks like this needs to be rerolled.

Reroll of #5 (only).

One thing I noticed:

+        console.log('disable items', $items);

console.log should be removed.

Here is the patch which removes the console.log. Kindly review.

Tagging this important bug fix to be worked on at DrupalCon Amsterdam.

Tested on NVDA and was able to address the disabled items having content still reported as "clickable"

Tagging this with "needs manual testing" -- it's not possible to cover this with FunctionalJavascript tests as the problem is only present when screenreaders are enabled.

With NVDA enabled, it becomes (pre-patch) possible to tab into the disabled media items and the return key would select the item.
With Voiceover, the items can't be accessed via tab navigation, but can be via VO-arrow, and the return key can select the item as well.

1. +++ b/core/modules/media_library/js/media_library.main.es6.js
   @@ -0,0 +1,32 @@
   +    /**
   +     * When a user interacts with the media library we want the selection to
   +     * persist as long as the media library modal is opened. We temporarily
   +     * store the selected items while the user filters the media library view or
   +     * navigates to different tabs.
   +     */
   +    currentSelection: [],
   +    /**
   +     * Media item click listener that is used in multiple files.
   +     *
   +     * @param {object} event
   +     *   The click event.
   +     */
   +    clickToSelectTriggerEvent: event => {
   

   Nit: Can these things be separated by an empty line?

   Also, I'm not sure about the naming of clickToSelectTriggerEvent. I would probably go with something like onSelectMediaItem or similar, since it is an event handler.

2. +++ b/core/modules/media_library/js/media_library.ui.es6.js
   @@ -293,7 +280,14 @@
   +          .find('a')
   +          .attr('onclick', 'return false;')
   +          .attr('aria-disabled', true)
   +          .attr('tabindex', '-1');
   

   Nit: I think all of these attr calls can be combined into one, since attr accepts an object of key-value pairs.

   One thing I'm not certain about it setting the onclick attribute to a string of JavaScript. Can't we just use .on('click', () => return false)?

   Another thing here is that I'm not sure we need the onclick stuff at all. Is aria-disabled not sufficient for our purposes?

   One final request is for this to get a nice long comment documenting what we're doing and why. :)

One thing I'm not certain about it setting the onclick attribute to a string of JavaScript. Can't we just use .on('click', () => return false)?

I was also thinking about this. We should actually remove href attribute from the link, or maybe even remove the link entirely for disable items. I think removing the href would already be enough and setting a data-href attribute temporarily for disabled items could be a nice workaround.

This would also solve Lucy and I reviewed the patch. The disabled elements are still announced as "clickable," but, clicking on the "clickable" elements no longer does anything. The NVDA user is no longer able to select more items that are allowed by the field. from #14.

Addressed the feedback in #17
Great call in #18 on removing href, that takes care of it and the JS is cleaner. However, it should be mentioned that I discovered that these links don't even work in dialogs in #3087528: Adjust the listed items available in the media library so that there is only one clickable/focusable element per item. My proposal there is to change those to regular text, which would impact this solution. For now, the hrefs are getting removed and that seems to work well.

I have tested this issue in Drupal 9.1.x-dev with "Orca Screen Reader"(through keyboard). I could select only the allowed number of items. When I selected the allowed number of items, all the other items were disabled for selection but we can navigate through those disabled items. The disabled items were still announced as "clickable", but actually clicking on those "clickable" items no longer does anything.

Video Link:https://drive.google.com/file/d/1pxO3AvSmCtYsrdPEIQQrFpwFPgwfbTsJ/view?usp=sharing

I have check above issue and found that , this issue is related to "issues-3059955" . Once this related issue(3059955) will get resolved this ticket will be also get resolved .

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.