You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
372 lines
12 KiB
372 lines
12 KiB
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
var _excluded = ["accessibilityActiveDescendant", "accessibilityAtomic", "accessibilityAutoComplete", "accessibilityBusy", "accessibilityChecked", "accessibilityColumnCount", "accessibilityColumnIndex", "accessibilityColumnSpan", "accessibilityControls", "accessibilityCurrent", "accessibilityDescribedBy", "accessibilityDetails", "accessibilityDisabled", "accessibilityErrorMessage", "accessibilityExpanded", "accessibilityFlowTo", "accessibilityHasPopup", "accessibilityHidden", "accessibilityInvalid", "accessibilityKeyShortcuts", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityLevel", "accessibilityLiveRegion", "accessibilityModal", "accessibilityMultiline", "accessibilityMultiSelectable", "accessibilityOrientation", "accessibilityOwns", "accessibilityPlaceholder", "accessibilityPosInSet", "accessibilityPressed", "accessibilityReadOnly", "accessibilityRequired", "accessibilityRole", "accessibilityRoleDescription", "accessibilityRowCount", "accessibilityRowIndex", "accessibilityRowSpan", "accessibilitySelected", "accessibilitySetSize", "accessibilitySort", "accessibilityValueMax", "accessibilityValueMin", "accessibilityValueNow", "accessibilityValueText", "dataSet", "focusable", "nativeID", "pointerEvents", "style", "testID"];
|
|
|
|
/**
|
|
* Copyright (c) Nicolas Gallagher.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
*
|
|
*/
|
|
import AccessibilityUtil from '../AccessibilityUtil';
|
|
import StyleSheet from '../../exports/StyleSheet';
|
|
var emptyObject = {};
|
|
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
var isArray = Array.isArray;
|
|
var uppercasePattern = /[A-Z]/g;
|
|
|
|
function toHyphenLower(match) {
|
|
return '-' + match.toLowerCase();
|
|
}
|
|
|
|
function hyphenateString(str) {
|
|
return str.replace(uppercasePattern, toHyphenLower);
|
|
}
|
|
|
|
function processIDRefList(idRefList) {
|
|
return isArray(idRefList) ? idRefList.join(' ') : idRefList;
|
|
}
|
|
|
|
var pointerEventsStyles = StyleSheet.create({
|
|
auto: {
|
|
pointerEvents: 'auto'
|
|
},
|
|
'box-none': {
|
|
pointerEvents: 'box-none'
|
|
},
|
|
'box-only': {
|
|
pointerEvents: 'box-only'
|
|
},
|
|
none: {
|
|
pointerEvents: 'none'
|
|
}
|
|
});
|
|
|
|
var createDOMProps = (elementType, props, options) => {
|
|
if (!props) {
|
|
props = emptyObject;
|
|
}
|
|
|
|
var _props = props,
|
|
accessibilityActiveDescendant = _props.accessibilityActiveDescendant,
|
|
accessibilityAtomic = _props.accessibilityAtomic,
|
|
accessibilityAutoComplete = _props.accessibilityAutoComplete,
|
|
accessibilityBusy = _props.accessibilityBusy,
|
|
accessibilityChecked = _props.accessibilityChecked,
|
|
accessibilityColumnCount = _props.accessibilityColumnCount,
|
|
accessibilityColumnIndex = _props.accessibilityColumnIndex,
|
|
accessibilityColumnSpan = _props.accessibilityColumnSpan,
|
|
accessibilityControls = _props.accessibilityControls,
|
|
accessibilityCurrent = _props.accessibilityCurrent,
|
|
accessibilityDescribedBy = _props.accessibilityDescribedBy,
|
|
accessibilityDetails = _props.accessibilityDetails,
|
|
accessibilityDisabled = _props.accessibilityDisabled,
|
|
accessibilityErrorMessage = _props.accessibilityErrorMessage,
|
|
accessibilityExpanded = _props.accessibilityExpanded,
|
|
accessibilityFlowTo = _props.accessibilityFlowTo,
|
|
accessibilityHasPopup = _props.accessibilityHasPopup,
|
|
accessibilityHidden = _props.accessibilityHidden,
|
|
accessibilityInvalid = _props.accessibilityInvalid,
|
|
accessibilityKeyShortcuts = _props.accessibilityKeyShortcuts,
|
|
accessibilityLabel = _props.accessibilityLabel,
|
|
accessibilityLabelledBy = _props.accessibilityLabelledBy,
|
|
accessibilityLevel = _props.accessibilityLevel,
|
|
accessibilityLiveRegion = _props.accessibilityLiveRegion,
|
|
accessibilityModal = _props.accessibilityModal,
|
|
accessibilityMultiline = _props.accessibilityMultiline,
|
|
accessibilityMultiSelectable = _props.accessibilityMultiSelectable,
|
|
accessibilityOrientation = _props.accessibilityOrientation,
|
|
accessibilityOwns = _props.accessibilityOwns,
|
|
accessibilityPlaceholder = _props.accessibilityPlaceholder,
|
|
accessibilityPosInSet = _props.accessibilityPosInSet,
|
|
accessibilityPressed = _props.accessibilityPressed,
|
|
accessibilityReadOnly = _props.accessibilityReadOnly,
|
|
accessibilityRequired = _props.accessibilityRequired,
|
|
accessibilityRole = _props.accessibilityRole,
|
|
accessibilityRoleDescription = _props.accessibilityRoleDescription,
|
|
accessibilityRowCount = _props.accessibilityRowCount,
|
|
accessibilityRowIndex = _props.accessibilityRowIndex,
|
|
accessibilityRowSpan = _props.accessibilityRowSpan,
|
|
accessibilitySelected = _props.accessibilitySelected,
|
|
accessibilitySetSize = _props.accessibilitySetSize,
|
|
accessibilitySort = _props.accessibilitySort,
|
|
accessibilityValueMax = _props.accessibilityValueMax,
|
|
accessibilityValueMin = _props.accessibilityValueMin,
|
|
accessibilityValueNow = _props.accessibilityValueNow,
|
|
accessibilityValueText = _props.accessibilityValueText,
|
|
dataSet = _props.dataSet,
|
|
focusable = _props.focusable,
|
|
nativeID = _props.nativeID,
|
|
pointerEvents = _props.pointerEvents,
|
|
style = _props.style,
|
|
testID = _props.testID,
|
|
domProps = _objectWithoutPropertiesLoose(_props, _excluded);
|
|
|
|
var disabled = accessibilityDisabled;
|
|
var role = AccessibilityUtil.propsToAriaRole(props); // ACCESSIBILITY
|
|
|
|
if (accessibilityActiveDescendant != null) {
|
|
domProps['aria-activedescendant'] = accessibilityActiveDescendant;
|
|
}
|
|
|
|
if (accessibilityAtomic != null) {
|
|
domProps['aria-atomic'] = accessibilityAtomic;
|
|
}
|
|
|
|
if (accessibilityAutoComplete != null) {
|
|
domProps['aria-autocomplete'] = accessibilityAutoComplete;
|
|
}
|
|
|
|
if (accessibilityBusy != null) {
|
|
domProps['aria-busy'] = accessibilityBusy;
|
|
}
|
|
|
|
if (accessibilityChecked != null) {
|
|
domProps['aria-checked'] = accessibilityChecked;
|
|
}
|
|
|
|
if (accessibilityColumnCount != null) {
|
|
domProps['aria-colcount'] = accessibilityColumnCount;
|
|
}
|
|
|
|
if (accessibilityColumnIndex != null) {
|
|
domProps['aria-colindex'] = accessibilityColumnIndex;
|
|
}
|
|
|
|
if (accessibilityColumnSpan != null) {
|
|
domProps['aria-colspan'] = accessibilityColumnSpan;
|
|
}
|
|
|
|
if (accessibilityControls != null) {
|
|
domProps['aria-controls'] = processIDRefList(accessibilityControls);
|
|
}
|
|
|
|
if (accessibilityCurrent != null) {
|
|
domProps['aria-current'] = accessibilityCurrent;
|
|
}
|
|
|
|
if (accessibilityDescribedBy != null) {
|
|
domProps['aria-describedby'] = processIDRefList(accessibilityDescribedBy);
|
|
}
|
|
|
|
if (accessibilityDetails != null) {
|
|
domProps['aria-details'] = accessibilityDetails;
|
|
}
|
|
|
|
if (disabled === true) {
|
|
domProps['aria-disabled'] = true; // Enhance with native semantics
|
|
|
|
if (elementType === 'button' || elementType === 'form' || elementType === 'input' || elementType === 'select' || elementType === 'textarea') {
|
|
domProps.disabled = true;
|
|
}
|
|
}
|
|
|
|
if (accessibilityErrorMessage != null) {
|
|
domProps['aria-errormessage'] = accessibilityErrorMessage;
|
|
}
|
|
|
|
if (accessibilityExpanded != null) {
|
|
domProps['aria-expanded'] = accessibilityExpanded;
|
|
}
|
|
|
|
if (accessibilityFlowTo != null) {
|
|
domProps['aria-flowto'] = processIDRefList(accessibilityFlowTo);
|
|
}
|
|
|
|
if (accessibilityHasPopup != null) {
|
|
domProps['aria-haspopup'] = accessibilityHasPopup;
|
|
}
|
|
|
|
if (accessibilityHidden === true) {
|
|
domProps['aria-hidden'] = accessibilityHidden;
|
|
}
|
|
|
|
if (accessibilityInvalid != null) {
|
|
domProps['aria-invalid'] = accessibilityInvalid;
|
|
}
|
|
|
|
if (accessibilityKeyShortcuts != null && Array.isArray(accessibilityKeyShortcuts)) {
|
|
domProps['aria-keyshortcuts'] = accessibilityKeyShortcuts.join(' ');
|
|
}
|
|
|
|
if (accessibilityLabel != null) {
|
|
domProps['aria-label'] = accessibilityLabel;
|
|
}
|
|
|
|
if (accessibilityLabelledBy != null) {
|
|
domProps['aria-labelledby'] = processIDRefList(accessibilityLabelledBy);
|
|
}
|
|
|
|
if (accessibilityLevel != null) {
|
|
domProps['aria-level'] = accessibilityLevel;
|
|
}
|
|
|
|
if (accessibilityLiveRegion != null) {
|
|
domProps['aria-live'] = accessibilityLiveRegion === 'none' ? 'off' : accessibilityLiveRegion;
|
|
}
|
|
|
|
if (accessibilityModal != null) {
|
|
domProps['aria-modal'] = accessibilityModal;
|
|
}
|
|
|
|
if (accessibilityMultiline != null) {
|
|
domProps['aria-multiline'] = accessibilityMultiline;
|
|
}
|
|
|
|
if (accessibilityMultiSelectable != null) {
|
|
domProps['aria-multiselectable'] = accessibilityMultiSelectable;
|
|
}
|
|
|
|
if (accessibilityOrientation != null) {
|
|
domProps['aria-orientation'] = accessibilityOrientation;
|
|
}
|
|
|
|
if (accessibilityOwns != null) {
|
|
domProps['aria-owns'] = processIDRefList(accessibilityOwns);
|
|
}
|
|
|
|
if (accessibilityPlaceholder != null) {
|
|
domProps['aria-placeholder'] = accessibilityPlaceholder;
|
|
}
|
|
|
|
if (accessibilityPosInSet != null) {
|
|
domProps['aria-posinset'] = accessibilityPosInSet;
|
|
}
|
|
|
|
if (accessibilityPressed != null) {
|
|
domProps['aria-pressed'] = accessibilityPressed;
|
|
}
|
|
|
|
if (accessibilityReadOnly != null) {
|
|
domProps['aria-readonly'] = accessibilityReadOnly; // Enhance with native semantics
|
|
|
|
if (elementType === 'input' || elementType === 'select' || elementType === 'textarea') {
|
|
domProps.readOnly = true;
|
|
}
|
|
}
|
|
|
|
if (accessibilityRequired != null) {
|
|
domProps['aria-required'] = accessibilityRequired; // Enhance with native semantics
|
|
|
|
if (elementType === 'input' || elementType === 'select' || elementType === 'textarea') {
|
|
domProps.required = accessibilityRequired;
|
|
}
|
|
}
|
|
|
|
if (role != null) {
|
|
// 'presentation' synonym has wider browser support
|
|
domProps['role'] = role === 'none' ? 'presentation' : role;
|
|
}
|
|
|
|
if (accessibilityRoleDescription != null) {
|
|
domProps['aria-roledescription'] = accessibilityRoleDescription;
|
|
}
|
|
|
|
if (accessibilityRowCount != null) {
|
|
domProps['aria-rowcount'] = accessibilityRowCount;
|
|
}
|
|
|
|
if (accessibilityRowIndex != null) {
|
|
domProps['aria-rowindex'] = accessibilityRowIndex;
|
|
}
|
|
|
|
if (accessibilityRowSpan != null) {
|
|
domProps['aria-rowspan'] = accessibilityRowSpan;
|
|
}
|
|
|
|
if (accessibilitySelected != null) {
|
|
domProps['aria-selected'] = accessibilitySelected;
|
|
}
|
|
|
|
if (accessibilitySetSize != null) {
|
|
domProps['aria-setsize'] = accessibilitySetSize;
|
|
}
|
|
|
|
if (accessibilitySort != null) {
|
|
domProps['aria-sort'] = accessibilitySort;
|
|
}
|
|
|
|
if (accessibilityValueMax != null) {
|
|
domProps['aria-valuemax'] = accessibilityValueMax;
|
|
}
|
|
|
|
if (accessibilityValueMin != null) {
|
|
domProps['aria-valuemin'] = accessibilityValueMin;
|
|
}
|
|
|
|
if (accessibilityValueNow != null) {
|
|
domProps['aria-valuenow'] = accessibilityValueNow;
|
|
}
|
|
|
|
if (accessibilityValueText != null) {
|
|
domProps['aria-valuetext'] = accessibilityValueText;
|
|
} // "dataSet" replaced with "data-*"
|
|
|
|
|
|
if (dataSet != null) {
|
|
for (var dataProp in dataSet) {
|
|
if (hasOwnProperty.call(dataSet, dataProp)) {
|
|
var dataName = hyphenateString(dataProp);
|
|
var dataValue = dataSet[dataProp];
|
|
|
|
if (dataValue != null) {
|
|
domProps["data-" + dataName] = dataValue;
|
|
}
|
|
}
|
|
}
|
|
} // FOCUS
|
|
// "focusable" indicates that an element may be a keyboard tab-stop.
|
|
|
|
|
|
if (focusable === false) {
|
|
domProps.tabIndex = '-1';
|
|
}
|
|
|
|
if ( // These native elements are keyboard focusable by default
|
|
elementType === 'a' || elementType === 'button' || elementType === 'input' || elementType === 'select' || elementType === 'textarea') {
|
|
if (focusable === false || accessibilityDisabled === true) {
|
|
domProps.tabIndex = '-1';
|
|
}
|
|
} else if ( // These roles are made keyboard focusable by default
|
|
role === 'button' || role === 'checkbox' || role === 'link' || role === 'radio' || role === 'textbox' || role === 'switch') {
|
|
if (focusable !== false) {
|
|
domProps.tabIndex = '0';
|
|
}
|
|
} else {
|
|
// Everything else must explicitly set the prop
|
|
if (focusable === true) {
|
|
domProps.tabIndex = '0';
|
|
}
|
|
} // Resolve styles
|
|
|
|
|
|
var _StyleSheet = StyleSheet([style, pointerEvents && pointerEventsStyles[pointerEvents]], {
|
|
writingDirection: options ? options.writingDirection : 'ltr'
|
|
}),
|
|
className = _StyleSheet[0],
|
|
inlineStyle = _StyleSheet[1];
|
|
|
|
if (className) {
|
|
domProps.className = className;
|
|
}
|
|
|
|
if (inlineStyle) {
|
|
domProps.style = inlineStyle;
|
|
} // OTHER
|
|
// Native element ID
|
|
|
|
|
|
if (nativeID != null) {
|
|
domProps.id = nativeID;
|
|
} // Automated test IDs
|
|
|
|
|
|
if (testID != null) {
|
|
domProps['data-testid'] = testID;
|
|
}
|
|
|
|
return domProps;
|
|
};
|
|
|
|
export default createDOMProps; |