Skip to content

Commit

Permalink
Merged in cc-2984 (pull request #11)
Browse files Browse the repository at this point in the history
Fixed 508 issues regarding CC-2984 and CC-2985

* Fixed 508 issues regarding CC-2984 and CC-2985

* addressed PR comments: changed comment language and table head focus styles

Approved-by: Chris Moesel
  • Loading branch information
mitread authored and cmoesel committed Feb 21, 2020
1 parent 18926e4 commit 35298c7
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 1 deletion.
17 changes: 17 additions & 0 deletions src/components/Summary.js
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ export default class Summary extends Component {
title={`flag: ${tooltip}`}
data-tip={tooltip}
role="tooltip"
tabIndex={0}
/>
no entries found
</div>
Expand Down Expand Up @@ -130,6 +131,7 @@ export default class Summary extends Component {
title={props.value ? `flag: ${props.value}` : 'flag'}
data-tip={props.value ? props.value : ''}
role="tooltip"
tabIndex={0}
/>,
sortable: false,
width: 35,
Expand Down Expand Up @@ -189,6 +191,8 @@ export default class Summary extends Component {
//ReactTable needs an ID for aria-describedby
let tableID = subSection.name.replace(/ /g,"_") + "-table";
let customProps = {id:tableID};
//getTheadThProps solution courtesy of:
//https://spectrum.chat/react-table/general/is-there-a-way-to-activate-sort-via-onkeypress~66656e87-7f5c-4767-8b23-ddf35d73f8af
return (
<div key={index} className="table" role="table"
aria-label={subSection.name} aria-describedby={customProps.id}>
Expand All @@ -202,6 +206,17 @@ export default class Summary extends Component {
defaultPageSize={10}
resizable={false}
getProps={() => customProps}
getTheadThProps={(state,rowInfo,column,instance) => {
return {
tabIndex: 0,
onKeyPress: (e, handleOriginal) => {
if(e.which === 13) {
instance.sortColumn(column);
e.stopPropagation();
}
}
};
}}
/>
</div>
);
Expand All @@ -225,6 +240,7 @@ export default class Summary extends Component {
className={`flag flag-nav ${flaggedClass}`}
icon={flagged ? 'exclamation-circle' : 'circle'}
title="flag"
tabIndex={0}
/>
{subSection.name}
{subSection.info &&
Expand All @@ -240,6 +256,7 @@ export default class Summary extends Component {
title={`more info: ${subSection.name}`}
data-tip="more info"
role="tooltip"
tabIndex={0}
/>
</div>
}
Expand Down
2 changes: 2 additions & 0 deletions src/styles/components/_Summary.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
color: $color-white;
padding: 20px 0;
width: 300px;
z-index: 1;

.toc-list.is-collapsible {
.toc-list-item {
Expand Down Expand Up @@ -90,6 +91,7 @@
&__display {
flex: 1;
background-color: $color-gray-lightest;
z-index: 10;

&-title {
background-color: $color-blue;
Expand Down
2 changes: 1 addition & 1 deletion src/styles/elements/_tables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
white-space: nowrap;

&:focus {
outline: none;
border: 1px dotted gray;
}

&.-cursor-pointer {
Expand Down

0 comments on commit 35298c7

Please sign in to comment.