fix(modal): fix bug where the list of focus-able elements was not re-computed when the state of certain children has changed [AC-4105]

[Stefan3002]

Done

• Fix bug where the list of focus-able elements was not re-computed when the state of certain children has changed
• This was done by using a Mutation Observer that checks for specific changes in the following attributes in the children of the modal : attributeFilter: ["disabled", "tabindex", "contentEditable"],

QA

Pinging @canonical/react-library-maintainers for a review.

• Just use the modal component with a disabled button and start tabbing: you must not reach the button
• Now enable the button programatically and start tabbing: you should reach the enabled button (previously impossible)
• For example: Create a disabled button and an input field. If you fill the input field with a specific string, you must enable the button. Now you should also be able to tab to the button
• Simple example:

Fixes

Fixes: # AC-4105

[webteam-app]

Stefan3002 is not a collaborator of the repo

[jmuzina]

QA Demo will be available shortly here (@Stefan3002 check your email for a GitHub team invite link, which will allow demos to be automatically spun up for you in future)