User tests: Successful: Unsuccessful:
In a previous pull request I added code which adds a caption to every table AND indicates how the table is sorted. This is only visible to screen readers. This is very important for accessibility so a user will now all the relevant information for the table being displayed
To improve this further it should also include how the table is filtered.
I have only enabled this for the table of contacts at this time. If/when approved I will do the same for the other tables.
This PR will also allow the designers to add a visual display of the filters which people like @angieradtke have suggested
I also had to use real label strings for the filters instead of re-using the string from the option. I should have done this before but ...
Thanks to @wilsonge for fixing the js
(as this is javascript it will require eithernpm i
or node build.js --compile-js
to test it)
Testing is really simple
Once the pr has been applied and the js compiled go to the list of all contacts in the admin
If you view source you will see
Play around adding filters and it will change as below
A screen reader will see the text as
Table of Contacts, Sorted by: Title - descending, Filtered by: Status: Published
Status | New | ⇒ | Pending |
Category | ⇒ | Administration com_contact Language & Strings JavaScript Repository NPM Change |
Labels |
Added:
?
NPM Resource Changed
?
|
Status | Pending | ⇒ | Fixed in Code Base |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2020-05-09 12:10:24 |
Closed_By | ⇒ | wilsonge |
Thanks!
Right I guess I need to do all the other components now
Add a space after
Sorted by: