From d5331763bc65b7f08325ca6eff580c0892c19776 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20V=C3=A1gner?= Date: Mon, 28 May 2018 15:14:27 +0200 Subject: [PATCH] Conditionally enable aria-live region for the timeline scroll pannel (fixes vector-im/riot-web#5696 and vector-im/riot-web#5697) We only wish to set aria-live to polite when the list is scrolled to the bottom to avoid flooding screen readers with loads of DOM changes when scrolling causing presentation of random message events. To avoid presenting outgoing events twice we are only setting aria-live when there is a new content to add so e.g. style changes and similar won't be propagated to assistive tools. --- src/components/structures/ScrollPanel.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js index 0fdbc9a3493..c9c3e0fe3cf 100644 --- a/src/components/structures/ScrollPanel.js +++ b/src/components/structures/ScrollPanel.js @@ -680,6 +680,12 @@ module.exports = React.createClass({ render: function() { const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper"); + // We only wish to set aria-live to polite when the list is scrolled to the bottom + // to avoid flooding screen readers with loads of DOM changes when scrolling + // causing presentation of random message events. + // To avoid presenting outgoing events twice we are only setting aria-live when there is + // a new content to add so e.g. style changes and similar won't be propagated to assistive tools. + let enableLiveRegion = (this.scrollState.stuckAtBottom && this._pendingFillRequests['f']); // TODO: the classnames on the div and ol could do with being updated to // reflect the fact that we don't necessarily contain a list of messages. // it's not obvious why we have a separate div and ol anyway. @@ -687,7 +693,7 @@ module.exports = React.createClass({ onScroll={this.onScroll} onResize={this.onResize} className={this.props.className} style={this.props.style}>
-
    +
      { this.props.children }