search

tl-its-umich-edu / canvas-app-explorer

A Web application that presents a list of Canvas external (LTI) tools with details. When integrated within Canvas, the user can search for specific LTI tool(s), and add or remove those tools from Canvas courses.
Apache License 2.0
4 stars 6 forks source link

Announce number of filter results using `aria-live` (#248) #250

Closed ssciolla closed 2 years ago

ssciolla commented 2 years ago

This PR aims to resolve #248.

jonespm commented 2 years ago

It looks like it works, but it feels like it adds more whitespace to the top.

Is this something that a sighted user cares about or something we should just hide and only be announced for a screen reader? Is it something that would be better placed somewhere else on the page? (These are more of UX questions)

On Canvas App Explorer it says "Showing X Apps" but it's on a row with other sorting actions, rather than alone on its own row.

I guess this is something we could improve after release if there's no good fix ideas.

ssciolla commented 2 years ago

It looks like it works, but it feels like it adds more whitespace to the top.

Agreed. I think it looks OK, but not amazing.

Is this something that a sighted user cares about or something we should just hide and only be announced for a screen reader? Is it something that would be better placed somewhere else on the page? (These are more of UX questions)

We discussed this in the watercooler. Seems like it does give sighted users a little more information (like how many tools are on the page without scrolling), and it seems common practice in other web applications.

Where else would you like it be? Putting it underneath the cards erases the sighted benefit I already mentioned. Spacing could be modified around it, or I could try left or right alignment, though we haven't done that much yet. I will ask for the UX team's opinion.

ssciolla commented 2 years ago

I'll merge now, and ask for the UX team feedback.

jonespm commented 2 years ago

I'm not super sure. That line and the header itself take up almost 10% of the top area and it's feels more noticeable on mobile.

I don't think moving it is a blocker but just want more space for the cards.

Maybe we could make it an Input Adornment on top or bottom of the search box but still have aria announce the change.

This example shows when it changes but I didn't test if it was accessible.