diff --git a/src/course-home/courseware-search/CoursewareResultsFilter.jsx b/src/course-home/courseware-search/CoursewareResultsFilter.jsx index f8590f6292..bfcf0d6b33 100644 --- a/src/course-home/courseware-search/CoursewareResultsFilter.jsx +++ b/src/course-home/courseware-search/CoursewareResultsFilter.jsx @@ -63,6 +63,7 @@ export const CoursewareSearchResultsFilter = ({ intl }) => { variant="tabs" activeKey={activeKey} onSelect={setFilter} + aria-label={intl.formatMessage(messages.searchResultsFilterDescription)} > {filters.filter(({ count }) => (count > 0)).map(({ key, label }) => ( diff --git a/src/course-home/courseware-search/CoursewareSearch.jsx b/src/course-home/courseware-search/CoursewareSearch.jsx index d6308cee70..6c1eb3fb33 100644 --- a/src/course-home/courseware-search/CoursewareSearch.jsx +++ b/src/course-home/courseware-search/CoursewareSearch.jsx @@ -141,7 +141,15 @@ const CoursewareSearch = ({ ...sectionProps }) => { -
+
{status === 'loading' ? (
@@ -157,8 +165,6 @@ const CoursewareSearch = ({ ...sectionProps }) => { {total > 0 ? (
{formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })}
diff --git a/src/course-home/courseware-search/CoursewareSearch.test.jsx b/src/course-home/courseware-search/CoursewareSearch.test.jsx index 69bcf00cf7..d220f6dc0b 100644 --- a/src/course-home/courseware-search/CoursewareSearch.test.jsx +++ b/src/course-home/courseware-search/CoursewareSearch.test.jsx @@ -244,7 +244,7 @@ describe('CoursewareSearch', () => { expect(screen.queryByTestId('courseware-search-summary')).not.toBeInTheDocument(); }); - it('should show a summary for the results within a container with aria-live="polite"', () => { + it('should show a wrapper div with proper aria attributes', () => { mockModels({ searchKeyword: 'fubar', total: 1, @@ -253,7 +253,9 @@ describe('CoursewareSearch', () => { const results = screen.queryByTestId('courseware-search-results'); - expect(results).toHaveAttribute('aria-live', 'polite'); + expect(results).toHaveAttribute('aria-live', 'assertive'); + expect(results).toHaveAttribute('aria-atomic', 'true'); + expect(results).toHaveAttribute('role', 'alert'); expect(within(results).queryByTestId('courseware-search-summary').textContent).toBe('Results for "fubar":'); }); }); diff --git a/src/course-home/courseware-search/CoursewareSearchResults.jsx b/src/course-home/courseware-search/CoursewareSearchResults.jsx index 1cc99d1e88..26ac0953e8 100644 --- a/src/course-home/courseware-search/CoursewareSearchResults.jsx +++ b/src/course-home/courseware-search/CoursewareSearchResults.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { useIntl } from '@edx/frontend-platform/i18n'; import { Folder, TextFields, VideoCamera, Article, } from '@openedx/paragon/icons'; @@ -6,6 +6,7 @@ import { getConfig } from '@edx/frontend-platform'; import { Icon } from '@openedx/paragon'; import PropTypes from 'prop-types'; import CoursewareSearchEmpty from './CoursewareSearchEmpty'; +import messages from './messages'; const iconTypeMapping = { text: TextFields, @@ -21,6 +22,8 @@ const CoursewareSearchResults = ({ results = [] }) => { return ; } + const { formatMessage } = useIntl(); + const baseUrl = `${getConfig().LMS_BASE_URL}`; return ( @@ -42,24 +45,30 @@ const CoursewareSearchResults = ({ results = [] }) => { rel: 'nofollow', } : { href: `${baseUrl}${url}` }; + const ariaSeaparator = formatMessage(messages.searchResultsBreadcrumbSeparator); + const ariaLocation = location?.length ? formatMessage(messages.searchResultsBreadcrumb, { path: location.join(ariaSeaparator) }) : ''; + return (
- {title} - {contentHits ? ({contentHits}) : null } +

{title}

+ {contentHits ? () : null }
- {location?.length ? ( -
    - { + +
    + {location?.length ? ( + - ) : null} +
+ ) : null} +
); diff --git a/src/course-home/courseware-search/__snapshots__/CoursewareSearchResults.test.jsx.snap b/src/course-home/courseware-search/__snapshots__/CoursewareSearchResults.test.jsx.snap index 12178a62ed..96095222df 100644 --- a/src/course-home/courseware-search/__snapshots__/CoursewareSearchResults.test.jsx.snap +++ b/src/course-home/courseware-search/__snapshots__/CoursewareSearchResults.test.jsx.snap @@ -38,24 +38,29 @@ exports[`CoursewareSearchResults when list of results is provided should match t
- +

Demo Course Overview - +

-
    -
  • -
    - Introduction -
    -
    • -
  • -
    - Demo Course Overview -
    -
    • -
+ +
- +

Passing a Course - - +

+ -
    -
  • -
    - About Exams and Certificates -
    -
    • -
  • -
    - edX Exams -
    -
    • -
  • -
    - Passing a Course -
    -
    • -
+ + - +

Passing a Course - +

-
    -
  • -
    - About Exams and Certificates -
    -
    • -
  • -
    - edX Exams -
    -
    • -
  • -
    - Passing a Course -
    -
    • -
+ + - +

Text Input - +

-
    -
  • -
    - Example Week 1: Getting Started -
    -
    • -
  • -
    - Homework - Question Styles -
    -
    • -
  • -
    - Text input -
    -
    • -
+ + - +

Pointing on a Picture - +

-
    -
  • -
    - Example Week 1: Getting Started -
    -
    • -
  • -
    - Homework - Question Styles -
    -
    • -
  • -
    - Pointing on a Picture -
    -
    • -
+ + - +

Getting Answers - +

-
    -
  • -
    - About Exams and Certificates -
    -
    • -
  • -
    - edX Exams -
    -
    • -
  • -
    - Getting Answers -
    -
    • -
+ + - +

Welcome! - - +

+ -
    -
  • -
    - Introduction -
    -
    • -
  • -
    - Demo Course Overview -
    -
    • -
  • -
    - Introduction: Video and Sequences -
    -
    • -
+ + - +

Multiple Choice Questions - +

-
    -
  • -
    - Example Week 1: Getting Started -
    -
    • -
  • -
    - Homework - Question Styles -
    -
    • -
  • -
    - Multiple Choice Questions -
    -
    • -
+ + - +

Numerical Input - +

-
    -
  • -
    - Example Week 1: Getting Started -
    -
    • -
  • -
    - Homework - Question Styles -
    -
    • -
  • -
    - Numerical Input -
    -
    • -
+ + - +

Connecting a Circuit and a Circuit Diagram - - +

+ -
    -
  • -
    - Example Week 1: Getting Started -
    -
    • -
  • -
    - Lesson 1 - Getting Started -
    -
    • -
  • -
    - Video Presentation Styles -
    -
    • -
+ + - +

CAPA - +

-
    -
  • -
    - Example Week 2: Get Interactive -
    -
    • -
  • -
    - Homework - Labs and Demos -
    -
    • -
  • -
    - Code Grader -
    -
    • -
+ + - +

Interactive Questions - +

-
    -
  • -
    - Example Week 1: Getting Started -
    -
    • -
  • -
    - Lesson 1 - Getting Started -
    -
    • -
  • -
    - Interactive Questions -
    -
    • -
+ + - +

Blank HTML Page - - +

+ -
    -
  • -
    - Introduction -
    -
    • -
  • -
    - Demo Course Overview -
    -
    • -
  • -
    - Introduction: Video and Sequences -
    -
    • -
+ + - +

Discussion Forums - - +

+ -
    -
  • -
    - Example Week 3: Be Social -
    -
    • -
  • -
    - Lesson 3 - Be Social -
    -
    • -
  • -
    - Discussion Forums -
    -
    • -
+ + - +

Overall Grade - - +

+ -
    -
  • -
    - About Exams and Certificates -
    -
    • -
  • -
    - edX Exams -
    -
    • -
  • -
    - Overall Grade Performance -
    -
    • -
+ + - +

Blank HTML Page - - +

+ -
    -
  • -
    - Example Week 3: Be Social -
    -
    • -
  • -
    - Lesson 3 - Be Social -
    -
    • -
  • -
    - Homework - Find Your Study Buddy -
    -
    • -
+ + - +

Find Your Study Buddy - - +

+ -
    -
  • -
    - Example Week 3: Be Social -
    -
    • -
  • -
    - Homework - Find Your Study Buddy -
    -
    • -
  • -
    - Homework - Find Your Study Buddy -
    -
    • -
+ + - +

Be Social - - +

+ -
    -
  • -
    - Example Week 3: Be Social -
    -
    • -
  • -
    - Lesson 3 - Be Social -
    -
    • -
  • -
    - Be Social -
    -
    • -
+ + - +

EdX Exams - - +

+ -
    -
  • -
    - About Exams and Certificates -
    -
    • -
  • -
    - edX Exams -
    -
    • -
  • -
    - EdX Exams -
    -
    • -
+ + - +

When Are Your Exams? - - +

+ -
    -
  • -
    - Example Week 1: Getting Started -
    -
    • -
  • -
    - Lesson 1 - Getting Started -
    -
    • -
  • -
    - When Are Your Exams? -
    -
    • -
+ + - +

External Course Link Test - +

+
diff --git a/src/course-home/courseware-search/courseware-search.scss b/src/course-home/courseware-search/courseware-search.scss index 3e17d17479..5f66d6c4b8 100644 --- a/src/course-home/courseware-search/courseware-search.scss +++ b/src/course-home/courseware-search/courseware-search.scss @@ -101,6 +101,11 @@ font-size: 0.875rem; color: $black; + > h3 { + font-size: inherit; + margin: 0; + } + > span { display: block; overflow: hidden; diff --git a/src/course-home/courseware-search/messages.ts b/src/course-home/courseware-search/messages.ts index dbdac4c4f5..891e904b70 100644 --- a/src/course-home/courseware-search/messages.ts +++ b/src/course-home/courseware-search/messages.ts @@ -56,7 +56,21 @@ const messages = defineMessages({ defaultMessage: 'There was an error on the search process. Please try again in a few minutes. If the problem persists, please contact the support team.', description: 'Error message to show to the users when there\'s an error with the endpoint or the returned payload format.', }, - + searchResultsFilterDescription: { + id: 'learn.coursewareSearch.searchResultsFilterDescription', + defaultMessage: 'Search result filters', + description: 'Screen Reader text to describe the filter options.', + }, + searchResultsBreadcrumb: { + id: 'learn.coursewareSearch.searchResultsBreadcrumb', + defaultMessage: 'Location: {path}.', + description: 'Screen Reader text to describe the search result breadcrumbs.', + }, + searchResultsBreadcrumbSeparator: { + id: 'learn.searchResultsBreadcrumbSeparator', + defaultMessage: ', then ', + description: 'Screen Reader text to connect breadcrumb sections. i.e.: "Introduction, then Register, then Something else.', + }, // These are translations for labeling the filters 'filter:all': { id: 'learn.coursewareSearch.filter:all',