From 3c097d15339db15d11f8f6c67428e391a00cf640 Mon Sep 17 00:00:00 2001
From: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com>
Date: Thu, 15 Feb 2024 17:09:21 +0100
Subject: [PATCH] feat(a11y): apply correct aria attributes and improve
 searchbar (#117)

---
 .../src/components/CollapsibleText/CollapsibleText.tsx     | 2 ++
 .../__snapshots__/CollapsibleText.test.tsx.snap            | 1 +
 packages/ui-react/src/components/Header/Header.tsx         | 7 ++++---
 .../components/Header/__snapshots__/Header.test.tsx.snap   | 2 ++
 .../ui-react/src/components/LanguageMenu/LanguageMenu.tsx  | 1 +
 .../LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap  | 1 +
 .../src/components/SearchBar/SearchBar.module.scss         | 4 ++++
 packages/ui-react/src/components/SearchBar/SearchBar.tsx   | 2 +-
 .../SearchBar/__snapshots__/SearchBar.test.tsx.snap        | 2 +-
 .../VideoDetails/__snapshots__/VideoDetails.test.tsx.snap  | 1 +
 .../src/containers/FavoriteButton/FavoriteButton.tsx       | 1 +
 11 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/ui-react/src/components/CollapsibleText/CollapsibleText.tsx b/packages/ui-react/src/components/CollapsibleText/CollapsibleText.tsx
index 3cd73db23..8656584af 100644
--- a/packages/ui-react/src/components/CollapsibleText/CollapsibleText.tsx
+++ b/packages/ui-react/src/components/CollapsibleText/CollapsibleText.tsx
@@ -35,6 +35,7 @@ const CollapsibleText: React.FC<Props> = ({ text, className, maxHeight = 'none'
     <div className={classNames(styles.collapsibleText)}>
       <p
         ref={divRef}
+        id="collapsible-content"
         className={classNames(styles.textContainer, className, { [styles.collapsed]: !expanded && doesFlowOver })}
         style={{ maxHeight: expanded ? divRef.current.scrollHeight : maxHeight }}
       >
@@ -44,6 +45,7 @@ const CollapsibleText: React.FC<Props> = ({ text, className, maxHeight = 'none'
         <IconButton
           aria-label={ariaLabel}
           aria-expanded={expanded}
+          aria-controls="collapsible-content"
           className={classNames(styles.chevron, { [styles.expanded]: expanded })}
           onClick={() => setExpanded(!expanded)}
         >
diff --git a/packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap b/packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap
index 72e97167b..101afed39 100644
--- a/packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap
+++ b/packages/ui-react/src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`<CollapsibleText> > renders and matches snapshot 1`] = `
   >
     <p
       class="_textContainer_561522"
+      id="collapsible-content"
       style="max-height: none;"
     >
       Test...
diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx
index e3ded9202..54738f60d 100644
--- a/packages/ui-react/src/components/Header/Header.tsx
+++ b/packages/ui-react/src/components/Header/Header.tsx
@@ -133,6 +133,7 @@ const Header: React.FC<Props> = ({
           aria-label={t('open_user_menu')}
           aria-controls="user_menu_panel"
           aria-expanded={userMenuOpen}
+          aria-haspopup="menu"
           onClick={openUserMenu}
           onBlur={closeUserMenu}
         >
@@ -163,8 +164,8 @@ const Header: React.FC<Props> = ({
       </React.Fragment>
     ) : (
       <div className={styles.buttonContainer}>
-        <Button onClick={onLoginButtonClick} label={t('sign_in')} />
-        <Button variant="contained" color="primary" onClick={onSignUpButtonClick} label={t('sign_up')} />
+        <Button onClick={onLoginButtonClick} label={t('sign_in')} aria-haspopup="dialog" />
+        <Button variant="contained" color="primary" onClick={onSignUpButtonClick} label={t('sign_up')} aria-haspopup="dialog" />
       </div>
     );
   };
@@ -200,7 +201,7 @@ const Header: React.FC<Props> = ({
             aria-controls="sidebar"
             aria-haspopup="true"
             aria-expanded={sideBarOpen}
-            onClick={onMenuButtonClick}
+            onClick={() => onMenuButtonClick()}
           >
             <Icon icon={Menu} />
           </IconButton>
diff --git a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
index c22e2094a..baeb35dd9 100644
--- a/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/packages/ui-react/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -71,6 +71,7 @@ exports[`<Header /> > renders header 1`] = `
           class="_buttonContainer_f4f7a7"
         >
           <button
+            aria-haspopup="dialog"
             class="_button_f8f296 _default_f8f296 _outlined_f8f296"
             type="button"
           >
@@ -79,6 +80,7 @@ exports[`<Header /> > renders header 1`] = `
             </span>
           </button>
           <button
+            aria-haspopup="dialog"
             class="_button_f8f296 _primary_f8f296"
             type="button"
           >
diff --git a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
index 08385597a..18c17dfce 100644
--- a/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
+++ b/packages/ui-react/src/components/LanguageMenu/LanguageMenu.tsx
@@ -47,6 +47,7 @@ const LanguageMenu = ({ onClick, className, languages, currentLanguage, language
         data-testid={testId('language-menu-button')}
         aria-controls="language-panel"
         aria-expanded={languageMenuOpen}
+        aria-haspopup="menu"
         className={classNames(styles.iconButton, className)}
         aria-label={t('language_menu')}
         onClick={handleMenuToggle}
diff --git a/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
index d34107d34..e098530c3 100644
--- a/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
+++ b/packages/ui-react/src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
   <div
     aria-controls="language-panel"
     aria-expanded="false"
+    aria-haspopup="menu"
     aria-label="language_menu"
     class="_iconButton_0fef65"
     data-testid="language-menu-button"
diff --git a/packages/ui-react/src/components/SearchBar/SearchBar.module.scss b/packages/ui-react/src/components/SearchBar/SearchBar.module.scss
index bd0d66c37..725ffff59 100644
--- a/packages/ui-react/src/components/SearchBar/SearchBar.module.scss
+++ b/packages/ui-react/src/components/SearchBar/SearchBar.module.scss
@@ -34,6 +34,10 @@
     opacity: 0.5;
   }
 
+  &::-webkit-search-cancel-button{
+    display: none;
+  }
+
   &:focus,
   &:active {
     border-color: variables.$white;
diff --git a/packages/ui-react/src/components/SearchBar/SearchBar.tsx b/packages/ui-react/src/components/SearchBar/SearchBar.tsx
index 89c9b6d22..f1de4e4a4 100644
--- a/packages/ui-react/src/components/SearchBar/SearchBar.tsx
+++ b/packages/ui-react/src/components/SearchBar/SearchBar.tsx
@@ -24,7 +24,7 @@ const SearchBar: React.FC<Props> = ({ query, onQueryChange, onClearButtonClick,
       <Icon icon={Search} className={styles.icon} />
       <input
         className={styles.input}
-        type="text"
+        type="search"
         value={query}
         onChange={onQueryChange}
         onKeyDown={(event) => event.key === 'Escape' && onClose?.()}
diff --git a/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap b/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
index a6c9b4433..43c3f1638 100644
--- a/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
+++ b/packages/ui-react/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<SearchBar> > renders and matches snapshot 1`] = `
       aria-label="search_bar.search_label"
       class="_input_3bb1d7"
       placeholder="search_bar.search_placeholder"
-      type="text"
+      type="search"
       value="My search query"
     />
     <div
diff --git a/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap b/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
index 5a92ca533..2cc0177f7 100644
--- a/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
+++ b/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap
@@ -49,6 +49,7 @@ exports[`<VideoDetails> > renders and matches snapshot 1`] = `
           >
             <p
               class="_textContainer_561522 _description_d0c133"
+              id="collapsible-content"
               style="max-height: none;"
             >
               Video description
diff --git a/packages/ui-react/src/containers/FavoriteButton/FavoriteButton.tsx b/packages/ui-react/src/containers/FavoriteButton/FavoriteButton.tsx
index c524fc951..691ead4c2 100644
--- a/packages/ui-react/src/containers/FavoriteButton/FavoriteButton.tsx
+++ b/packages/ui-react/src/containers/FavoriteButton/FavoriteButton.tsx
@@ -43,6 +43,7 @@ const FavoriteButton: React.VFC<Props> = ({ item }) => {
         aria-label={isFavorite ? t('video:remove_from_favorites') : t('video:add_to_favorites')}
         startIcon={isFavorite ? <Icon icon={Favorite} /> : <Icon icon={FavoriteBorder} />}
         onClick={onFavoriteButtonClick}
+        aria-pressed={isFavorite}
         color={isFavorite ? 'primary' : 'default'}
         fullWidth={breakpoint < Breakpoint.md}
       />