@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
89 lines (87 loc) • 4.51 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { Log } from "./dev.utils";
const a11yCache = new Set();
export const a11yHint = (msg, options) => {
if (a11yCache.has(msg) === false || !!(options === null || options === void 0 ? void 0 : options.force)) {
a11yCache.add(msg);
Log.debug([msg].concat((options === null || options === void 0 ? void 0 : options.details) || []), {
classifier: `✋ a11y`,
forceLog: !!(options === null || options === void 0 ? void 0 : options.force),
overwriteStyle: '; background-color: #09f',
});
}
};
const deprecatedCache = new Set();
export const deprecatedHint = (msg, options) => {
if (deprecatedCache.has(msg) === false || !!(options === null || options === void 0 ? void 0 : options.force)) {
deprecatedCache.add(msg);
Log.warn([msg].concat((options === null || options === void 0 ? void 0 : options.details) || []), {
classifier: `🔥 deprecated`,
forceLog: !!(options === null || options === void 0 ? void 0 : options.force),
overwriteStyle: '; background-color: #f00',
});
}
};
const devCache = new Set();
export const devHint = (msg, options) => {
if (devCache.has(msg) === false || !!(options === null || options === void 0 ? void 0 : options.force)) {
devCache.add(msg);
Log.debug([msg].concat((options === null || options === void 0 ? void 0 : options.details) || []), {
classifier: `💻 dev`,
forceLog: !!(options === null || options === void 0 ? void 0 : options.force),
overwriteStyle: '; background-color: #f09',
});
}
};
export const devWarning = (msg, options) => {
if (devCache.has(msg) === false || !!(options === null || options === void 0 ? void 0 : options.force)) {
devCache.add(msg);
Log.warn([msg].concat((options === null || options === void 0 ? void 0 : options.details) || []), {
classifier: `⚠️ dev`,
forceLog: !!(options === null || options === void 0 ? void 0 : options.force),
overwriteStyle: '; background-color: #f09',
});
}
};
const featureCache = new Set();
export const featureHint = (msg, done = false, options) => {
if (featureCache.has(msg) === false || !!(options === null || options === void 0 ? void 0 : options.force)) {
featureCache.add(msg);
msg += done === true ? ' ✅' : '';
Log.debug([msg].concat((options === null || options === void 0 ? void 0 : options.details) || []), {
classifier: `🌟 feature`,
forceLog: !!(options === null || options === void 0 ? void 0 : options.force),
overwriteStyle: '; background-color: #309',
});
}
};
devHint(`We appreciate any feedback, comments, screenshots, or demo links of an application based on KoliBri (kolibri@itzbund.de). Thank you!`);
const uiUxCache = new Set();
export const uiUxHint = (msg, options) => {
if (uiUxCache.has(msg) === false || !!(options === null || options === void 0 ? void 0 : options.force)) {
uiUxCache.add(msg);
Log.debug([msg].concat((options === null || options === void 0 ? void 0 : options.details) || []), {
classifier: `📑 ui/ux`,
forceLog: !!(options === null || options === void 0 ? void 0 : options.force),
overwriteStyle: '; background-color: #060;',
});
}
};
export const a11yHintDisabled = () => {
a11yHint(`"Disabled" limits accessibility and visibility. From an accessibility perspective, we recommend using the readonly attribute instead of disabled.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae`);
};
export const a11yHintLabelingLandmarks = (value) => {
if (typeof value !== 'string' || value === '') {
a11yHint(`Some structural elements, such as the nav tag, can be used multiple times on a webpage. To distinguish between similarly named structural elements, it is necessary to set an ARIA label.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns`);
}
};
export const uiUxHintMillerscheZahl = (className, length = 8) => {
if (length > 7) {
uiUxHint(`[${className}] Within navigation structures, it is recommended to use no more than 7 menu items.
Link:
- https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two`);
}
};
//# sourceMappingURL=a11y.tipps.js.map