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

Improve accessibility by adding ARIA attributes

Browse Source
This commit is contained in:
Simon Ser
2025-06-26 19:00:43 +02:00
parent af3a255824
commit 5b7459f24d
3 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/app.js
View File

@@ -2071,7 +2071,7 @@ export default class App extends Component {
} }
bufferHeader = html` bufferHeader = html`
<section id="buffer-header"> <section id="buffer-header" role="banner">
<${BufferHeader} <${BufferHeader}
buffer=${activeBuffer} buffer=${activeBuffer}
server=${activeServer} server=${activeServer}
@@ -2093,8 +2093,9 @@ export default class App extends Component {
if (activeBuffer && activeBuffer.type === BufferType.CHANNEL) { if (activeBuffer && activeBuffer.type === BufferType.CHANNEL) {
memberList = html` memberList = html`
<section <section
id="member-list" id="member-list"
class=${this.state.openPanels.memberList ? "expand" : ""} class=${this.state.openPanels.memberList ? "expand" : ""}
role="complementary"
> >
<button <button
class="expander" class="expander"
@@ -2245,8 +2246,8 @@ export default class App extends Component {
let app = html` let app = html`
<section <section
id="buffer-list" id="buffer-list"
class=${this.state.openPanels.bufferList ? "expand" : ""} class=${this.state.openPanels.bufferList ? "expand" : ""}
> >
<${BufferList} <${BufferList}
buffers=${this.state.buffers} buffers=${this.state.buffers}
@@ -2271,7 +2272,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"> <section id="buffer" ref=${this.buffer} tabindex="-1" role="main">
<${Buffer} <${Buffer}
buffer=${activeBuffer} buffer=${activeBuffer}
server=${activeServer} server=${activeServer}

4
components/buffer-list.js
View File

@@ -47,7 +47,7 @@ function BufferItem(props) {
} }
return html` return html`
<li class="${classes.join(" ")}"> <li class="${classes.join(" ")}" role="tab" aria-selected="${props.active}">
<a <a
href=${getBufferURL(props.buffer)} href=${getBufferURL(props.buffer)}
title=${title} title=${title}
@@ -80,5 +80,5 @@ export default function BufferList(props) {
`; `;
}); });
return html`<ul>${items}</ul>`; return html`<ul role="tablist">${items}</ul>`;
} }

12
components/buffer.js
View File

@@ -43,7 +43,7 @@ function _Timestamp({ date, url, showSeconds }) {
if (showSeconds) { if (showSeconds) {
timestamp += ":--"; timestamp += ":--";
} }
return html`<span class="timestamp">${timestamp}</span>`; return html`<span class="timestamp" aria-hidden="true">${timestamp}</span>`;
} }
let hh = date.getHours().toString().padStart(2, "0"); let hh = date.getHours().toString().padStart(2, "0");
@@ -154,7 +154,13 @@ class LogLine extends Component {
content = html`${linkify(stripANSI(text), onChannelClick)}`; content = html`${linkify(stripANSI(text), onChannelClick)}`;
lineClass += " talk"; lineClass += " talk";
} }
content = html`<span class="nick-caret">${prefix}</span>${createNick(msg.prefix.name)}<span class="nick-caret">${suffix}</span> ${content}`; content = html`
<span class="nick-caret" aria-hidden="true">${prefix}</span>
${createNick(msg.prefix.name)}
<span class="nick-caret" aria-hidden="true">${suffix}</span>
${" "}
${content}
`;
} }
let allowedPrefixes = server.statusMsg; let allowedPrefixes = server.statusMsg;
@@ -841,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"> <div class="logline-list" role="log">
${children} ${children}
</div> </div>
`; `;