[#12535] Instructor Course Page: Make "Show" group tabbable

[rexong]

Fixes #12535

Outline of Solution

I have added attributes tabindex="0" so that user can use the tab button to focus on the Show anchor tag.
Then, I added (keyup.enter) so that when the user pressed enter it will render the statistic.

In addition, I noticed that when hovering over the Show anchor tag with the cursor, the cursor is not a pointer. As such, I have added a CSS clickable to make the cursor a pointer when hovering over the anchor tag.

Here is a video demo

TEAMMATES.-.Online.Peer.Feedback_Evaluation.System.for.Student.Team.Projects.-.Google.Chrome.2023-08-01.13-35-04.mp4

[rexong]

I may have complicated my solution by using tabindex and keyup.enter. I have updated the solution and removed the square bracket for tmRouterLink and assign its current route. This allows user to tab through the show anchor tag and also allow them to press enter to render the statistics.

[weiquu]

Thanks @rexong! Is the clickable CSS class still relevant? I removed it from the HTML and still saw a pointer on hover.

Also, when using a screen reader, the element is being read as a "visited link" - not sure if that's appropriate in this instance. I would suggest adding role="button" to each of the elements; then, the screen reader will simply tell the user that it is a button, removing the confusion of "visited" and "link". (A button also seems more similar to what the "Show" element does, which is a clickable element that triggers a response when activated by the user)

[rexong]

Hello @weiquu
I would have to double check on the clickable again.
Regarding the second point, would it be better if we change the tag from an <a> tag to a <button> tag instead?

[weiquu]

Regarding the second point, would it be better if we change the tag from an <a> tag to a <button> tag instead?

Hmm not too sure about this... @ seniors (@zhaojj2209 @samuelfangjw @wkurniawan07) do you foresee any issues with the change from <a> to <button>? I think the "Show" element behaviour and functionality is more like a button, but am unclear as to why it was implemented as a link.

@rexong in any case, I think we can keep it as <a> for this PR, since any change will likely have to be implemented in other components as well that go beyond the scope of this issue

[samuelfangjw]

Yes please do. As pointed out by @weiquu, element is wrongly tagged here.

I also have reservations about styling buttons as links, but might be acceptable in this case since it's existing behaviour.

[rexong]

Okay, I will make the change to button instead.

[rexong]

Ready for review!

[weiquu]

Quick comment, otherwise looks good!

[weiquu]

Can I check if this id attribute should be here or for the previous column? I think it was previously on the "Teams" column... doubt it makes much of a difference though, but just in case, should we shift it back?

[rexong]

Updated

[weiquu]

LGTM!

[rexong]

Hello, bumping this PR for final review!

[rexong]

Hello, bumping this PR for final review!