Fix #657: Added aria-live to find properties results #726
Conversation
| @@ -192,6 +192,7 @@ const PropertyDetailSection: FC<PropertyDetailSectionProps> = ({ | |||
| ) : ( | |||
| <> | |||
| <div className="flex flex-wrap flex-grow h-full min-h-[calc(100svh-101px)] max-h-[calc(100svh-101px)] mt-2"> | |||
| <div aria-live="polite" className="absolute left-[-9999px]" role="status"> You are on page {page} </div> | |||
There was a problem hiding this comment.
Elements that have the role of status are implicitly aria-live polite, so you don't need to include both. I'd suggest keeping just the aria-live since it's a more well-known attribute.
Tailwind has the sr-only class. Could you use that here instead? https://tailwindcss.com/docs/screen-readers#screen-reader-only-elements
There was a problem hiding this comment.
Oh cool, I didn't know Tailwind had that class. :)
It seems like aria-live wasn't registering initially and only announced the page numbers when it did. Moving the div closer to where the cards rendered fixed it.
There was a problem hiding this comment.
One issue with aria-live is that in order for it announce correctly the region has to be rendered on the page initially before the content change, could have been related to the rendering as you suggest.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Just FYI that this issue exists, I don't think they interfere with the aria live, it's more of a label on the active pagination button itself #723
Description
This PR addresses issue #657. Added aria-live element that announces "You are on page #" after updating pagination.