[BUG]: Certain ARIA roles must contain particular children

[KolliAnitha]

Describe the bug

Ensures elements with an ARIA role that require child roles contain them

Steps To Reproduce

Login to www.oppiatestserver.org
Go to Contributor dashboard
In Review Questions tab, select any question and click on Review button
Run axe devtools
See errors

Expected Behavior

To solve this problem, you need to
Fix at least (1) of the following:
Required ARIA child role not present: tab
Element has no aria-busy="true" attribute

Screenshots/Videos

What device are you using?

Desktop

Operating System

Other

What browsers are you seeing the problem on?

Chrome

Browser version

108.0.5359.111

Additional context

No response

[sagangwee]

For new contributors

• See the Contributor dashboard wiki page for how to get started developing for the contributor dashboard.
• See the Testing for Accessibility wiki page for accessibility testing guidelines. To fix this issue, you will likely need to manipulate the HTML or CSS.

[github-actions]

Hi @sagangwee, thanks for proposing this as a good first issue. I am removing the label for now and looping in @DubeySandeep to approve the label. It will be added back if approved. Thanks!

[bhubneshmaharana]

and sir pls assign me admin role so I can fix this error and creat a PR

[seanlip]

@bhubneshmaharana Per the guidance at https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue, please provide an explanation of what your PR will do (with names of files you're changing, what you plan to change in each file, etc.). If it looks good, we can assign you to this issue.

Please also follow the other instructions on that wiki page if you have not yet done so. Thanks!

[mansi1234567890]

hello sir , please assign me this task so , that I can clear the bug and get a good experience.

[seanlip]

@mansi1234567890 See my previous comment in this thread, which has instructions on how to claim an issue.

[pawelborkar]

Hi @seanlip,
I was checking the issues and saw that lot of people are interested in solving the bugs are asking for assigning the issues to them.

And you replying to them by

<-username-> Per the guidance at https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue, please provide an explanation of what your PR will do (with names of files you're changing, what you plan to change in each file, etc.). If it looks good, we can assign you to this issue.

Please also follow the other instructions on that wiki page if you have not yet done so. Thanks!

I think we can automate your reply by implementing a github-action-bot which will specifically target the assign keyword from the first time contributors and post this reply to them tagging their username.

What do you think?

[seanlip]

Hi @pawelborkar, I'm not sure if we should do that, but thanks for your suggestion. Sometimes people do actually provide the necessary details and ask to be assigned, and in such cases I think it would not be great for them to receive that message.

The thing I am confused about is that this guidance is part of our standard onboarding flow and wiki pages, which I feel like many people might be skipping. If you have a suggestion for how to make this more prominent somehow, we'd be all ears!

[dante381]

We can fix the issue by adding aria-busy=true attribute to the highlighted tag in file core/templates/components/state-editor/state-responses-editor/state-responses.component.html and core/templates/components/state-editor/state-solution-editor/state-solution-editor.component.html

@seanlip Can i be assigned to this issue?

[seanlip]

Thanks @dante381. One question: conceptually, what is going on here? What is the aria role that's problematic, and why does it need to "contain particular children"? What is the significance of putting aria-busy where you're putting it?

(In order to assess whether an auto-recommended fix makes sense, it's necessary to understand a bit more about why we're doing the fix. If you can explain this and confirm that your fix is the right thing to do conceptually, I'd be happy to assign you the issue.)

[dante381]

Aria role is required as to define the purpose of the element. As developers try to understand the code the aria role allows to understand the role of the tag and its purpose. The aria-busy attribute set to true indicates that region is loaded with new content.

This will be helpful for people who use a screen reader.

@seanlip I hope this explains the fix.

[seanlip]

Yup, I know what aria roles are -- my question is why we are making this specific change for these specific elements. For example, could you please explain which element exactly needs to contain particular children, and why? And then, conceptually, what are you adding the aria-busy to and why is it the right fix?

[PVenkatArvind]

Greetings! @seanlip can you please assign me this issue

will make changes to state-responses.component.html

adding aria-busy = "true"

before

after

Ran an Axe dev tool scan
To solve this problem, you need to fix at least (1) of the following:
Required ARIA child role not present: tab
Element has no aria-busy="true" attribute-->
Adding the aria-busy="true" element indicates and informs the users that the content is still loading or is in progress /updating
next why are we making changes to these specific elements or div elements is because role is tab so it is an tab interface just like keyboard focus where use tab to check its also a tab component and hence we require to switch contents and components which provides the user better feature to use oppia interface and navigate the interface better and this aria - busy = " true" tells the user that its loading and not ready for interaction for a certain time or immediate interaction

[dante381]

Sorry, I misunderstood the question. I am adding the aria-busy attribute to the following tags ,

the above code is from core/templates/components/state-editor/state-responses-editor/state-responses.component.html.

the above code is from core/templates/components/state-editor/state-solution-editor/state-solution-editor.component.html

But after going through the code again, I missed that the parent containers of these elements contain a role attribute tablist.
So I changed the aria-busy=true to role=tab. This provides a clearer understanding of the element.

the above codes belong to core/templates/components/state-editor/state-responses-editor/state-responses.component.html.

the above code belongs to core/templates/components/state-editor/state-solution-editor/state-solution-editor.component.html.

[seanlip]

This seems sensible to me conceptually, thanks @dante381. Assigning you.

(@PVenkatArvind For the record, your explanation is a bit too generic and I can't understand its relevance to the specific code that is under consideration. So, even though you wrote it first, I can't assign you to this issue.)

[PVenkatArvind]

Greetings! @seanlip , Noted ! with thanks !

[dante381]

@seanlip Could you please review the changes?

[seanlip]

Hi @dante381, your PR reviewer is @nithinrdy. I'll defer to him to take a pass. Thanks!

[Ash-2k3]

Closing as fixed in #17627

[satendrakumar50]

I want join your organization, and I know react,javaScript,Tailwind for css,Normal Css,Html

[Shahbaz898414]

I want join your organization.