Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(TableBatchActions): ensure hidden action bar un-focusable #5081

Merged
merged 6 commits into from
Jan 21, 2020
Merged

fix(TableBatchActions): ensure hidden action bar un-focusable #5081

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
117f827
fix(TableBatchActions): ensure hidden action bar un-focusable
asudoh Jan 17, 2020
6a18e72
Merge branch 'master' into table-batch-action-sequential-navigation
tw15egan Jan 17, 2020
766df5c
fix(DataTable): control tabindex in action bar
asudoh Jan 20, 2020
0195ef1
Merge branch 'master' into table-batch-action-sequential-navigation
tw15egan Jan 20, 2020
bab08a4
test(DataTable): update snapshot
asudoh Jan 21, 2020
6f1f27d
Merge branch 'master' into table-batch-action-sequential-navigation
asudoh Jan 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/react/src/components/DataTable/TableBatchActions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ const TableBatchActions = ({
{children}
<Button
className={`${prefix}--batch-summary__cancel`}
tabIndex={shouldShowBatchActions ? 0 : -1}
onClick={onCancel}>
{t('carbon.table.batch.cancel')}
</Button>
Expand Down
10 changes: 9 additions & 1 deletion packages/react/src/components/DataTable/TableToolbarSearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const TableToolbarSearch = ({
persistent,
persistant,
id,
tabIndex,
...rest
}) => {
const { current: controlled } = useRef(expandedProp !== undefined);
Expand Down Expand Up @@ -79,7 +80,7 @@ const TableToolbarSearch = ({

return (
<div
tabIndex={expandedState ? '-1' : '0'}
tabIndex={expandedState ? '-1' : tabIndex}
role="search"
ref={searchRef}
onClick={event => handleExpand(event, true)}
Expand All @@ -88,6 +89,7 @@ const TableToolbarSearch = ({
className={searchContainerClasses}>
<Search
size="sm"
tabIndex={expandedState ? tabIndex : '-1'}
className={className}
defaultValue={defaultValue}
value={value}
Expand Down Expand Up @@ -147,6 +149,11 @@ TableToolbarSearch.propTypes = {
*/
translateWithId: PropTypes.func.isRequired,

/**
* Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
*/
tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

/**
* Whether the search should be allowed to expand
*/
Expand All @@ -158,6 +165,7 @@ TableToolbarSearch.propTypes = {
};

TableToolbarSearch.defaultProps = {
tabIndex: '0',
translateWithId,
persistent: false,
};
Expand Down
16 changes: 12 additions & 4 deletions packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1818,6 +1818,7 @@ exports[`DataTable should render 1`] = `
id="custom-id"
onChange={[Function]}
persistent={true}
tabIndex="0"
translateWithId={[Function]}
/>
<TableToolbarMenu
Expand Down Expand Up @@ -2185,14 +2186,14 @@ exports[`DataTable should render 1`] = `
disabled={false}
kind="primary"
onClick={[Function]}
tabIndex={0}
tabIndex={-1}
type="button"
>
<button
className="bx--batch-summary__cancel bx--btn bx--btn--primary"
disabled={false}
onClick={[Function]}
tabIndex={0}
tabIndex={-1}
type="button"
>
Cancel
Expand Down Expand Up @@ -2221,6 +2222,7 @@ exports[`DataTable should render 1`] = `
id="custom-id"
onChange={[Function]}
persistent={true}
tabIndex="0"
translateWithId={[Function]}
>
<div
Expand All @@ -2239,6 +2241,7 @@ exports[`DataTable should render 1`] = `
onChange={[Function]}
placeHolderText="Filter table"
size="sm"
tabIndex="-1"
type="text"
value=""
>
Expand Down Expand Up @@ -2291,6 +2294,7 @@ exports[`DataTable should render 1`] = `
onChange={[Function]}
placeholder="Filter table"
role="searchbox"
tabIndex="-1"
type="text"
value=""
/>
Expand Down Expand Up @@ -2793,6 +2797,7 @@ exports[`DataTable sticky header should render 1`] = `
id="custom-id"
onChange={[Function]}
persistent={true}
tabIndex="0"
translateWithId={[Function]}
/>
<TableToolbarMenu
Expand Down Expand Up @@ -3163,14 +3168,14 @@ exports[`DataTable sticky header should render 1`] = `
disabled={false}
kind="primary"
onClick={[Function]}
tabIndex={0}
tabIndex={-1}
type="button"
>
<button
className="bx--batch-summary__cancel bx--btn bx--btn--primary"
disabled={false}
onClick={[Function]}
tabIndex={0}
tabIndex={-1}
type="button"
>
Cancel
Expand Down Expand Up @@ -3199,6 +3204,7 @@ exports[`DataTable sticky header should render 1`] = `
id="custom-id"
onChange={[Function]}
persistent={true}
tabIndex="0"
translateWithId={[Function]}
>
<div
Expand All @@ -3217,6 +3223,7 @@ exports[`DataTable sticky header should render 1`] = `
onChange={[Function]}
placeHolderText="Filter table"
size="sm"
tabIndex="-1"
type="text"
value=""
>
Expand Down Expand Up @@ -3269,6 +3276,7 @@ exports[`DataTable sticky header should render 1`] = `
onChange={[Function]}
placeholder="Filter table"
role="searchbox"
tabIndex="-1"
type="text"
value=""
/>
Expand Down
4 changes: 2 additions & 2 deletions ...ges/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@ exports[`DataTable.TableBatchActions should render 1`] = `
disabled={false}
kind="primary"
onClick={[MockFunction]}
tabIndex={0}
tabIndex={-1}
type="button"
>
<button
className="bx--batch-summary__cancel bx--btn bx--btn--primary"
disabled={false}
onClick={[MockFunction]}
tabIndex={0}
tabIndex={-1}
type="button"
>
Cancel
Expand Down
3 changes: 3 additions & 0 deletions ...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
id="custom-id"
onChange={[MockFunction]}
persistent={false}
tabIndex="0"
translateWithId={[Function]}
>
<div
Expand All @@ -25,6 +26,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
onChange={[Function]}
placeHolderText="Filter table"
size="sm"
tabIndex="-1"
type="text"
value=""
>
Expand Down Expand Up @@ -77,6 +79,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
onChange={[Function]}
placeholder="Filter table"
role="searchbox"
tabIndex="-1"
type="text"
value=""
/>
Expand Down
17 changes: 14 additions & 3 deletions packages/react/src/components/DataTable/stories/with-batch-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,24 +59,31 @@ export default props => (
<TableToolbar>
<TableBatchActions {...getBatchActionProps()}>
<TableBatchAction
tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
renderIcon={Delete}
onClick={batchActionClick(selectedRows)}>
Delete
</TableBatchAction>
<TableBatchAction
tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
renderIcon={Save}
onClick={batchActionClick(selectedRows)}>
Save
</TableBatchAction>
<TableBatchAction
tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
renderIcon={Download}
onClick={batchActionClick(selectedRows)}>
Download
</TableBatchAction>
</TableBatchActions>
<TableToolbarContent>
<TableToolbarSearch onChange={onInputChange} />
<TableToolbarMenu>
<TableToolbarSearch
tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
onChange={onInputChange}
/>
<TableToolbarMenu
tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}>
<TableToolbarAction primaryFocus onClick={() => alert('Alert 1')}>
Action 1
</TableToolbarAction>
Expand All @@ -87,7 +94,11 @@ export default props => (
Action 3
</TableToolbarAction>
</TableToolbarMenu>
<Button onClick={action('Add new row')} size="small" kind="primary">
<Button
tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
onClick={action('Add new row')}
size="small"
kind="primary">
Add new
</Button>
</TableToolbarContent>
Expand Down