development/github-desktop
development/github-desktop
1
0
Fork 0
mirror of https://github.com/desktop/desktop synced 2024-10-31 11:07:25 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add aria-live message with selected count to multiselectable lists

Browse source
This commit is contained in:
Sergio Padrino 2023-08-01 15:58:47 +02:00
parent ea4522e79f
commit 5b5557bbe6
2 changed files with 36 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
app/src/ui/lib/list/list.tsx
View file

@ -20,6 +20,7 @@ import { DragData, DragType } from '../../../models/drag-drop'
import memoizeOne from 'memoize-one'
import { RowIndexPath } from './list-row-index-path'
import { sendNonFatalException } from '../../../lib/helpers/non-fatal-exception'
import { AriaLiveContainer } from '../../accessibility/aria-live-container'
/**
* Describe the first argument given to the cellRenderer,
@ -1027,16 +1028,32 @@ export class List extends React.Component<IListProps, IListState> {
* @param height - The height of the Grid as given by AutoSizer
*/
private renderContents(width: number, height: number) {
const { selectedRows, selectionMode } = this.props
const ariaLiveMessage =
selectionMode !== 'single' && selectedRows.length > 0 ? (
<AriaLiveContainer
message={`${selectedRows.length} item${
selectedRows.length > 1 ? 's' : ''
} selected`}
/>
) : null
if (__WIN32__) {
return (
<>
{ariaLiveMessage}
{this.renderGrid(width, height)}
{this.renderFakeScroll(height)}
</>
)
}
return this.renderGrid(width, height)
return (
<>
{ariaLiveMessage}
{this.renderGrid(width, height)}
</>
)
}
private onGridRef = (ref: Grid | null) => {

19
app/src/ui/lib/list/section-list.tsx
View file

@ -28,6 +28,7 @@ import {
} from './list-row-index-path'
import { range } from '../../../lib/range'
import { sendNonFatalException } from '../../../lib/helpers/non-fatal-exception'
import { AriaLiveContainer } from '../../accessibility/aria-live-container'
/**
* Describe the first argument given to the cellRenderer,
@ -1191,16 +1192,32 @@ export class SectionList extends React.Component<
* @param height - The height of the Grid as given by AutoSizer
*/
private renderContents(width: number, height: number) {
const { selectedRows, selectionMode } = this.props
const ariaLiveMessage =
selectionMode !== 'single' && selectedRows.length > 0 ? (
<AriaLiveContainer
message={`${selectedRows.length} item${
selectedRows.length > 1 ? 's' : ''
} selected`}
/>
) : null
if (__WIN32__) {
return (
<>
{ariaLiveMessage}
{this.renderGrid(width, height)}
{this.renderFakeScroll(height)}
</>
)
}
return this.renderGrid(width, height)
return (
<>
{ariaLiveMessage}
{this.renderGrid(width, height)}
</>
)
}
private getRowHeight = (section: number) => {