UI search UI a11y changes #1253
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
rijuma
commented
Dec 14, 2023
Comment on lines
-41
to
-58
| .course-tabs-navigation { | ||
| border-bottom: solid 1px #eaeaea; | ||
|
|
||
| .nav a, | ||
| .nav button { | ||
| &:hover { | ||
| background-color: $light-400; | ||
| } | ||
| } | ||
|
|
||
| .nav a { | ||
| &:not(.active):hover { | ||
| background-color: $light-400; | ||
| border-bottom: none; | ||
| } | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
This was moved to its own css file for the CourseTabsNavigation component.
rijuma
force-pushed
the
rijuma/ui-search-ui-a11y-changes
branch
from
77ac13d to
56f7e5e
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1253 +/- ##
==========================================
- Coverage 87.97% 87.96% -0.01%
==========================================
Files 276 276
Lines 4739 4736 -3
Branches 1194 1191 -3
==========================================
- Hits 4169 4166 -3
Misses 554 554
Partials 16 16 ☔ View full report in Codecov by Sentry. |
schenedx
approved these changes
Dec 14, 2023
| @@ -246,24 +246,14 @@ describe('CoursewareSearch', () => { | |||
| expect(screen.queryByTestId('courseware-search-summary').textContent).toBe('No results found.'); | |||
| }); | |||
|
|
|||
| it('should show a summary for a single result', () => { | |||
| it('should show a summary for the results', () => { | |||
There was a problem hiding this comment.
Why did you remove the test case for multiple results?
There was a problem hiding this comment.
It used to have two different messages, one for a single result and another for multiple/zero results, like:
- 1 match found for ${search}
- 2 matches found for ${search}
This required two i18n entries for different languages as well.
Since we are not considering the count any more, it will always be the same copy.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Tickets: KBK-74 🔒, KBK-77 🔒
These changes improves the Accessibility for the UI on Courseware Search. Some of the update requests for accessibility are not possible from this implementation, since we are using Paragon components. A request to update these accessibility issues on Paragon will be performed.
Ticket KBK-74
Update breakdown
Done.
Done.
Color contrast updates:
2pxto4pxto make more evident that the tab is currently active. This is to complement the darkening of the tab border from the previous change.An empty string was provided to the parameter that adds the span with the
sr-onlyclass. This results in an empty span with asr-only. I'll assume the span will be ignored, otherwise we should request an update on Paragon to remove the element when there's no text for that label.Done.
This is a Paragon issue. A request to update this will be created.
This is a Paragon issue. A request to update this will be created.
The search component in Paragon has a property to set both the label and the button text (i18n), but share the same property. So currently is not possible to have a different text between the label and the search submit button. This is a Paragon issue. A request to update this will be created.
Ticket KBK-77
Currently, the result count from the search endpoint is not equivalent to the result item count. We've decided to remove this count from the results label.
UI Changes
These are screenshots showing the results in the UI updates.
New
Old