paquetes/gamja
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add more ARIA attributes for accessibility

Browse Source
This commit is contained in:
Simon Ser
2025-06-26 19:21:01 +02:00
parent 5b7459f24d
commit e91c246a95
4 changed files with 18 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/app.js
View File

@@ -2096,6 +2096,7 @@ export default class App extends Component {
id="member-list" id="member-list"
class=${this.state.openPanels.memberList ? "expand" : ""} class=${this.state.openPanels.memberList ? "expand" : ""}
role="complementary" role="complementary"
aria-label="Members list"
> >
<button <button
class="expander" class="expander"
@@ -2222,7 +2223,7 @@ export default class App extends Component {
let error = null; let error = null;
if (this.state.error) { if (this.state.error) {
error = html` error = html`
<div id="error-msg"> <div id="error-msg" role="alert">
${this.state.error} ${this.state.error}
${" "} ${" "}
<button onClick=${this.handleDismissError}>×</button> <button onClick=${this.handleDismissError}>×</button>
@@ -2272,7 +2273,7 @@ export default class App extends Component {
scrollKey=${this.state.activeBuffer} scrollKey=${this.state.activeBuffer}
onScrollTop=${this.handleBufferScrollTop} onScrollTop=${this.handleBufferScrollTop}
> >
<section id="buffer" ref=${this.buffer} tabindex="-1" role="main"> <section id="buffer" ref=${this.buffer} tabindex="-1" role="log">
<${Buffer} <${Buffer}
buffer=${activeBuffer} buffer=${activeBuffer}
server=${activeServer} server=${activeServer}

6
components/buffer-list.js
View File

@@ -80,5 +80,9 @@ export default function BufferList(props) {
`; `;
}); });
return html`<ul role="tablist">${items}</ul>`; return html`
<ul role="tablist" aria-label="Buffer list">
${items}
</ul>
`;
} }

16
components/buffer.js
View File

@@ -386,7 +386,7 @@ class LogLine extends Component {
} }
return html` return html`
<div class="logline ${lineClass}" data-key=${msg.key}> <div class="logline ${lineClass}" data-key=${msg.key} role="listitem">
<${Timestamp} date=${new Date(msg.tags.time)} url=${getMessageURL(buf, msg)}/> <${Timestamp} date=${new Date(msg.tags.time)} url=${getMessageURL(buf, msg)}/>
${" "} ${" "}
${content} ${content}
@@ -511,7 +511,7 @@ class FoldGroup extends Component {
} }
return html` return html`
<div class="logline" data-key=${msgs[0].key}> <div class="logline" data-key=${msgs[0].key} role="listitem">
${timestamp} ${timestamp}
${" "} ${" "}
${content} ${content}
@@ -564,7 +564,7 @@ class NotificationNagger extends Component {
} }
return html` return html`
<div class="logline nag"> <div class="logline nag" role="listitem">
<${Timestamp}/> <${Timestamp}/>
${" "} ${" "}
<a href="#" onClick=${this.handleClick}>Turn on desktop notifications</a> to get notified about new messages <a href="#" onClick=${this.handleClick}>Turn on desktop notifications</a> to get notified about new messages
@@ -605,7 +605,7 @@ class ProtocolHandlerNagger extends Component {
} }
let name = this.props.bouncerName || "this bouncer"; let name = this.props.bouncerName || "this bouncer";
return html` return html`
<div class="logline nag"> <div class="logline nag" role="listitem">
<${Timestamp}/> <${Timestamp}/>
${" "} ${" "}
<a href="#" onClick=${this.handleClick}>Register our protocol handler</a> to open IRC links with ${name} <a href="#" onClick=${this.handleClick}>Register our protocol handler</a> to open IRC links with ${name}
@@ -643,7 +643,7 @@ function AccountNagger({ server, onAuthClick, onRegisterClick }) {
} }
return html` return html`
<div class="logline nag"> <div class="logline nag" role="listitem">
<${Timestamp}/> ${msg} <${Timestamp}/> ${msg}
</div> </div>
`; `;
@@ -662,7 +662,7 @@ class DateSeparator extends Component {
let date = this.props.date; let date = this.props.date;
let text = date.toLocaleDateString([], { year: "numeric", month: "2-digit", day: "2-digit" }); let text = date.toLocaleDateString([], { year: "numeric", month: "2-digit", day: "2-digit" });
return html` return html`
<div class="separator date-separator"> <div class="separator date-separator" role="separator">
${text} ${text}
</div> </div>
`; `;
@@ -670,7 +670,7 @@ class DateSeparator extends Component {
} }
function UnreadSeparator(props) { function UnreadSeparator(props) {
return html`<div class="separator unread-separator">New messages</div>`; return html`<div class="separator unread-separator" role="separator">New messages</div>`;
} }
function sameDate(d1, d2) { function sameDate(d1, d2) {
@@ -847,7 +847,7 @@ export default class Buffer extends Component {
children.push(createFoldGroup(foldMessages)); children.push(createFoldGroup(foldMessages));
return html` return html`
<div class="logline-list" role="log"> <div class="logline-list" role="list">
${children} ${children}
</div> </div>
`; `;

4
components/dialog.js
View File

@@ -47,11 +47,11 @@ export default class Dialog extends Component {
render() { render() {
return html` return html`
<div class="dialog" onClick=${this.handleBackdropClick}> <div class="dialog" onClick=${this.handleBackdropClick} role="dialog" aria-modal="true">
<div class="dialog-body" ref=${this.body}> <div class="dialog-body" ref=${this.body}>
<div class="dialog-header"> <div class="dialog-header">
<h2>${this.props.title}</h2> <h2>${this.props.title}</h2>
<button class="dialog-close" onClick=${this.handleCloseClick}>×</button> <button class="dialog-close" onClick=${this.handleCloseClick} title="Close">×</button>
</div> </div>
${this.props.children} ${this.props.children}
</div> </div>