@whitemordred/react-native-bootstrap5
Version:
A complete React Native library that replicates Bootstrap 5.3 with 100% feature parity, full theming support, CSS variables, and dark/light mode
94 lines (93 loc) • 3.18 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.isScreenReaderEnabled = exports.announceForAccessibility = exports.getAccessibilityHint = exports.createAccessibilityState = exports.getAccessibilityLabel = exports.getAccessibilityRole = void 0;
/**
* Accessibility utilities for React Native Bootstrap 5
* These helpers ensure components are accessible to all users
*/
// Map Bootstrap component types to accessibility roles
const getAccessibilityRole = (componentType) => {
const roleMap = {
button: 'button',
link: 'link',
alert: 'alert',
tab: 'tab',
progressbar: 'progressbar',
checkbox: 'checkbox',
radio: 'radio',
switch: 'switch',
search: 'search',
menu: 'menu',
menuitem: 'menuitem',
header: 'header',
image: 'image',
text: 'text',
none: 'none',
};
return roleMap[componentType] || 'none';
};
exports.getAccessibilityRole = getAccessibilityRole;
// Generate accessibility label from children
const getAccessibilityLabel = (children, fallback = '') => {
if (typeof children === 'string') {
return children;
}
if (typeof children === 'number') {
return children.toString();
}
if (Array.isArray(children)) {
return children
.map(child => (0, exports.getAccessibilityLabel)(child))
.filter(Boolean)
.join(' ');
}
return fallback;
};
exports.getAccessibilityLabel = getAccessibilityLabel;
// Create accessibility state for interactive components
const createAccessibilityState = (props) => {
const state = {};
if (props.disabled !== undefined)
state.disabled = props.disabled;
if (props.selected !== undefined)
state.selected = props.selected;
if (props.checked !== undefined)
state.checked = props.checked;
if (props.busy !== undefined)
state.busy = props.busy;
if (props.expanded !== undefined)
state.expanded = props.expanded;
return state;
};
exports.createAccessibilityState = createAccessibilityState;
// Get hint based on component state
const getAccessibilityHint = (props) => {
if (props.disabled) {
return 'This element is disabled';
}
if (props.loading) {
return 'Loading, please wait';
}
if (props.onPress) {
return 'Double tap to activate';
}
return undefined;
};
exports.getAccessibilityHint = getAccessibilityHint;
// Announce message to screen readers
const announceForAccessibility = (message) => {
if (__DEV__) {
console.log(`[A11y Announcement]: ${message}`);
}
// On iOS/Android, you would use:
// import { AccessibilityInfo } from 'react-native';
// AccessibilityInfo.announceForAccessibility(message);
};
exports.announceForAccessibility = announceForAccessibility;
// Check if screen reader is enabled
const isScreenReaderEnabled = async () => {
// import { AccessibilityInfo } from 'react-native';
// return AccessibilityInfo.isScreenReaderEnabled();
return false; // Placeholder
};
exports.isScreenReaderEnabled = isScreenReaderEnabled;