Accessibility issues in Calendar widget

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.1.X, 7.2.X, 7.3.X, Master
• Fix Version/s: 7.3.X, 7.4.2 CE GA3, Master
• Component/s: Alloy UI, Calendar
• Labels:
  • ee-ts
• Branch Version/s:
  7.3.x
• Backported to Branch:
  Committed
• Fix Priority: 3
• Git Pull Request: https://github.com/jonmak08/liferay-portal/pull/2148

Calendar widget does not meet many accessibility standards. Some of them are:

• Lack of color contrast in several elements
• It is not possible to navigate to events or edit them from keyboard
• Some information is shown only using visual elements, like the current date.
• Dropdowns SVGs does not include any semantic information

Steps to reproduce

1. Start Liferay
2. Deploy Calendar widget on it
3. Add a new event

---

Expected behavior 1
If you run any accessibility checker, there is no issues related to lack of contrast.
Actual behavior 1
There are several issues related to lack of contrast between text and background.

---

Expected behavior 2
You can navigate with your keyboard to the event you previuosly created.
Actual behavior 2
It is not possible to access to event's information or edit it using your keyboard

---

Expected behavior 3
Information must not be available only using visual elements.
Actual behavior 3
Current date is marked only using visual elements. It is marked as a shady cell/column.

---

Expected behavior 4
Dropdown buttons include semantic information
Actual behavior 4
Dropdown buttons does not include any kind of semantic information