create-folder-modal in the media manger made keyboard focused

[akshitrattan]

Pull Request for Issue #36881 .

Summary of Changes

Made the create-new-folder modal in the media manager keyboard focused

Testing Instructions

open the media manager and try pressing tab or shift+tab the focus doesn't shift to the backdrop and stays in the modal

Actual result BEFORE applying this Pull Request

on pressing tab the keyboard focus instead of remaining in the modal shifts to the modal backdrop decreasing its accessibility

Expected result AFTER applying this Pull Request

the keyboard focus remains in the modal

Documentation Changes Required

no changes required P.S.- This might have solved the same problem with other modals as I made the changes in administrator/components/com_media/resources/scripts/components/modals/modal.vue

[brianteeman]

Please update with a meaningful title

[akshitrattan]

Please update with a meaningful title

I changed the title, could you please check and confirm whether the title is appropriate

[brianteeman]

I have tested this item :red_circle: unsuccessfully on 5351f6d801dcc23943c5e167e78e15d36306064e

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/36892.}

[brianteeman]

The new title is better - thanks

unfortunately my tests do not match your gif and there are two problems.

1. Focus should not be moved to the X close on open
2. Can never reach the Create button

[akshitrattan]

The new title is better - thanks

unfortunately my tests do not match your gif and there are two problems.

1. Focus should not be moved to the X close
2. Can never reach the Create button

I can solve the first problem, but i want a clarification that when the modal opens, do you want the focus to be at folder name input and not the close button

[akshitrattan]

The new title is better - thanks

unfortunately my tests do not match your gif and there are two problems.

1. Focus should not be moved to the X close
2. Can never reach the Create button

the second problem is mainly becuase in the variable 'focusableElements' the button:not([disabled]) is there, this means that when the we enter something in the folder name input, the DOM is updated and the button is enabled however, the funtion i created is called before the DOM is updated and thus it is not able to catch the updated DOM

[brianteeman]

I can solve the first problem, but i want a clarification that when the modal opens, do you want the focus to be at folder name input and not the close button

If I remember correctly you do NOT need to do anything to set the focus on load at all.

[akshitrattan]

Member

It was necessary to put the focus on the modal explicitly once it is opened because otherwise focus was set to backdrop buttons As we press the tab button the focus is shifted to the buttons in the backdrop

[brianteeman]

Then you should look at how other (not com_media) modals behave

[akshitrattan]

Then you should look at how other (not com_media) modals behave

I did that is why i made the changes in the modal.vue and not create-folder-modal.vue particulary If you could test the functionality with other modals then it would be great help, as it would tell whether the changes were applied to all the modals or just the create-folder-modal

[brianteeman]

I meant look at modals in other joomla components

[akshitrattan]

I meant look at modals in other joomla components

oh sorry, my bad! @dgrammatiko provided certain links to code snippets of joomla modal component in the comments of the issue, the code I wrote is in a way inspired from that code snippet, as in they work the same

[akshitrattan]

when in folder name input section, if we press the enter key it automatically shifts to the create button and the folder is created

[akshitrattan]

@brianteeman @dgrammatiko I have solved all the issues with the PR

[HarshJaiswani]

I have tested this item :white_check_mark: successfully on 20be5684e8520216745f479f406d88468be143a9

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/36892.}

[RickR2H]

I have tested this item :white_check_mark: successfully on 20be5684e8520216745f479f406d88468be143a9

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/36892.}

[RickR2H]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/36892.}

[akshitrattan]

@dgrammatiko I have updated the PR

[drmenzelit]

@akshitrattan can you please check your PR? It is out-of-date

[akshitrattan]

@akshitrattan can you please check your PR? It is out-of-date

Done!!

[drmenzelit]

@akshitrattan it seems you have some code style problems on your Javascript, the build of the package is failing with this errors: https://ci.joomla.org/joomla/joomla-cms/51921/1/25

[akshitrattan]

@akshitrattan it seems you have some code style problems on your Javascript, the build of the package is failing with this errors: https://ci.joomla.org/joomla/joomla-cms/51921/1/25

yeah, I am working on those issues, and I did solve a few of them, but there is a particular issue regarding the usage of destructured arrays that I can't seem to solve because I'm not gonna lie, I am a bit unfamiliar with that concept, but I am under the process of researching about it and solving the issue, I hope that works fine?

[akshitrattan]

@drmenzelit I have removed all the javascript errors

[akshitrattan]

@drmenzelit @dgrammatiko I have successfully solved the issue!!

[HLeithner]

This pull request has automatically rebased to 4.2-dev.

[joomla-bot]

This pull requests has been automatically converted to the PSR-12 coding standard.

[drmenzelit]

@akshitrattan @dgrammatiko if the vue code is now ok, please mark the conversation as resolved

[drmenzelit]

Closing this in favor of https://github.com/joomla/joomla-cms/pull/39042