[#12279] Instructor home page: Improve display of card header on mobile

[Mex7180]

Fixes #12279

Card-header-toolbar changed to display as flex-container on mobile screens (see screenshots below) and changed from div-element to button element for screenreader compatibility.
An other option would be with using grid to create a 2X2 grid with all 4 buttons. I also think the panel-chevron component (drop-down icon) could be positioned to the right instead of below.
Any opinions?

Screen-size of 450px

Screen-size of 320px

Screen-size of 768px

[Mex7180]

Ready for review :D

[jasonqiu212]

Hi @Mex7180, Thank you for your contribution to the project, and sorry for the late review! Here are my comments:

1. As mentioned by yourself, I think the dropdown icon can be positioned to the right to remain consistency with the desktop site.
2. As mentioned by the issue, could you also change the header card itself to be a button element (i.e. Observe that clicking on the card itself toggles the dropdown). Currently, the header card is a <div> element and cannot be picked up by a screen reader. Changing it to a <button> will resolve this issue. Feel free to reference [#12081] Modify question headers for instructor  #12228 on implementing this change!

Thanks!

[Mex7180]

Hi @jasonqiu212, I tried earlier to change the card header to a button element and tried again today. But I keep running into Issues with the Accessibility Tests failing, caused by nested interactivity (Test error: nested-interactive - Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies (https://dequeuniversity.com/rules/axe/4.6/nested-interactive?application=axeAPI)).
I've found the same issue in this PR #12396. They decided to leave the card header as a div.
I've seen your PR and tried to copy your solution, but it seems like I'm missing something. Have you used any aria-attributes or labels that I might be missing?

PS: The dropdown icon (panel-chevron) is now being displayed on the right.

[nusoss-bot]

Folks, This PR seems to be stalling (no activities for the past 7 days). 🐌 😢
Hope someone can get it to move forward again soon...

[Mex7180]

Hi @jasonqiu212 and @zhaojj2209
I had a look at the PR you send me. It looks like the card header was changed back from a button to a div because of tests failing. I'm running into the same issue with the button element as header because of problems with nested interactive elements (accessibility). The same issue was encountered in this PR #12396.
To your concern about screen-readers not being able to pick up the drop-down-button, I think this could be resolved by changing the panel-chevron component.

My changes

• change header to be displayed as flex-container
• change panel-chevron component to be a button and always display on the right

By changing the panel-chevron component to a button it can be selected with the keyboard, has a description and has the aria-expanded attribute to make sure screen readers can also tell if the table-body is being shown or not.

Let me know what you think.

Snapshots:

small window size (mobile):

big window size (desktop)

Panel Chevron selected with keys:

[Mex7180]

Ready for review :D

[jasonqiu212]

Hi @Mex7180, Once again I apologize for the late review, and thank you for investigating into this issue!

I took a further look at #12396, and you are correct! My bad, I believe the PR I gave you for reference was merged before the accessibility test was fully included.

While #12396 passed the accessibility test by reverting the button to div, I noticed that the panel dropdown still was not accessible via tabbing and cannot be picked up by the screen reader.

Hence, I think your solution of converting the panel chevron to a button is genius and serves as an alternative to changing the entire header into a button, since:

• Users can toggle dropdown via tab and screen readers can now pick up the dropdown
• Passes accessibility test
• Preserves desktop functionality where entire panel is clickable

Thank you for coming up with this solution :)

There are some nits I would like to raise, because the panel chevron is used in many components. Let's ensure that changing the chevron to a button does not affect the appearance in any of the pages!

@domlimm @cedricongjh Do you think this solution works to improve the accessibility of the dropdown panel? Hoping to look for more opinions on this fix :)

[cedricongjh]

Solution LGTM! (Do look into the removable of the aria label for the rich-text-editor though, as @jasonqiu212 mentioned)

[jasonqiu212]

LGTM! Thank you for contributing to TEAMMATES!

[cedricongjh]

LGTM, thank you for the contribution!