xi-conversations

commit

7acafdfe92d809dd1093da4851be0c27b1fa31c3

parent

d19892fc36bfb12f989caf3c53f61898e9f2db55

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2023-09-06 03:46

use aria-expanded for dropdown

Diffstat

2 files changed, 10 insertions, 6 deletions

diff --git a/content/js/message.js b/content/js/message.js

@@ -43,8 +43,11 @@ var autoMarkAsRead = function(e, msg) {
   43    43 
   44    44 var toggleDropdown = function(msg, button) {
   45    45 	event.preventDefault();
   46    -1 	var dropdown = button.parentElement.querySelector('.dropdown');
   47    -1 	dropdown.classList.toggle('is-expanded');
   -1    46 	if (button.getAttribute('aria-expaned') === true) {
   -1    47 		button.setAttribute('aria-expanded', 'false');
   -1    48 	} else {
   -1    49 		button.setAttribute('aria-expanded', 'true');
   -1    50 	}
   48    51 };
   49    52 
   50    53 export default function(msg, expanded) {
@@ -88,7 +91,7 @@ export default function(msg, expanded) {
   88    91 					: msg.canReplyToList
   89    92 						? createButton({'class': 'button'}, actions.replyToList, 'list', _('replyList'))
   90    93 						: createButton({'class': 'button'}, actions.replyToSender, 'reply', _('reply')),
   91    -1 				createButton({'class': 'button'}, toggleDropdown, 'menu', _('more')),
   -1    94 				createButton({'class': 'button dropdownToggle', 'aria-expanded': 'false'}, toggleDropdown, 'menu', _('more')),
   92    95 				h('div', {'class': 'dropdown'}, [
   93    96 					createButton({'class': 'dropdown-item'}, actions.replyToSender, 'reply', _('reply'), true),
   94    97 					canReplyAll ? createButton({'class': 'dropdown-item'}, actions.replyAll, 'reply_all', _('replyAll'), true) : null,
@@ -123,10 +126,11 @@ export default function(msg, expanded) {
  123   126 	});
  124   127 
  125   128 	// dropdown events
   -1   129 	var dropdownToggle = e.querySelector('.dropdownToggle');
  126   130 	var dropdown = e.querySelector('.dropdown');
  127    -1 	document.addEventListener('focusout', function(event) {
   -1   131 	e.addEventListener('focusout', function(event) {
  128   132 		if (!event.relatedTarget || !dropdown.contains(event.relatedTarget)) {
  129    -1 			dropdown.classList.remove('is-expanded');
   -1   133 			dropdownToggle.setAttribute('aria-expanded', 'false');
  130   134 		}
  131   135 	});
  132   136 

diff --git a/content/style.css b/content/style.css

@@ -105,7 +105,7 @@ body {
  105   105 	border: 1px solid var(--border);
  106   106 	overflow: hidden;
  107   107 }
  108    -1 .dropdown.is-expanded {
   -1   108 [aria-expanded="true"] + .dropdown {
  109   109 	display: block;
  110   110 }
  111   111 .dropdown-item {