Adding tabIndex values related to WV-937. Upgraded some npm packages.

Author: DaleMcGrew

package-lock.json

@@ -69,7 +69,7 @@
     "@wdio/mocha-framework": "^8.35.0",
     "@wdio/protocols": "^8.32.0",
     "@wdio/spec-reporter": "^8.32.4",
-    "axios": "^1.6.0",
+    "axios": "^1.8.3",
     "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
     "chai": "^4.3.7",
@@ -109,8 +109,8 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.1.2",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.13.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@loadable/component": "^5.16.4",
     "@mui/icons-material": "^5.16.14",
     "@mui/lab": "^5.0.0-alpha.96",
@@ -142,7 +142,7 @@
     "puppeteer": "^22.10.0",
     "react": "~17.0.2",
     "react-bootstrap": "^1.6.4",
-    "react-confetti": "^6.1.0",
+    "react-confetti": "~6.1.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "~17.0.2",
     "react-fullstory": "^1.4.0",
@@ -154,9 +154,9 @@
     "react-helmet-async": "^1.3.0",
     "react-phone-number-input": "^3.4.10",
     "react-player": "^2.16.0",
-    "react-rewards": "^2.0.4",
+    "react-rewards": "^2.1.0",
     "react-router-dom": "^5.3.4",
-    "react-router-dom-v5-compat": "^6.28.2",
+    "react-router-dom-v5-compat": "^6.29.0",
     "react-share": "^4.4.1",
     "react-slick": "^0.30.2",
     "react-svg": "^14.1.9",

package.json

@@ -241,7 +241,7 @@ class FilterBaseSearch extends Component {
     }
     // console.log('FilterBaseSearch render');
     return (
-      <BigAndroidClickableTarget onClick={() => this.bigAndroidClick(isSearching, alwaysOpen)}>
+      <BigAndroidClickableTarget id="androidClickableTarget" onClick={() => this.bigAndroidClick(isSearching, alwaysOpen)}>
         <SearchWrapper
           brandBlue={theme.palette.primary.main}
           isSearching={isSearching}
@@ -250,26 +250,32 @@ class FilterBaseSearch extends Component {
         >
           <IconButton
             classes={{ root: classes.iconButtonRoot }}
+            id="searchIcon"
             onClick={(!isAndroid() && !alwaysOpen) ? this.toggleSearch : undefined}
             size="large"
             aria-label="Search Button"
+            tabIndex={0}
           >
             <Search classes={{ root: searchIconClasses }} />
           </IconButton>
           <Separator isSearching={isSearching} alwaysOpen={alwaysOpen} />
           <InputBase
             classes={{ input: inputBaseInputClasses, root: inputBaseRootClasses }}
+            id="searchInput"
             inputRef={(input) => { this.searchInput = input; }}
             onChange={this.handleSearch}
             value={searchText}
             onFocus={() => focusTextFieldAndroid('FilterBaseSearch')}
             onBlur={blurTextFieldAndroid}
             placeholder="Search"
+            tabIndex={isSearching ? 0 : -1}
           />
           <Closer
+            id="searchCloseButton"
             isSearching={isSearching}
             onClick={(isSearching || !alwaysOpen) ? this.toggleSearch : undefined}
             showCloser={isSearching}
+            tabIndex={isSearching ? 0 : -1}
           >
             <IconButton classes={{ root: classes.iconButtonRoot }} size="large">
               <Close classes={{ root: classes.closeIconRoot }} />

src/js/components/Filter/FilterBaseSearch.jsx

@@ -1513,10 +1513,20 @@ class Ballot extends Component {
                                                 <div className="ballot_filter_btns">
                                                   <Badge
                                                     badgeContent={ballotItemsByFilterType.length}
-                                                    classes={{ badge: classes.badge, colorPrimary: classes.badgeColorPrimary }}
+                                                    classes={{
+                                                      badge: classes.badge,
+                                                      colorPrimary: classes.badgeColorPrimary,
+                                                      root: classes.badgeRoot,
+                                                    }}
                                                     color={(oneTypeOfBallotItem === raceLevelFilterType && !isSearching) ? 'primary' : 'default'}
                                                     id={`ballotBadgeDesktop-${oneTypeOfBallotItem}`}
                                                     invisible={ballotItemsByFilterType.length === 0}
+                                                    onFocus={(e) => {
+                                                      e.currentTarget.classList.add(classes.badgeFocused);
+                                                    }}
+                                                    onBlur={(e) => {
+                                                      e.currentTarget.classList.remove(classes.badgeFocused);
+                                                    }}
                                                   >
                                                     {ballotChip}
                                                   </Badge>
@@ -1741,6 +1751,13 @@ const styles = (theme) => ({
       color: theme.palette.primary.main,
     },
   },
+  badgeFocused: {
+    outline: `2px solid ${theme.palette.primary.main}`,
+    outlineOffset: '2px',
+  },
+  badgeRoot: {
+    display: 'inline-block', // This ensures the focus outline wraps around the entire badge
+  },
   unselectedBadgeColorPrimary: {
     background: 'rgba(0, 0, 0, .2)',
     color: '#333',