tabshift/pocketbase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minor screen reader improvements

Browse Source
This commit is contained in:
Gani Georgiev
2026-04-18 22:11:42 +03:00
parent 624c3357be
commit 075e20efae
88 changed files with 298 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ui/src/records/recordFilePickerModal.js
View File

@@ -249,7 +249,7 @@ function recordFilePickerModal(settings = defaultSettings) {
{ className: "txt-lg collection-name m-r-auto" },
() => data.activeCollection?.name || "Select collection",
),
t.i({ className: "ri-arrow-drop-down-line" }),
t.i({ className: "ri-arrow-drop-down-line", ariaHidden: true }),
),
t.div(
{ id: "collections_dropdown" + uniqueId, className: "dropdown", popover: "hint" },
@@ -281,10 +281,10 @@ function recordFilePickerModal(settings = defaultSettings) {
{
type: "button",
className: "btn circle transparent",
ariaDescription: app.attrs.tooltip("Add new record"),
ariaLabel: app.attrs.tooltip("Add new record"),
onclick: () => app.modals.openRecordUpsert(data.activeCollection),
},
t.i({ className: "ri-add-line txt-hint" }),
t.i({ className: "ri-add-line txt-hint", ariaHidden: true }),
),
),
t.div(
@@ -323,7 +323,10 @@ function recordFilePickerModal(settings = defaultSettings) {
const ftype = app.utils.getFileType(name);
return t.i({ className: app.utils.fileTypeIcons[ftype] || "ri-file-line" });
return t.i({
className: app.utils.fileTypeIcons[ftype] || "ri-file-line",
ariaHidden: true,
});
},
),
);

2
ui/src/records/recordFileThumb.js
View File

@@ -143,7 +143,7 @@ window.app.components.recordFileThumb = function(propsArg = {}) {
return img;
}
return t.i({ className: app.utils.fileTypeIcons[data.fileType] || "ri-file-line" });
return t.i({ className: app.utils.fileTypeIcons[data.fileType] || "ri-file-line", ariaHidden: true });
},
);
};

9
ui/src/records/recordPreviewModal.js
View File

@@ -144,10 +144,11 @@ function recordPreviewModal(rawRecord, modalSettings) {
),
t.button(
{
"className": "btn sm circle transparent m-l-auto",
title: "More options",
className: "btn sm circle transparent m-l-auto",
"html-popovertarget": uniqueId + "preview-dropdown",
},
t.i({ className: "ri-more-line" }),
t.i({ className: "ri-more-line", ariaHidden: true }),
),
t.div({ id: uniqueId + "preview-dropdown", className: "dropdown", popover: "auto" }, (el) => {
return t.button(
@@ -158,7 +159,7 @@ function recordPreviewModal(rawRecord, modalSettings) {
el.hidePopover();
},
},
t.i({ className: "ri-braces-line" }),
t.i({ className: "ri-braces-line", ariaHidden: true }),
t.span({ className: "txt" }, "Copy JSON"),
);
}),
@@ -236,7 +237,7 @@ function recordPreviewModal(rawRecord, modalSettings) {
className: "btn",
onclick: () => downloadJSON(data.record),
},
t.i({ className: "ri-download-line" }),
t.i({ className: "ri-download-line", ariaHidden: true }),
t.span({ className: "txt" }, "Download JSON"),
),
),

2
ui/src/records/recordSummary.js
View File

@@ -175,7 +175,7 @@ const showRecordSummaryDropdownNoDelay = function(target, record) {
},
},
t.span({ className: "txt" }, "Edit relation record"),
t.i({ className: "ri-external-link-line" }),
t.i({ className: "ri-external-link-line", ariaHidden: true }),
),
t.button(
{

38
ui/src/records/recordUpsertModal.js
View File

@@ -418,12 +418,12 @@ function recordUpsertModal(collection, rawRecord, modalSettings) {
{
type: "button",
className: "btn sm secondary transparent circle m-l-auto",
ariaDescription: app.attrs.tooltip("Discard draft", "left"),
ariaLabel: app.attrs.tooltip("Discard draft", "left"),
onclick: () => {
deleteDraft();
},
},
t.i({ className: "ri-close-line" }),
t.i({ className: "ri-close-line", ariaHidden: true }),
),
),
);
@@ -539,7 +539,7 @@ function recordUpsertModal(collection, rawRecord, modalSettings) {
disabled: () => data.isFormDisabled,
onclick: () => data.isLocked = false,
},
t.i({ className: "ri-lock-unlock-line" }),
t.i({ className: "ri-lock-unlock-line", ariaHidden: true }),
t.span({ className: "txt" }, "Unlock to save"),
),
t.div(
@@ -560,10 +560,11 @@ function recordUpsertModal(collection, rawRecord, modalSettings) {
{
type: "button",
className: () => `btn p-5`,
title: "Save options",
disabled: () => data.isLocked || data.isFormDisabled,
"html-popovertarget": uniqueId + "save_options",
},
t.i({ className: "ri-arrow-up-s-line" }),
t.i({ className: "ri-arrow-up-s-line", ariaHidden: true }),
),
t.div(
{ id: uniqueId + "save_options", className: "dropdown nowrap", popover: "auto" },
@@ -693,10 +694,11 @@ function recordUpsertModal(collection, rawRecord, modalSettings) {
{
type: "button",
className: "btn sm circle transparent",
title: "More options",
disabled: () => data.isLoading,
"html-popovertarget": uniqueId + "modal-header-dropdown",
},
t.i({ className: "ri-more-line" }),
t.i({ className: "ri-more-line", ariaHidden: true }),
),
t.div(
{
@@ -742,7 +744,7 @@ function recordUpsertModal(collection, rawRecord, modalSettings) {
copyJSON(data.originalRecord);
},
},
t.i({ className: "ri-braces-line" }),
t.i({ className: "ri-braces-line", ariaHidden: true }),
t.span({ className: "txt" }, "Copy JSON"),
),
() => {
@@ -770,7 +772,7 @@ function recordUpsertModal(collection, rawRecord, modalSettings) {
}
},
},
t.i({ className: "ri-file-copy-line" }),
t.i({ className: "ri-file-copy-line", ariaHidden: true }),
t.span({ className: "txt" }, "Duplicate"),
),
t.hr(),
@@ -902,7 +904,7 @@ function resetTokenKeyDropdownItem(collection, data, modalSettings) {
);
},
},
t.i({ className: "ri-reset-left-line" }),
t.i({ className: "ri-reset-left-line", ariaHidden: true }),
t.span({ className: "txt" }, "Reset issued tokens"),
);
}
@@ -947,7 +949,7 @@ function sendPasswordResetEmailDropdownItem(collection, data, modalSettings) {
);
},
},
t.i({ className: "ri-mail-lock-line" }),
t.i({ className: "ri-mail-lock-line", ariaHidden: true }),
t.span({ className: "txt" }, "Send password reset email"),
);
}
@@ -992,7 +994,7 @@ function sendVerificationDropdownItem(collection, data, modalSettings) {
);
},
},
t.i({ className: "ri-mail-check-line" }),
t.i({ className: "ri-mail-check-line", ariaHidden: true }),
t.span({ className: "txt" }, "Send verification email"),
);
}
@@ -1007,7 +1009,7 @@ function impersonateDropdownItem(collection, data, modalSettings) {
app.modals.openRecordImpersontate(data.originalRecord);
},
},
t.i({ className: "ri-id-card-line" }),
t.i({ className: "ri-id-card-line", ariaHidden: true }),
t.span({ className: "txt" }, "Impersonate"),
);
}
@@ -1055,7 +1057,7 @@ function deleteDropdownItem(collection, data, modalSettings) {
);
},
},
t.i({ className: "ri-delete-bin-7-line" }),
t.i({ className: "ri-delete-bin-7-line", ariaHidden: true }),
t.span({ className: "txt" }, "Delete"),
);
}
@@ -1080,7 +1082,7 @@ function authFieldEmail(collection, data) {
{ className: "field" },
t.label(
{ htmlFor: uniqueId },
t.i({ className: app.fieldTypes.email.icon }),
t.i({ className: app.fieldTypes.email.icon, ariaHidden: true }),
t.span({ className: "txt" }, () => emailField.name),
),
t.input({
@@ -1232,7 +1234,7 @@ function authFieldPassword(collection, data) {
{ className: "field" },
t.label(
{ htmlFor: uniqueId + "_password" },
t.i({ className: "ri-lock-line" }),
t.i({ className: "ri-lock-line", ariaHidden: true }),
t.span({ className: "txt" }, "Password"),
),
t.input({
@@ -1258,7 +1260,7 @@ function authFieldPassword(collection, data) {
{ className: "field" },
t.label(
{ htmlFor: uniqueId + "_password_confirm" },
t.i({ className: "ri-lock-line" }),
t.i({ className: "ri-lock-line", ariaHidden: true }),
t.span({ className: "txt" }, "Confirm"),
),
t.input({
@@ -1397,7 +1399,7 @@ function authProvidersTab(collection, data) {
});
}
return t.i({ className: app.utils.fallbackProviderIcon });
return t.i({ className: app.utils.fallbackProviderIcon, ariaHidden: true });
},
),
t.div(
@@ -1414,10 +1416,10 @@ function authProvidersTab(collection, data) {
{
type: "button",
className: "btn sm secondary transparent circle",
ariaDescription: app.attrs.tooltip("Unlink", "left"),
ariaLabel: app.attrs.tooltip("Unlink", "left"),
onclick: () => confirmAndUnlink(externalAuth),
},
t.i({ className: "ri-close-line" }),
t.i({ className: "ri-close-line", ariaHidden: true }),
),
),
);

13
ui/src/records/recordsList.js
View File

@@ -421,6 +421,7 @@ window.app.components.recordsList = function(propsArg = {}) {
t.div(
{ className: "inline-flex gap-5" },
t.i({
ariaHidden: true,
className: () => {
if (field.primaryKey) {
return "ri-key-line";
@@ -586,7 +587,10 @@ window.app.components.recordsList = function(propsArg = {}) {
return columns;
},
// columns,
t.td({ className: "col-meta" }, t.i({ className: "ri-arrow-right-line m-r-10" })),
t.td(
{ className: "col-meta" },
t.i({ className: "ri-arrow-right-line m-r-10", ariaHidden: true }),
),
);
});
},
@@ -644,7 +648,7 @@ window.app.components.recordsList = function(propsArg = {}) {
);
},
},
t.i({ className: "ri-delete-bin-7-line" }),
t.i({ className: "ri-delete-bin-7-line", ariaHidden: true }),
t.span({ className: "txt" }, "Delete"),
);
},
@@ -654,7 +658,7 @@ window.app.components.recordsList = function(propsArg = {}) {
className: "btn sm pill",
onclick: () => downloadSelected(),
},
t.i({ className: "ri-download-line" }),
t.i({ className: "ri-download-line", ariaHidden: true }),
t.span({ className: "txt" }, "JSON"),
),
),
@@ -726,10 +730,11 @@ function columnsDropdown(props, data) {
{
hidden: () => props.collection?.fields.length <= 1,
type: "button",
title: "Toggle columns",
className: "btn sm secondary transparent circle",
popoverTargetElement: dropdown,
},
t.i({ className: "ri-more-2-line" }),
t.i({ className: "ri-more-2-line", ariaHidden: true }),
dropdown,
);
}

9
ui/src/records/recordsPickerModal.js
View File

@@ -297,12 +297,12 @@ function recordsPickerModal(settings = defaultSettings) {
{
type: "button",
className: "btn circle transparent",
ariaDescription: app.attrs.tooltip("Add new record"),
ariaLabel: app.attrs.tooltip("Add new record"),
onclick: () => {
app.modals.openRecordUpsert(data.collection);
},
},
t.i({ className: "ri-add-line txt-hint" }),
t.i({ className: "ri-add-line txt-hint", ariaHidden: true }),
),
),
t.div(
@@ -329,6 +329,7 @@ function recordsPickerModal(settings = defaultSettings) {
t.span(
{ className: "state-icon" },
t.i({
ariaHidden: true,
className: () =>
isSelected(record)
? "ri-checkbox-circle-fill txt-success"
@@ -342,13 +343,13 @@ function recordsPickerModal(settings = defaultSettings) {
t.button(
{
className: "btn sm secondary transparent circle",
ariaDescription: app.attrs.tooltip("Edit"),
ariaLabel: app.attrs.tooltip("Edit"),
onclick: (e) => {
e.stopPropagation();
app.modals.openRecordUpsert(data.collection, record);
},
},
t.i({ className: "ri-pencil-line" }),
t.i({ className: "ri-pencil-line", ariaHidden: true }),
),
),
);