mirror of
https://github.com/desktop/desktop
synced 2024-10-31 11:07:25 +00:00
Bring getRowAriaLabel back to life
Co-Authored-By: tidy-dev <75402236+tidy-dev@users.noreply.github.com>
This commit is contained in:
parent
fd0dd0e407
commit
78168f32c7
2 changed files with 24 additions and 0 deletions
|
@ -82,6 +82,14 @@ interface IListRowProps {
|
|||
|
||||
/** a custom css class to apply to the row */
|
||||
readonly className?: string
|
||||
|
||||
/**
|
||||
* aria label value for screen readers
|
||||
*
|
||||
* Note: you may need to apply an aria-hidden attribute to any child text
|
||||
* elements for this to take precedence.
|
||||
*/
|
||||
readonly ariaLabel?: string
|
||||
}
|
||||
|
||||
export class ListRow extends React.Component<IListRowProps, {}> {
|
||||
|
@ -170,6 +178,7 @@ export class ListRow extends React.Component<IListRowProps, {}> {
|
|||
aria-setsize={ariaSetSize}
|
||||
aria-posinset={ariaPosInSet}
|
||||
aria-selected={selectable ? selected : undefined}
|
||||
aria-label={this.props.ariaLabel}
|
||||
className={rowClassName}
|
||||
tabIndex={tabIndex}
|
||||
ref={this.onRef}
|
||||
|
|
|
@ -256,6 +256,15 @@ interface IListProps {
|
|||
|
||||
/** The aria-label attribute for the list component. */
|
||||
readonly ariaLabel?: string
|
||||
|
||||
/**
|
||||
* Optional callback for providing an aria label for screen readers for each
|
||||
* row.
|
||||
*
|
||||
* Note: you may need to apply an aria-hidden attribute to any child text
|
||||
* elements for this to take precedence.
|
||||
*/
|
||||
readonly getRowAriaLabel?: (row: number) => string | undefined
|
||||
}
|
||||
|
||||
interface IListState {
|
||||
|
@ -947,6 +956,11 @@ export class List extends React.Component<IListProps, IListState> {
|
|||
|
||||
const id = this.getRowId(rowIndex)
|
||||
|
||||
const ariaLabel =
|
||||
this.props.getRowAriaLabel !== undefined
|
||||
? this.props.getRowAriaLabel(rowIndex)
|
||||
: undefined
|
||||
|
||||
return (
|
||||
<ListRow
|
||||
key={params.key}
|
||||
|
@ -956,6 +970,7 @@ export class List extends React.Component<IListProps, IListState> {
|
|||
rowIndex={{ section: 0, row: rowIndex }}
|
||||
sectionHasHeader={false}
|
||||
selected={selected}
|
||||
ariaLabel={ariaLabel}
|
||||
onRowClick={this.onRowClick}
|
||||
onRowDoubleClick={this.onRowDoubleClick}
|
||||
onRowKeyDown={this.onRowKeyDown}
|
||||
|
|
Loading…
Reference in a new issue