A11y tweaks to the left pane and timeline
This commit is contained in:
parent
4fc7c69a73
commit
9de33e4ffd
3 changed files with 14 additions and 6 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue