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

[tdonohue]

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 aria-selected added to Item Edit "Status" Tab. Fixed ID: 470076 #2063
   • See also https://www.w3.org/TR/wai-aria-1.1/#aria-selected, https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel and/or https://www.w3.org/TR/wai-aria-1.1/#aria-current
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 fixed ID 470077. Purpose of the link is not clear in context #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

• Consider using Deque's free Chrome plugin to check your work
• Deque's color contrast tool: https://dequeuniversity.com/rules/axe/4.1/color-contrast?application=axeAPI

[Andrea-Guevara]

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.

Looking forward to your feedback!

[tdonohue]

@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]

Good morning @tdonohue! I provided a PR with the second approach #3148
If you have any suggestions or questions, please get in touch!