A11y tweaks to the left pane and timeline

This commit is contained in:
Josh Perez 2023-01-23 11:59:12 -05:00 committed by GitHub
parent 4fc7c69a73
commit 9de33e4ffd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 6 deletions

View file

@ -601,7 +601,7 @@ export function LeftPane({
} }
return ( return (
<div <nav
className={classNames( className={classNames(
'module-left-pane', 'module-left-pane',
isResizing && 'module-left-pane--is-resizing', isResizing && 'module-left-pane--is-resizing',
@ -706,7 +706,7 @@ export function LeftPane({
}, },
})} })}
{crashReportCount > 0 && renderCrashReportDialog()} {crashReportCount > 0 && renderCrashReportDialog()}
</div> </nav>
); );
} }

View file

@ -19,8 +19,14 @@ export const LastSeenIndicator = forwardRef<HTMLDivElement, Props>(
return ( return (
<div className="module-last-seen-indicator" ref={ref}> <div className="module-last-seen-indicator" ref={ref}>
<div className="module-last-seen-indicator__bar" /> <div className="module-last-seen-indicator__bar" role="separator" />
<div className="module-last-seen-indicator__text">{message}</div> <div
aria-level={6}
className="module-last-seen-indicator__text"
role="heading"
>
{message}
</div>
</div> </div>
); );
} }

View file

@ -871,6 +871,7 @@ export class Timeline extends React.Component<
key={messageId} key={messageId}
data-item-index={itemIndex} data-item-index={itemIndex}
data-message-id={messageId} data-message-id={messageId}
role="listitem"
> >
<ErrorBoundary i18n={i18n} showDebugLog={showDebugLog}> <ErrorBoundary i18n={i18n} showDebugLog={showDebugLog}>
{renderItem({ {renderItem({
@ -1047,7 +1048,7 @@ export class Timeline extends React.Component<
{floatingHeader} {floatingHeader}
<div <main
className="module-timeline__messages__container" className="module-timeline__messages__container"
onScroll={this.onScroll} onScroll={this.onScroll}
ref={this.containerRef} ref={this.containerRef}
@ -1059,6 +1060,7 @@ export class Timeline extends React.Component<
haveOldest && 'module-timeline__messages--have-oldest' haveOldest && 'module-timeline__messages--have-oldest'
)} )}
ref={this.messagesRef} ref={this.messagesRef}
role="list"
> >
{haveOldest && ( {haveOldest && (
<> <>
@ -1079,7 +1081,7 @@ export class Timeline extends React.Component<
style={AT_BOTTOM_DETECTOR_STYLE} style={AT_BOTTOM_DETECTOR_STYLE}
/> />
</div> </div>
</div> </main>
{shouldShowScrollDownButton ? ( {shouldShowScrollDownButton ? (
<ScrollDownButton <ScrollDownButton