search

DSpace / dspace-angular

DSpace User Interface built on Angular.io
https://wiki.lyrasis.org/display/DSDOC8x/
BSD 3-Clause "New" or "Revised" License
122 stars 390 forks source link

[Deque Analysis] Item Edit "Status" Tab "serious" accessibility issues #1190

Open tdonohue opened 3 years ago

tdonohue commented 3 years ago

Serious: This issue results in serious barriers for people with disabilities, and will partially prevent them from accessing fundamental features or content. People relying on assistive technologies will experience significant frustration as a result. Issues falling under this category are major problems, and remediation should be a priority.

Deque Analysis Summary

Our Item Edit "Status" tab has a total of 5 serious accessibility issues (not including color contrast which are handled in other tickets).

  1. (IDs 470076, 471046, 471452) "Selected state of the element is missing or incorrect." on all the tabs (not just Status). When a specific tab is active it should have aria-current or aria-selected specified to note the currently active page/tab. FIXED by #2063
  2. (ID 470077) "Purpose of the link is not clear in context." on the "Withdraw..." and "Move..." buttons/links (on Status tab). The links should have more detail ("Withdraw this Item" "Move this Item to a different Collection") either in the text itself, or in an aria-label. FIXED by #2062
  3. (ID 471072) Content overlap at 320px width. When the browser has 320px width, the entire page suffers from content overlap.

Full list of issues is viewable at (requires login): https://axeauditor.dequecloud.com/test-run/0856438a-a19a-11eb-bc31-b7d5be387c86/issues?activeTab=dt-issue&page=0&pageSize=50&sortField=ordinal&sortDir=asc&row=9&filter%5Bseverity%5D=3&filter%5Btype%5D=issue&filter%5Bpage_number%5D=12

More Information / Tools

Andrea-Guevara commented 6 days ago

Good morning, @tdonohue! My name is Andrea Guevara and I'm part of Neki-it. I'd like to contribute a solution to this issue. We could solve the problem of overlap between the text and the buttons on the status page in two ways: In the first approach, we reduced the size of the texts to generate more space on the screen and in the second approach, we used grid system classes to improve responsiveness.

issue-#1190-1 issue-#1190-2

Looking forward to your feedback!

tdonohue commented 6 days ago

@Andrea-Guevara : Thanks for your suggestions. I, personally, would prefer the second approach (as there is less wrapping of text). But, I'm not against the first approach if it's much easier to achieve.

I'll assign this to you to make others aware you / Neki-it are working on it.

Andrea-Guevara commented 6 days ago

Good morning @tdonohue! I provided a PR with the second approach https://github.com/DSpace/dspace-angular/pull/3148 If you have any suggestions or questions, please get in touch!