ABCDEFGHIJKLMNOPQRSTUVWXYZAAAB
1
SODA Retest July 2025SODA Retest Sept 2024ViolationDescriptionSeverityNoteThumbnailThumbnail Alt Text
3
Not Fixed: Visually text is "18 love" but programatically its only "love".Still vague. Not Fixed. Images still lack meaningful text. Also, the number of messages of each type is not announced. Provide valid, concise, and meaningful alternative text for image buttons[Issue]
There are image buttons that do not provide a meaningful accessible name. There are buttons that have names value of "wow" and "top", which may not have enough information.

[User Impact]
Without meaningful alternative text, any information conveyed by these image buttons will not be conveyed to screen reader users and they will be announced as unlabeled buttons.

[Code Reference]
<button aria-pressed="false" aria-label="wow" class="reaction"/><span class="reaction-top"/><img alt="wow" src="https://talk.hyvor.com/res/reactions/wow.svg"/><span class="reaction-number"/><span/>0</span/></span/></span/><span class="reaction-text"/>wow</span/></button/>		Major[Recommendation]
Ensure that image buttons provide meaningful alternative text. Without changing the visual look of the page, this can be achieved by modifying the aria-label to provide more information, or in the case of the wow button, adding the fieldset as mentioned in another instance.
5
Not Fixed. No change noted.Not Fixed. No change noted.Ensure custom controls provide proper textual name, role, and state information[Issue]
The input element is a DIV without role. Users may not be able to determine that this is an editable element.

[User Impact]
When controls do not provide name, role and/or state, screen reader users will not know their purpose and current state (if applicable).

[Code Reference]
<div contenteditable="true" translate="no" class="ProseMirror" data-placeholder="Write your comment..."><p><br class="ProseMirror-trailingBreak"></p></div>		Major[Recommendation]
Ensure that all controls communicate name, state, and role.		Input element without role
6
Not Fixed. No change noted.Not Fixed. No change noted.Provide fieldsets for groups of form controls[Issue]
There are groups of form controls that do not provide <fieldset> and <legend> elements.

[User Impact]
When <fieldset> and <legend> is not provided, screen reader users may get confused navigating through common form fields and not understand the relationship between related forms.

For instance, if a form contains both shipping and billing sections, when screen readers encounter the "Street Address" form field they may have difficulty determining if the address they need to enter is for shipping or for billing.

[Code Reference]
<div>
<div>What's your reaction?</div>
<div>
<button aria-label="love" aria-pressed="false">
<img src="../love.svg" alt="love">3 love
</button>
<button aria-label="wow" aria-pressed="false">
<img src="../wow.svg" alt="wow">0 wow
</button>
<button aria-label="laugh" aria-pressed="false">
<img src="../laugh.svg" alt="laugh">0 laugh
</button>
<button aria-label="congrats" aria-pressed="false">
<img src="../gs.png" alt="congrats">1 congrats
</button>
</div>
</div>		Major[Recommendation]
Groups of form controls need to use a grouping mechanism such as <fieldset> and <legend> elements around each visual or semantic section of the form so screen reader users can understand how to successfully fill out the form.

[Compliant Code Example]
<fieldset>
<legend>What's your reaction?</legend>
<div>
<button aria-label="love" aria-pressed="false">
<img src="../love.svg" alt="love">3 love
</button>
<button aria-label="wow" aria-pressed="false">
<img src="../wow.svg" alt="wow">0 wow
</button>
<button aria-label="laugh" aria-pressed="false">
<img src="../laugh.svg" alt="laugh">0 laugh
</button>
<button aria-label="congrats" aria-pressed="false">
<img src="../gs.png" alt="congrats">1 congrats
</button>
</div>
</fieldset>		Buttons that lack fieldset
7
Not Fixed. No change noted.Partially Fixed. The copy link control is now focusable and actionable, but the reaction buttons are not. Ensure custom controls are keyboard accessible[Issue]
The "copy link" control is not focusable or actionable using the keyboard.

[User Impact]
Keyboard users will only be able to tab to the controls but not interact with them via the enter key, spacebar etc.

[Code Reference]
<button class="action-button comment-link-copy" title="Copy link">
<span style="vertical-align: middle;" class="icon link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="..."></path>
</svg>
</span>
</button>		Major[Recommendation]
Ensure that all controls are operable without the use of a mouse. 		Copy Link control
8
FixedNot fixed. Only placeholder is used. Provide a valid label for form fields[Issue]
There are form fields that do not provide a programmatically associated label that describes the purpose of each field.

[User Impact]
Users may not be able to fill out form fields correctly, if there is no programmatically associated and visible label for each field.

[Code Reference]
<div id="search">
<div class="back">
<button>
<span style="vertical-align: middle;" class="icon caret">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105.83 105.83">
<path d="..." paint-order="stroke fill markers"></path>
<path d="..." paint-order="stroke fill markers"></path>
</svg>
</span>
Back
</button>
</div>
<input class="search-input" type="text" name="search" placeholder="Search Comments......">
<div class="search-results">
<div class="global-no-results" style="padding: 50px;">Type to search...</div>
</div>
</div>		Critical[Recommendation]
Input form fields should provide visible, programmatically associated labels that can be announced properly to screen reader users. Typically labels and form fields need to be explicitly programmatically associated which is commonly done by providing a "for" attribute on the <label> element with its value set to the input's id value or by providing another mechanism that specifies an accessible name.

[Compliant Code Example]
<input id="search" class="search-input" type="text" name="search" placeholder="Search Comments......">
<div class="search-results">
<label for="search" class="global-no-results" style="padding: 50px;">Type to search...</label>
</div>		Search box
12
NEWEnsure keyboard supportThere is a "spolier" type text that covers one of the comments. This does not have a way to "expose" the text with the keyboard. Ensure all elements have keyboard support.
13
NEWMake links purposfulThere are numerous buttons/links such as Flag, Reply, etc. that have vague link text. Make all links and buttons unique. For example "Reply To Bob Smith" rather than "Reply".
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105