This is not meant as a prompt for change or critique, but I feel somewhat overwelmed by your whole approach. I'd really appreciate if you could explain some things:
Why did you choose to first build your table using the table element and then rebuild it in your mobile approach with divs containing headings and description lists? To avoid delivering content twice, would it not make sense to only use the mobile friendly approach instead and change the display to match a table-like appearance with css and where needed use aria attributes to increase accessabillity?
I also am slightly confused as to how you are using svg in general. Your svg images are build on a large size 100x200 for seemingly no reason and then rescaled using css. Would 16x24 not do the trick too? Do smaller svg files create accessabillity issues? Also why not deliver the svg using css background url utf8? I would think the url approach would allow the images to be cached and reduce the total document file size.
Since svg allows the use of an internal title and desc element and since the button element could use a title attribute, why did you choose to use a hidden span element following the svg? Is the button element required to contain text content?
Lastly I am wondering why you chose to use react for this. The sorting task I see could be achieved by js array sorting after which you could reinsert the rows to match the sorted array. Does react have a significant benefit or is it a personal preference?
This is not meant as a prompt for change or critique, but I feel somewhat overwelmed by your whole approach. I'd really appreciate if you could explain some things:
Why did you choose to first build your table using the table element and then rebuild it in your mobile approach with divs containing headings and description lists? To avoid delivering content twice, would it not make sense to only use the mobile friendly approach instead and change the display to match a table-like appearance with css and where needed use aria attributes to increase accessabillity?
I also am slightly confused as to how you are using svg in general. Your svg images are build on a large size 100x200 for seemingly no reason and then rescaled using css. Would 16x24 not do the trick too? Do smaller svg files create accessabillity issues? Also why not deliver the svg using css background url utf8? I would think the url approach would allow the images to be cached and reduce the total document file size.
Since svg allows the use of an internal title and desc element and since the button element could use a title attribute, why did you choose to use a hidden span element following the svg? Is the button element required to contain text content?
Lastly I am wondering why you chose to use react for this. The sorting task I see could be achieved by js array sorting after which you could reinsert the rows to match the sorted array. Does react have a significant benefit or is it a personal preference?