MCKIN-12194 To close MCQs MRQs dialogue via keyboard to make them accessible through keyboard

[musmanmalik]

The feedback tooltip non-modal dialogs cannot be closed via keyboard. The screen reader does not announce anything when the button receives keyboard focus. Users of assistive technology and keyboard-only users don't have access to controlling the dialogs.

When we submit response of MCQ or MRQ having tips dialogue. The dialogue had close control which cannot be closed with keyboard. In this Pull Request I have made them accessible by changing div to button and some supporting style.

@xitij2000 @Agrendalath Please review this PR .

[lgp171188]

@musmanmalik, I am reviewing this PR now.

[lgp171188]

@musmanmalik, I added an MCQ XBlock with a tip message for a choice to a test course on the Ironwood devstack. However, I could not get the close button to show up at all. There is CSS to hide it and I could only get it to show up by manually disabling that style using the browser developer console. Is this expected or did I miss configuring something? If it is the latter, can you post a detailed list of testing instructions?

With the close button visible, I was able to see the style to highlight the close button on keyboard focus.

Without keyboard focus

With keyboard focus

[musmanmalik]

Hi @lgp171188 thank you so much for your response.
By default the close control is hidden by using css which you pointed; yes its expected behavior of close button and you did not miss any thing here and we need to enable it manually for testing as you have done.

Previously it was div element which can not get keyboard focus. This have been changed to button which is accessible via keyboard. So there is need to test close button is accessible or not.

So I have tested it by using xblock-sdk.

[lgp171188]

@musmanmalik, testing using the XBlock SDK makes no sense if the actual usage of the XBlock doesn't show the close button for which these changes have been made. So should this PR be tested in the solutions devstack or the associated custom LMS frontend?

[musmanmalik]

@lgp171188 By default its hidden in xblock. We are using custom LMS and we have enabled this close button in our environment.
We are working on accessibility. So in order to meet accessibility target we need to change this to button instead of div to make them keyboard accessible.
Let me know if anything required further from my side.

cc: @xitij2000

[lgp171188]

@musmanmalik, since I don't have a working solutions devstack and don't want to spend a lot of time trying to get it to work, is this PR available somewhere on some QA/integration or similar environments so that I can test it directly there?

[musmanmalik]

@lgp171188 No, This could not be available on QA/Integration or any environment at our side until not merged in xblock.

cc: @xitij2000

[lgp171188]

@musmanmalik, I asked for a teammate's help to test and verify this on the custom frontend.

[Agrendalath]

👍

• I tested this: tested the problem-builder with and without this change on the custom frontend
• I read through the code
• I checked for accessibility issues
• Includes documentation

[musmanmalik]

@lgp171188 , @Agrendalath Please create a release tag as well.

[lgp171188]

@musmanmalik, since the v3.3.14 has already been created, can you merge/rebase the master branch and bump the version to 3.3.15? I will merge this PR and create a release tag once that is done.

[musmanmalik]

@lgp171188 version updated; kindly merge it and create. Many thanks.

[lgp171188]

@musmanmalik, I have merged this PR and tagged the v3.3.15 release.