search

mitodl / ocw-hugo-themes

A Hugo theme for building OCW websites
BSD 3-Clause "New" or "Revised" License
5 stars 4 forks source link

Accessibility of facet functions #1222

Closed ibrahimjaved12 closed 1 year ago

ibrahimjaved12 commented 1 year ago

There are 4 files:

  1. www/assets/js/components/Facet.tsx
  2. www/assets/js/components/FilterableFacet.tsx
  3. www/assets/js/components/SearchFilter.tsx
  4. www/assets/js/components/SearchFilterDrawer.tsx

If you search </i> in those files you will see there are many instances of i tags. Based on the code alone, it's difficult to say whether accessibility is handled or not.

So the better option would probably be finding those functionalities in the webpages and seeing how screen reader reacts to it and inspecting the code from there.

HussainTaj-arbisoft commented 1 year ago

I've looked at the code and I don't see many semantic elements being used.

For the time being, I think we can add aria attributes to make the page more accessible. We can focus on interactive elements in particular. In the longer run, I believe this piece of code will require some significant refactoring to make it more semantic.

I've put up a draft PR that fixes the obvious problems with the interactive elements on the relevant pages.

@ibrahimjaved12 @pdpinch does this sound good for the scope of this ticket?

pdpinch commented 1 year ago

does this sound good for the scope of this ticket?

I agree making search fully accessible is a big undertaking. We had attempted it a year or two ago and had to set it aside.

If you can make a first pass to add the aria attributes, we can then have Rich and Mary, our expert consultants, review and give us advice on how to proceed.