feat(a11y): apply correct aria attributes and improve searchbar (#117)

jwplayer · Mar 15, 2024 · 3c097d1 · 3c097d1
1 parent 8da576a
commit 3c097d1
Show file tree

Hide file tree

Showing 11 changed files with 19 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}
       />
-Original file line number
+Diff line change
@@ Expand Up @@
       >
         <p
           class="_textContainer_561522"
+          id="collapsible-content"
           style="max-height: none;"
         >
           Test...
@@ Expand Down @@