From 2bf326fc67e2e8ca2de63983225602f7a70acad4 Mon Sep 17 00:00:00 2001 From: Marcos Date: Fri, 15 Dec 2023 09:23:34 -0300 Subject: [PATCH] UI search UI a11y changes (#1253) * fix: Updated UI a11y changes in Courseware Search * feat: Removed result count for search * fix: Added new line at the end of course-tabs-navigation.scss --- .../CoursewareResultsFilter.jsx | 1 + .../courseware-search/CoursewareSearch.jsx | 20 ++++++++-------- .../CoursewareSearch.test.jsx | 14 ++--------- .../CoursewareSearchForm.jsx | 19 ++++++++++++--- .../CoursewareSearchForm.test.jsx | 4 ++-- .../courseware-search/courseware-search.scss | 12 ++++++++-- src/course-home/courseware-search/messages.js | 23 +++++++++++------- src/course-tabs/CourseTabsNavigation.jsx | 6 ++--- src/course-tabs/course-tabs-navigation.scss | 24 +++++++++++++++++++ src/index.scss | 19 +-------------- 10 files changed, 83 insertions(+), 59 deletions(-) create mode 100644 src/course-tabs/course-tabs-navigation.scss diff --git a/src/course-home/courseware-search/CoursewareResultsFilter.jsx b/src/course-home/courseware-search/CoursewareResultsFilter.jsx index 29d41083..233647ca 100644 --- a/src/course-home/courseware-search/CoursewareResultsFilter.jsx +++ b/src/course-home/courseware-search/CoursewareResultsFilter.jsx @@ -44,6 +44,7 @@ export const CoursewareSearchResultsFilter = ({ intl }) => { return ( {
-

{intl.formatMessage(messages.searchModuleTitle)}

+

{intl.formatMessage(messages.searchModuleTitle)}

{ )} {status === 'results' ? ( <> -
{total > 0 - ? ( - intl.formatMessage( - total === 1 - ? messages.searchResultsSingular - : messages.searchResultsPlural, - { total, keyword: lastSearchKeyword }, - ) - ) : intl.formatMessage(messages.searchResultsNone)} +
{total > 0 + ? intl.formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword }) + : intl.formatMessage(messages.searchResultsNone)}
diff --git a/src/course-home/courseware-search/CoursewareSearch.test.jsx b/src/course-home/courseware-search/CoursewareSearch.test.jsx index 7ebce709..125125a7 100644 --- a/src/course-home/courseware-search/CoursewareSearch.test.jsx +++ b/src/course-home/courseware-search/CoursewareSearch.test.jsx @@ -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', () => { mockModels({ searchKeyword: 'fubar', total: 1, }); renderComponent(); - expect(screen.queryByTestId('courseware-search-summary').textContent).toBe('1 match found for "fubar":'); - }); - - it('should show a summary for multiple results', () => { - mockModels({ - searchKeyword: 'fubar', - total: 2, - }); - renderComponent(); - - expect(screen.queryByTestId('courseware-search-summary').textContent).toBe('2 matches found for "fubar":'); + expect(screen.queryByTestId('courseware-search-summary').textContent).toBe('Results for "fubar":'); }); }); diff --git a/src/course-home/courseware-search/CoursewareSearchForm.jsx b/src/course-home/courseware-search/CoursewareSearchForm.jsx index 023a85c3..dbea5ec4 100644 --- a/src/course-home/courseware-search/CoursewareSearchForm.jsx +++ b/src/course-home/courseware-search/CoursewareSearchForm.jsx @@ -1,8 +1,11 @@ import React from 'react'; -import { SearchField } from '@edx/paragon'; import PropTypes from 'prop-types'; +import { SearchField } from '@edx/paragon'; +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import messages from './messages'; const CoursewareSearchForm = ({ + intl, searchTerm, onSubmit, onChange, @@ -14,17 +17,27 @@ const CoursewareSearchForm = ({ onChange={onChange} submitButtonLocation="external" className="courseware-search-form" + screenReaderText={{ + label: intl.formatMessage(messages.searchSubmitLabel), + clearButton: intl.formatMessage(messages.searchClearAction), + submitButton: null, // Remove the sr-only label in the button. + }} >
- + ); CoursewareSearchForm.propTypes = { + intl: intlShape.isRequired, searchTerm: PropTypes.string, onSubmit: PropTypes.func, onChange: PropTypes.func, @@ -38,4 +51,4 @@ CoursewareSearchForm.defaultProps = { placeholder: undefined, }; -export default CoursewareSearchForm; +export default injectIntl(CoursewareSearchForm); diff --git a/src/course-home/courseware-search/CoursewareSearchForm.test.jsx b/src/course-home/courseware-search/CoursewareSearchForm.test.jsx index 84601c67..ebff386a 100644 --- a/src/course-home/courseware-search/CoursewareSearchForm.test.jsx +++ b/src/course-home/courseware-search/CoursewareSearchForm.test.jsx @@ -47,8 +47,8 @@ describe('CoursewareSearchToggle', () => { it('should call onSubmit handler when submit is clicked', async () => { await act(async () => renderComponent(placeholderText, onSubmitHandlerMock, onChangeHandlerMock)); - await waitFor(() => { - const element = screen.queryAllByText('Search')[0]; + await waitFor(async () => { + const element = await screen.findByTestId('courseware-search-form-submit'); fireEvent.click(element); expect(onSubmitHandlerMock).toHaveBeenCalledTimes(1); }); diff --git a/src/course-home/courseware-search/courseware-search.scss b/src/course-home/courseware-search/courseware-search.scss index 054bbd2d..3acfafb7 100644 --- a/src/course-home/courseware-search/courseware-search.scss +++ b/src/course-home/courseware-search/courseware-search.scss @@ -35,7 +35,7 @@ &__results-summary { font-size: .9rem; - color: $gray-400; + color: $gray-500; padding: 1rem 0 .5rem; } @@ -111,7 +111,7 @@ &__breadcrumbs { display: flex; gap: 1.25rem; - color: $gray-400; + color: $gray-500; overflow: hidden; list-style: none; padding: 0; @@ -141,6 +141,14 @@ } } +.courseware-search-results-tabs { + border-bottom-color: $gray-400 !important; + + &.nav-tabs .nav-link.active { + border-bottom-width: 4px !important; + } +} + @media (min-width: map-get($grid-breakpoints, 'md')) { .courseware-search__content { padding-top: 8rem; diff --git a/src/course-home/courseware-search/messages.js b/src/course-home/courseware-search/messages.js index b18c11aa..946e7ad9 100644 --- a/src/course-home/courseware-search/messages.js +++ b/src/course-home/courseware-search/messages.js @@ -6,6 +6,16 @@ const messages = defineMessages({ defaultMessage: 'Search within this course', description: 'Aria-label for a button that will pop up Courseware Search.', }, + searchSubmitLabel: { + id: 'learn.coursewareSerch.submitLabel', + defaultMessage: 'Search', + description: 'Button label that will submit Courseware Search.', + }, + searchClearAction: { + id: 'learn.coursewareSerch.clearAction', + defaultMessage: 'Clear search', + description: 'Button label that will the current Courseware Search input.', + }, searchCloseAction: { id: 'learn.coursewareSerch.closeAction', defaultMessage: 'Close the search form', @@ -31,15 +41,10 @@ const messages = defineMessages({ defaultMessage: 'No results found.', description: 'Text to show when the Courseware Search found no results matching the criteria.', }, - searchResultsSingular: { - id: 'learn.coursewareSerch.searchResultsSingular', - defaultMessage: '1 match found for "{keyword}":', - description: 'Text to show when the Courseware Search found only one result matching the criteria.', - }, - searchResultsPlural: { - id: 'learn.coursewareSerch.searchResultsPlural', - defaultMessage: '{total} matches found for "{keyword}":', - description: 'Text to show when the Courseware Search found multiple results matching the criteria.', + searchResultsLabel: { + id: 'learn.coursewareSerch.searchResultsLabel', + defaultMessage: 'Results for "{keyword}":', + description: 'Text to show above the search results response list.', }, searchResultsError: { id: 'learn.coursewareSerch.searchResultsError', diff --git a/src/course-tabs/CourseTabsNavigation.jsx b/src/course-tabs/CourseTabsNavigation.jsx index 014f1269..63640ebe 100644 --- a/src/course-tabs/CourseTabsNavigation.jsx +++ b/src/course-tabs/CourseTabsNavigation.jsx @@ -15,9 +15,6 @@ const CourseTabsNavigation = ({ return (
-
- -
+
+ +
{show && }
); diff --git a/src/course-tabs/course-tabs-navigation.scss b/src/course-tabs/course-tabs-navigation.scss new file mode 100644 index 00000000..2f79d591 --- /dev/null +++ b/src/course-tabs/course-tabs-navigation.scss @@ -0,0 +1,24 @@ +.course-tabs-navigation { + position: relative; + 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; + } + } + + &__search-toggle { + position: absolute; + top: .05rem; + right: 0; + } +} diff --git a/src/index.scss b/src/index.scss index 6a288028..47efe45b 100755 --- a/src/index.scss +++ b/src/index.scss @@ -38,24 +38,6 @@ } } -.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; - } - } -} - .nav-underline-tabs { margin: 0 0 -1px; @@ -396,3 +378,4 @@ @import "courseware/course/course-exit/CourseRecommendations"; @import "product-tours/newUserCourseHomeTour/NewUserCourseHomeTourModal.scss"; @import "course-home/courseware-search/courseware-search.scss"; +@import "course-tabs/course-tabs-navigation.scss";