Fossil SCM

chat: ARIA-related attribute changes suggested in the forum.

stephan 2020-12-27 09:05 trunk

Commit ca7aae80ad701e4d4b91b911599ccd01260b43e28bfc7c69367ff18ba4ceec3c

Parent 24080827600388c…

2 files changed +2 -1 +5 -6

M src/chat.c

+2 -1

		--- src/chat.c
		+++ src/chat.c
		@@ -122,11 +122,12 @@
122	122	@ <textarea rows="8" id="chat-input-multi" \
123	123	@ placeholder="Type message here" class="hidden"></textarea>
124	124	@ <input type="submit" value="Send" id="chat-message-submit">
125	125	@ <button id="chat-scroll-bottom">↓</button>
126	126	@ <button id="chat-scroll-top">↑</button>
127		- @ <span id="chat-settings-button" class="settings-icon"></span>
	127	+ @ <span id="chat-settings-button" class="settings-icon" \
	128	+ @ aria-label="Settings..." aria-haspopup="true" ></span>
128	129	@ </div>
129	130	@ <div id='chat-input-file-area'>
130	131	@ <div class='file-selection-wrapper'>
131	132	@ <div class='help-buttonlet'>
132	133	@ Select a file to upload, drag/drop a file into this spot,
133	134

	--- src/chat.c
	+++ src/chat.c
	@@ -122,11 +122,12 @@
122	@ <textarea rows="8" id="chat-input-multi" \
123	@ placeholder="Type message here" class="hidden"></textarea>
124	@ <input type="submit" value="Send" id="chat-message-submit">
125	@ <button id="chat-scroll-bottom">↓</button>
126	@ <button id="chat-scroll-top">↑</button>
127	@ <span id="chat-settings-button" class="settings-icon"></span>

128	@ </div>
129	@ <div id='chat-input-file-area'>
130	@ <div class='file-selection-wrapper'>
131	@ <div class='help-buttonlet'>
132	@ Select a file to upload, drag/drop a file into this spot,
133

	--- src/chat.c
	+++ src/chat.c
	@@ -122,11 +122,12 @@
122	@ <textarea rows="8" id="chat-input-multi" \
123	@ placeholder="Type message here" class="hidden"></textarea>
124	@ <input type="submit" value="Send" id="chat-message-submit">
125	@ <button id="chat-scroll-bottom">↓</button>
126	@ <button id="chat-scroll-top">↑</button>
127	@ <span id="chat-settings-button" class="settings-icon" \
128	@ aria-label="Settings..." aria-haspopup="true" ></span>
129	@ </div>
130	@ <div id='chat-input-file-area'>
131	@ <div class='file-selection-wrapper'>
132	@ <div class='help-buttonlet'>
133	@ Select a file to upload, drag/drop a file into this spot,
134

M src/chat.js

+5 -6

		--- src/chat.js
		+++ src/chat.js
		@@ -183,16 +183,15 @@
183	183	eMsg (the liklihood is good, at least on initial page load,
184	184	that the the image won't be loaded until other messages have
185	185	been injected). */
186	186	scheduleScrollOfMsg: function(eMsg){
187	187	if(1===+eMsg.dataset.hasImage){
188		- console.debug("Delaying scroll for IMG.");
189	188	eMsg.querySelector('img').addEventListener(
190		- 'load', ()=>(this.e.newestMessage \|\| eMsg).scrollIntoView()
	189	+ 'load', ()=>(this.e.newestMessage \|\| eMsg).scrollIntoView(false)
191	190	);
192	191	}else{
193		- eMsg.scrollIntoView();
	192	+ eMsg.scrollIntoView(false);
194	193	}
195	194	return this;
196	195	},
197	196	/* Injects element e as a new row in the chat, at the top of the
198	197	list if atEnd is falsy, else at the end of the list, before
		@@ -244,11 +243,11 @@
244	243	message arrives).
245	244	*/
246	245	if(1===+e.dataset.hasImage){
247	246	e.querySelector('img').addEventListener('load',()=>e.scrollIntoView());
248	247	}else if(!prevMessage \|\| (prevMessage && isInViewport(prevMessage))){
249		- e.scrollIntoView();
	248	+ e.scrollIntoView(false);
250	249	}
251	250	}
252	251	},
253	252	/** Returns true if chat-only mode is enabled. */
254	253	isChatOnlyMode: ()=>document.body.classList.contains('chat-only-mode'),
		@@ -804,18 +803,18 @@
804	803	settingsPopup.options.refresh = function(){
805	804	D.clearElement(this.e);
806	805	settingsOps.forEach(function(op){
807	806	const line = D.addClass(D.span(), 'menu-entry');
808	807	const btn = D.append(D.addClass(D.span(), 'button'), op.label);
809		- D.attr(btn, 'role', 'button');
810	808	const callback = function(ev){
811	809	settingsPopup.hide();
812	810	op.callback.call(this,ev);
813	811	};
814	812	D.append(line, btn);
815	813	if(op.hasOwnProperty('boolValue')){
816		- const check = D.checkbox(1, op.boolValue());
	814	+ const check = D.attr(D.checkbox(1, op.boolValue()),
	815	+ 'aria-label', op.label);
817	816	D.append(line, check);
818	817	check.addEventListener('click', callback);
819	818	}
820	819	D.append(settingsPopup.e, line);
821	820	btn.addEventListener('click', callback);
822	821

	--- src/chat.js
	+++ src/chat.js
	@@ -183,16 +183,15 @@
183	eMsg (the liklihood is good, at least on initial page load,
184	that the the image won't be loaded until other messages have
185	been injected). */
186	scheduleScrollOfMsg: function(eMsg){
187	if(1===+eMsg.dataset.hasImage){
188	console.debug("Delaying scroll for IMG.");
189	eMsg.querySelector('img').addEventListener(
190	'load', ()=>(this.e.newestMessage \|\| eMsg).scrollIntoView()
191	);
192	}else{
193	eMsg.scrollIntoView();
194	}
195	return this;
196	},
197	/* Injects element e as a new row in the chat, at the top of the
198	list if atEnd is falsy, else at the end of the list, before
	@@ -244,11 +243,11 @@
244	message arrives).
245	*/
246	if(1===+e.dataset.hasImage){
247	e.querySelector('img').addEventListener('load',()=>e.scrollIntoView());
248	}else if(!prevMessage \|\| (prevMessage && isInViewport(prevMessage))){
249	e.scrollIntoView();
250	}
251	}
252	},
253	/** Returns true if chat-only mode is enabled. */
254	isChatOnlyMode: ()=>document.body.classList.contains('chat-only-mode'),
	@@ -804,18 +803,18 @@
804	settingsPopup.options.refresh = function(){
805	D.clearElement(this.e);
806	settingsOps.forEach(function(op){
807	const line = D.addClass(D.span(), 'menu-entry');
808	const btn = D.append(D.addClass(D.span(), 'button'), op.label);
809	D.attr(btn, 'role', 'button');
810	const callback = function(ev){
811	settingsPopup.hide();
812	op.callback.call(this,ev);
813	};
814	D.append(line, btn);
815	if(op.hasOwnProperty('boolValue')){
816	const check = D.checkbox(1, op.boolValue());

817	D.append(line, check);
818	check.addEventListener('click', callback);
819	}
820	D.append(settingsPopup.e, line);
821	btn.addEventListener('click', callback);
822

	--- src/chat.js
	+++ src/chat.js
	@@ -183,16 +183,15 @@
183	eMsg (the liklihood is good, at least on initial page load,
184	that the the image won't be loaded until other messages have
185	been injected). */
186	scheduleScrollOfMsg: function(eMsg){
187	if(1===+eMsg.dataset.hasImage){

188	eMsg.querySelector('img').addEventListener(
189	'load', ()=>(this.e.newestMessage \|\| eMsg).scrollIntoView(false)
190	);
191	}else{
192	eMsg.scrollIntoView(false);
193	}
194	return this;
195	},
196	/* Injects element e as a new row in the chat, at the top of the
197	list if atEnd is falsy, else at the end of the list, before
	@@ -244,11 +243,11 @@
243	message arrives).
244	*/
245	if(1===+e.dataset.hasImage){
246	e.querySelector('img').addEventListener('load',()=>e.scrollIntoView());
247	}else if(!prevMessage \|\| (prevMessage && isInViewport(prevMessage))){
248	e.scrollIntoView(false);
249	}
250	}
251	},
252	/** Returns true if chat-only mode is enabled. */
253	isChatOnlyMode: ()=>document.body.classList.contains('chat-only-mode'),
	@@ -804,18 +803,18 @@
803	settingsPopup.options.refresh = function(){
804	D.clearElement(this.e);
805	settingsOps.forEach(function(op){
806	const line = D.addClass(D.span(), 'menu-entry');
807	const btn = D.append(D.addClass(D.span(), 'button'), op.label);

808	const callback = function(ev){
809	settingsPopup.hide();
810	op.callback.call(this,ev);
811	};
812	D.append(line, btn);
813	if(op.hasOwnProperty('boolValue')){
814	const check = D.attr(D.checkbox(1, op.boolValue()),
815	'aria-label', op.label);
816	D.append(line, check);
817	check.addEventListener('click', callback);
818	}
819	D.append(settingsPopup.e, line);
820	btn.addEventListener('click', callback);
821

Fossil SCM

Keyboard Shortcuts