Merge pull request #154 from fedspendingtransparency/mod/9527-make-ta…

…ble-rows-tabbable 9527 - added tabIndex and onKeyPress to rows in TableData.jsx to make…
fedspendingtransparency · Mar 8, 2023 · de73320 · de73320
2 parents 8e11a0b + d235951
commit de73320
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 5 deletions.
diff --git a/components/table/TableData.jsx b/components/table/TableData.jsx
@@ -16,7 +16,7 @@ const propTypes = {
     rows: PropTypes.arrayOf(oneOfType([PropTypes.array, PropTypes.object])).isRequired,
     expandable: PropTypes.bool,
     divider: PropTypes.string,
-    onClickHandler: PropTypes.string,
+    onClickHandler: PropTypes.func,
     isMobile: PropTypes.bool
 };
 
@@ -50,6 +50,7 @@ const TableData = ({
             onClickHandler(row);
         }
     }
+
     return (
     <>
         {rows.map((row, i) => {
@@ -69,7 +70,14 @@ const TableData = ({
             return (
                 <tr
                     key={uniqueId()}
+                    tabIndex={0}
                     onClick={() => localClickHandler(row, i)}
+                    onKeyUp={(e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            localClickHandler(row, i);
+                        }
+                     }}
                     className={`usda-table__row-item usda-table__row${oddClass}`}>
                     {row.map((data, j) => (
                         columns[j]?.bodyHeader ?

diff --git a/dist/index.js b/dist/index.js
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -347,4 +347,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"**/stories/*.stories.@(mdx|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)stories\\/(?!\\.)(?=.)[^/]*?\\.stories\\.(mdx|js))$"}];</script><script src="runtime~main.cb41af90.iframe.bundle.js"></script><script src="224.095806cb.iframe.bundle.js"></script><script src="main.e596057a.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"**/stories/*.stories.@(mdx|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)stories\\/(?!\\.)(?=.)[^/]*?\\.stories\\.(mdx|js))$"}];</script><script src="runtime~main.cb41af90.iframe.bundle.js"></script><script src="224.095806cb.iframe.bundle.js"></script><script src="main.7959d154.iframe.bundle.js"></script></body></html>
diff --git a/docs/main.e596057a.iframe.bundle.js → docs/main.7959d154.iframe.bundle.js b/docs/main.e596057a.iframe.bundle.js → docs/main.7959d154.iframe.bundle.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "data-transparency-ui",
-  "version": "5.2.7",
+  "version": "5.2.8",
   "description": "Library of UI components powering Data Transparency websites",
   "main": "dist/index.js",
   "style": "dist/data-transparency-ui.css",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -347,4 +347,4 @@



		window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"*/stories/.stories.@(mdx\|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:\\/(?!\\.)(?:(?:(?!(?:^\|\\/)\\.).)?)\\/\|\\/\|$)stories\\/(?!\\.)(?=.)[^/]?\\.stories\\.(mdx\|js))$"}];</script><script src="runtime~main.cb41af90.iframe.bundle.js"></script><script src="224.095806cb.iframe.bundle.js"></script><script src="main.e596057a.iframe.bundle.js"></script></body></html>
		window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook","files":"*/stories/.stories.@(mdx\|js)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook(?:\\/(?!\\.)(?:(?:(?!(?:^\|\\/)\\.).)?)\\/\|\\/\|$)stories\\/(?!\\.)(?=.)[^/]?\\.stories\\.(mdx\|js))$"}];</script><script src="runtime~main.cb41af90.iframe.bundle.js"></script><script src="224.095806cb.iframe.bundle.js"></script><script src="main.7959d154.iframe.bundle.js"></script></body></html>