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

fixing screen readers (NVDA/JAWS) behaviors not narrating role and sorting information for the column headers #604

Merged
merged 3 commits into from
Jan 16, 2024
Merged

fixing screen readers (NVDA/JAWS) behaviors not narrating role and sorting information for the column headers #604

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8beeb5d
fixing accessibility issues
polatengin Jan 16, 2024
d413d9b
fixing aria sort attribute
polatengin Jan 16, 2024
c7ca1ba
fixing aria sort attribute
polatengin Jan 16, 2024
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
11 changes: 5 additions & 6 deletions RetrospectiveExtension.Frontend/components/boardSummaryTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
*/
function getTable(data: IBoardSummaryTableItem[], sortingState: SortingState, onSortingChange: OnChangeFn<SortingState>): Table<IBoardSummaryTableItem> {
const columnHelper = createColumnHelper<IBoardSummaryTableItem>()
const columns: ColumnDef<IBoardSummaryTableItem, any>[] = [

Check warning on line 49 in RetrospectiveExtension.Frontend/components/boardSummaryTable.tsx

View workflow job for this annotation

GitHub Actions / Frontend - Build and Test 

Unexpected any. Specify a different type
columnHelper.accessor('id', {
header: null,
footer: info => info.column.id,
Expand Down Expand Up @@ -257,15 +257,18 @@
}

const getThProps = (header: Header<IBoardSummaryTableItem, unknown>) => {

const sortDirection: false | SortDirection = header.column.getIsSorted()
let sortClassName: string = '';
let sortClassName: string = "";
let ariaSort: "none" | "ascending" | "descending" | "other" = "none";
if(sortDirection) {
sortClassName = sortDirection;
ariaSort = `${sortDirection}ending`;
}

return {
key: header.id,
role: "button",
'aria-sort': ariaSort,
style: {
minWidth: header.getSize(),
width: header.getSize()
Expand All @@ -280,7 +283,7 @@
onClick: () => row.toggleExpanded(),
tabIndex: 0,
'aria-label': 'Board summary row. Click row to expand and view more statistics for this board.',
onKeyPress: (e: any) => {

Check warning on line 286 in RetrospectiveExtension.Frontend/components/boardSummaryTable.tsx

View workflow job for this annotation

GitHub Actions / Frontend - Build and Test 

Unexpected any. Specify a different type
if (e.key === 'Enter') {
row.toggleExpanded();
}
Expand Down Expand Up @@ -319,7 +322,6 @@
}

useEffect(() => {

if(teamId !== props.teamId) {
try {
BoardDataService.getBoardsForTeam(props.teamId)
Expand All @@ -328,15 +330,12 @@
handleBoardsDocuments(boardDocuments);
})
.catch(e => {
// TODO: Better error handling.
appInsights.trackException(e);
})
} catch (e) {
// TODO: Better error handling.
appInsights.trackException(e);
}
}

}, [props.teamId])

if(boardSummaryState.allDataLoaded !== true) {
Expand Down
Loading