Accessibility compliance for kubeapps.dev #5397

ppbaena · 2022-09-27T10:56:26Z

Summary
The goal is to ensure kubeapps.dev website is accessible

Background and rationale
All VMware’s OSS products must meet Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards.
Devices, Assistive Technology combinations used: Chrome + NVDA on Windows, Safari + Voiceover on Mac

Description
Review the results of the accessibility audit for kubeapps.dev and fix all issues reported (JIRA - internal tool)

Acceptance criteria

All issues identified in the accessibility audit are fixed
For every major UI/ Feature update fixed, a request for Accessibility Testing has been performed and succeeded.

Additional context
An Accessibility Testing has been completed for kubeapps.dev with several issues identified to comply with Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards (issues: 7 critical, 20 High, 2 Medium, 5 Low)

antgamdia · 2022-10-11T18:41:46Z

14258
- Problem:
- Solution:
14230
- Problem:
- Solution: unclear, it is an iframe from YouTube, I've requested additional info from the a11y team.
14229
- Problem:
- Solution:
14228
- Problem:
- Solution:
14227
- Problem:
- Solution:
14226
- Problem:
- Solution:
14225
- Problem:
- Solution:
14224
- Problem:
- Solution: PENDING unclear, it is an iframe from YouTube, I've requested additional info from the a11y team.
14223
- Problem:
- Solution:
14222
- Problem:
- Solution:
14221
- Problem:
- Solution:
14220
- Problem:
- Solution:
14219
- Problem:
- Solution:
14218
- Problem:
- Solution:
14217
- Problem:
- Solution:
14216
- Problem:
- Solution:
14215
- Problem:
- Solution:
14214
- Problem:
- Solution:
14213
- Problem:
- Solution: PENDING conflicting rule (see this page), so I've asked the a11y team for a decision.
14212
- Problem:
- Solution:
14211
- Problem:
- Solution: PENDING unclear, it is an iframe from YouTube, I've requested additional info from the a11y team.
14210
- Problem:
- Solution:
14209
- Problem:
- Solution:
14208
- Problem:
- Solution:
14207
- Problem:
- Solution:
14206
- Problem:
- Solution:
14205
- Problem:
- Solution:
14204
- Problem:
- Solution:
14203
- Problem:
- Solution:
14202
- Problem:
- Solution:
14201
- Problem:
- Solution:
14200
- Problem:
- Solution:
14199
- Problem:
- Solution:
14198
- Problem:
- Solution:

antgamdia · 2022-10-12T17:42:03Z

ppbaena · 2022-10-17T09:49:17Z

Thanks for the complete revision and detailed comment.

antgamdia · 2022-10-17T11:16:34Z

Reopen as we need to confirm with the a11y team before actually closing this issue.

ppbaena · 2022-10-18T13:22:48Z

Accessibility issues have been assigned to the audit team to review all the evidence and reply to the questions performed by @antgamdia.

ppbaena · 2022-10-24T08:51:58Z

Let's close this issue and reopen it if any issues from the acceptance review.

antgamdia · 2022-10-25T15:29:21Z

Unfortunately, some issues have been reopened. Further work seems to be required.

Closed with a comment for them to reconsider

VPAT-14217: I think we do comply with the WCAG requirements as the text is large and the contrast ratio is 3.46:1 (required 3:1).
VPAT-14206: we added a chevron (>) at the end of each link, so, besides the color, links are still identifiable.
VPAT-14204: search button says "submit" instead of "search", but it's autogenerated by algolia, so don't know if we can do anything. In fact, I can't repro it, we did fix it already.
VPAT-14224: wrong title in youtube buttons, closed as 3rd party issue

Fixes required

VPAT-14207: when zooming up to 200%, the right menu disappears, but... what's wrong with it.
VPAT-14205: overlapping when zooming up to 400%, CSS tune-up is required
VPAT-14202: search box border colors don't have the proper contrast ratio, CSS tune-up is required
VPAT-14198: "cookie settings" is not clickable, but this is provided via OneTrust, not sure what can we do. EDIT: we need to add a new event handler as the OneTrust one only has manual mouse clicks.

Triage pending

VPAT-14213: focus on code block

antgamdia · 2022-10-27T10:00:25Z

Fix for VPAT-14202:
Fix for VPAT-14207
Fix for VPAT-14205
Fix for VPAT-14198
Fix for VPAT-14213

### Description of the change While working on #5397, I discovered some minor issues with the meta tags we were using. Mainly, the title and description of each page were always the same, hindering the crawler process we run via Algolia. ### Benefits Title and other meta tags will have more meaningful content. ### Possible drawbacks N/A ### Applicable issues - related #5397 ### Additional information I'm removing some unused files as well. ![image](https://user-images.githubusercontent.com/11535726/198228723-83b7cc56-c4bd-49c7-a397-1684291bcff3.png) Signed-off-by: Antonio Gamez Diaz <agamez@vmware.com>

### Description of the change This PR aims at fixing the remaining a11y issues that were reopened. Details at #5397 (comment) Summary of the changes: 1. Change the border color of the searchbox 2. Display a menu behind "documentation" if the screen is small. If you don't like it, we can always remove it and try to convince a11y folks. 3. Fix the overflow of the left menu 4. Add a "space" and "enter" keyboard events handler for the OneTrust cookie manager. 5. Remove the focus on code blocks (every code block, indeed) ### Benefits a11y compliance ### Possible drawbacks N/A ### Applicable issues - fixes #5397 ### Additional information This PR is based on top of #5578, as I assume it will get merged soon. Also, I've removed some unused files (images mainly) and unified the icons we are using (ie, using the SVG ones, and resizing them, via CSS, instead of having several logos for the same purpose) ~EDIT: there are more issues to solve I've just seen, will add the fixes to this PR~ Signed-off-by: Antonio Gamez Diaz <agamez@vmware.com>

antgamdia · 2022-10-28T12:03:06Z

All the pending issues have been moved to "acceptance review". If any of them happen to be reopened, I'll also reopen this issue (hope we don't have to 🤞 )

ppbaena added kind/bug An issue that reports a defect in an existing feature component/website An issue that reports an update related to project website labels Sep 27, 2022

ppbaena added this to Kubeapps Sep 27, 2022

ppbaena moved this to 🗂 Backlog in Kubeapps Sep 27, 2022

ppbaena added the next-iteration Issues to be discussed in planning session label Sep 27, 2022

ppbaena added this to the Technical debt milestone Sep 27, 2022

antgamdia self-assigned this Oct 10, 2022

antgamdia moved this from 🗂 Backlog to 🏗 In Progress in Kubeapps Oct 10, 2022

antgamdia mentioned this issue Oct 12, 2022

Fix a11y-related issues on the website #5456

Merged

antgamdia closed this as completed in #5456 Oct 17, 2022

Repository owner moved this from 🏗 In Progress to ✅ Done in Kubeapps Oct 17, 2022

antgamdia reopened this Oct 17, 2022

Repository owner moved this from ✅ Done to 🗒 Todo in Kubeapps Oct 17, 2022

antgamdia moved this from 🗒 Todo to 🏗 In Progress in Kubeapps Oct 17, 2022

antgamdia moved this from 🏗 In Progress to 🔎 In Review in Kubeapps Oct 17, 2022

ppbaena moved this from 🔎 In Review to 🚧 Blocked in Kubeapps Oct 24, 2022

ppbaena closed this as completed Oct 24, 2022

Repository owner moved this from 🚧 Blocked to ✅ Done in Kubeapps Oct 24, 2022

antgamdia reopened this Oct 25, 2022

Repository owner moved this from ✅ Done to 🗒 Todo in Kubeapps Oct 25, 2022

antgamdia moved this from 🗒 Todo to 🏗 In Progress in Kubeapps Oct 25, 2022

antgamdia mentioned this issue Oct 27, 2022

Fix website meta tags issues #5578

Merged

antgamdia mentioned this issue Oct 27, 2022

Fix reopened website a11y issues #5579

Merged

antgamdia moved this from 🏗 In Progress to 🔎 In Review in Kubeapps Oct 27, 2022

antgamdia moved this from 🔎 In Review to 🏗 In Progress in Kubeapps Oct 27, 2022

antgamdia moved this from 🏗 In Progress to 🔎 In Review in Kubeapps Oct 28, 2022

antgamdia closed this as completed in #5579 Oct 28, 2022

Repository owner moved this from 🔎 In Review to ✅ Done in Kubeapps Oct 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Accessibility compliance for kubeapps.dev #5397

Accessibility compliance for kubeapps.dev #5397

ppbaena commented Sep 27, 2022 •

edited by antgamdia

Loading

antgamdia commented Oct 11, 2022 •

edited

Loading

antgamdia commented Oct 12, 2022 •

edited

Loading

ppbaena commented Oct 17, 2022

antgamdia commented Oct 17, 2022

ppbaena commented Oct 18, 2022

ppbaena commented Oct 24, 2022

antgamdia commented Oct 25, 2022 •

edited

Loading

antgamdia commented Oct 27, 2022 •

edited

Loading

antgamdia commented Oct 28, 2022

Accessibility compliance for kubeapps.dev #5397

Accessibility compliance for kubeapps.dev #5397

Comments

ppbaena commented Sep 27, 2022 • edited by antgamdia Loading

antgamdia commented Oct 11, 2022 • edited Loading

antgamdia commented Oct 12, 2022 • edited Loading

Current status:

Summary:

ppbaena commented Oct 17, 2022

antgamdia commented Oct 17, 2022

ppbaena commented Oct 18, 2022

ppbaena commented Oct 24, 2022

antgamdia commented Oct 25, 2022 • edited Loading

Closed with a comment for them to reconsider

Fixes required

Triage pending

antgamdia commented Oct 27, 2022 • edited Loading

antgamdia commented Oct 28, 2022

ppbaena commented Sep 27, 2022 •

edited by antgamdia

Loading

antgamdia commented Oct 11, 2022 •

edited

Loading

antgamdia commented Oct 12, 2022 •

edited

Loading

antgamdia commented Oct 25, 2022 •

edited

Loading

antgamdia commented Oct 27, 2022 •

edited

Loading