You've already forked matrix-react-sdk
							
							
				mirror of
				https://github.com/matrix-org/matrix-react-sdk.git
				synced 2025-11-04 11:51:45 +03:00 
			
		
		
		
	A11y: repurpose more divs into AccessibleButtons.
With this more of the controls that look like buttons can be operated via the keyboard and navigated to by screen reader users. This includes editor buttons such as File upload, Audio / Video call, Right pannel hide button, Jump to the bottom timeline button, and some more buttons found in the user settings. Also I have added alt texts to some images that in turn label buttons which these happen to be packed in and removed some untranslated alt texts from decorative non-actionable images that might add more verbosity when talking about screen reader user experience.
This commit is contained in:
		@@ -223,14 +223,15 @@ module.exports = React.createClass({
 | 
			
		||||
            );
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
            const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 | 
			
		||||
        if (!this.props.atEndOfLiveTimeline) {
 | 
			
		||||
            return (
 | 
			
		||||
                <div className="mx_RoomStatusBar_scrollDownIndicator"
 | 
			
		||||
                <AccessibleButton className="mx_RoomStatusBar_scrollDownIndicator"
 | 
			
		||||
                        onClick={this.props.onScrollToBottomClick}>
 | 
			
		||||
                    <img src="img/scrolldown.svg" width="24" height="24"
 | 
			
		||||
                        alt={_t("Scroll to bottom of page")}
 | 
			
		||||
                        title={_t("Scroll to bottom of page")} />
 | 
			
		||||
                </div>
 | 
			
		||||
                </AccessibleButton>
 | 
			
		||||
            );
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
@@ -385,7 +386,7 @@ module.exports = React.createClass({
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        return <div className="mx_RoomStatusBar_connectionLostBar">
 | 
			
		||||
            <img src="img/warning.svg" width="24" height="23" title={_t("Warning")} alt={_t("Warning")} />
 | 
			
		||||
            <img src="img/warning.svg" width="24" height="23" title={_t("Warning")} alt="" />
 | 
			
		||||
            <div>
 | 
			
		||||
                <div className="mx_RoomStatusBar_connectionLostBar_title">
 | 
			
		||||
                    { title }
 | 
			
		||||
@@ -485,7 +486,9 @@ module.exports = React.createClass({
 | 
			
		||||
                <div className="mx_RoomStatusBar_indicator">
 | 
			
		||||
                    { indicator }
 | 
			
		||||
                </div>
 | 
			
		||||
                { content }
 | 
			
		||||
                <div role="alert">
 | 
			
		||||
                    { content }
 | 
			
		||||
                </div>
 | 
			
		||||
            </div>
 | 
			
		||||
        );
 | 
			
		||||
    },
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user