@microsoft/windows-admin-center-sdk
Version:
Microsoft - Windows Admin Center Shell
931 lines (929 loc) • 37.4 kB
JavaScript
/**
* DOM class
* @dynamic
*/
export class Dom {
static getElementProperties(element, properties) {
if (MsftSme.isNullOrUndefined(properties)) {
properties = {
isForm: Dom.isForm(element),
withinForm: false,
isTrap: Dom.isTrap(element),
withinTrap: false,
isZone: Dom.isZone(element),
withinZone: false,
withinZoneWithinForm: false,
currentZone: null,
currentTrap: null,
currentForm: null
};
}
if (element === null) {
return properties;
}
if (!properties.withinForm && Dom.isForm(element)) {
properties.withinForm = true;
properties.currentForm = element;
if (properties.withinZone) {
properties.withinZoneWithinForm = true;
}
}
if (!properties.withinTrap && Dom.isTrap(element)) {
properties.withinTrap = true;
properties.currentTrap = element;
}
if (!properties.withinZone && !properties.isZone && Dom.isZone(element)) {
properties.withinZone = true;
properties.currentZone = element;
}
const parentElement = element.tagName === 'HTML' ?
Dom.getParentIframe(element)
:
element.parentElement;
return Dom.getElementProperties(parentElement, properties);
}
static allowCustomArrowKeyFunctionality(properties) {
return !properties.withinForm || properties.withinZoneWithinForm;
}
static allowCustomHomeEndKeyFunctionality(element, properties) {
return !Dom.isSearchBox(element) && !Dom.isTextBoxInComboBox(element)
&& (!properties.withinForm || properties.withinZoneWithinForm);
}
/**
* gets all body elements on the page
*/
static getAllBodys() {
const root = Dom.getRootElement();
return Dom.getAllElements(root, Dom.isBody);
}
/**
* Gets a CSS property value
* @param element The Element
* @param property - The CSS property name
* @returns The value of the CSS property (type depends on property retrieved)
*/
static getStyle(element, property) {
if (!element) {
return null;
}
// first try to get the value directly from the element
const value = element.style[property];
if (!MsftSme.isNullOrWhiteSpace(value)) {
return value;
}
// otherwise get the computed style
return getComputedStyle(element)[property];
}
/**
* Gets the classes applied to an element
* @param element The Element
* @returns The classes currently applied to the element
*/
static getClasses(element) {
if (element) {
const classes = element.className.trim();
if (!MsftSme.isNullOrWhiteSpace(classes)) {
return classes.split(' ');
}
}
return [];
}
/**
* Determines is an element is disabled via the 'disabled' attribute
* @param element The element to start from.
*/
static isDisabled(element) {
if (!element) {
return false;
}
return !!element['disabled'];
}
/**
* Determines is an element is hidden via css with "display: none"
* @param element The element to start from.
*/
static isNotDisplayed(element) {
if (!element) {
return false;
}
return Dom.getStyle(element, 'display') === 'none';
}
/**
* Determines is an element is hidden via css with "visibility: hidden"
* @param element The element to start from.
*/
static isHidden(element) {
if (!element) {
return false;
}
return Dom.getStyle(element, 'visibility') === 'hidden' || element['hidden'];
}
/**
* Returns the first element in the current elements ancestory that is focusable.
*
* 'Focusable' is defined as the following:
* - input, select, textarea, button, object
* - anchor with href
* - have a non-negative tab index
*
* An element is not focusable if any of the following is true (even if it meets a condition above)
* - negative tab index
* - disabled
* - display: none
* - visibility: hidden
*
* @param element The element to start from.
* @return true if focus possible
*/
static isFocusable(element, includeNegativeTabIndex = false) {
return Dom.checkFocusableConditions(element, includeNegativeTabIndex);
}
/**
* Returns true if the element could be focusable.
*
* An element that can be focused is the following:
* - input, select, textarea, button, object
* - anchor with href
* - have a non-negative tab index
*
* This method will determine if the element has one of these conditions even if the the element
* is not displayed, visible, enabled, or having a positive z-index.
*
* @param element The element to start from.
* @return true if focus possible.
*/
static isFocusPossible(element, includeNegativeTabIndex = false) {
return Dom.checkFocusableConditions(element, includeNegativeTabIndex, true);
}
static checkFocusableConditions(element, includeNegativeTabIndex, skipDisabledHiddenOrNotDisplayed = false) {
if (!element) {
return false;
}
// if the element or its ancestor is disabled or 'not displayed'/hidden, it is not focusable
if (!skipDisabledHiddenOrNotDisplayed && Dom.getDisabledHiddenOrNotDisplayedAncestor(element)) {
return false;
}
// if the tab index is set, let it determine focusability
// have to check has attribute because
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4365703/
if (element.hasAttribute('tabindex') && !MsftSme.isNullOrUndefined(element.tabIndex)) {
return element.tabIndex >= 0 || (includeNegativeTabIndex && !element.classList.contains('sme-hidden-focus'));
}
// https://react.fluentui.dev/?path=/docs/preview-components-infobutton--default
// The info bubble is focusable
if (element.className.includes('sme-info-bubble')) {
return true;
}
// anchors with an href are also focusable
if (element.tagName === 'A' && element.hasAttribute('href')) {
return true;
}
// Otherwise only naturally focusable elements can receive focus
const focusableTags = ['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON', 'OBJECT'];
return focusableTags.some(tag => tag === element.tagName);
}
/**
* Returns the first element in the current elements ancestry that is focusable.
* Will return the element itself if it is focusable
* @param element The element to start from.
* @return the first focusable ancestor of the element
*/
static getFocusableAncestor(element) {
if (!element) {
return null;
}
return Dom.isFocusable(element) ? element : Dom.getFocusableAncestor(element.parentElement);
}
/**
* find an element in a particular position with a specific condition relative to input element
* Does a DFS for this element relative the ancestor zone of input element
* @param element The current element
* @param condition The function to check the kind of element we are looking for
* @param position The ElementPosition of the desired element relative to input element
*/
static findElementFromAncestorZoneDFS(element, condition, position) {
const ancestor = Dom.getAncestorZone(element);
const allElements = Dom.getAllElements(ancestor, condition);
return Dom.getElement(allElements, element, position);
}
/**
* find an element in a particular position with a specific condition relative to input element
* Does a DFS for this element relative the ancestor trap of input element
* @param element The current element
* @param condition The function to check the kind of element we are looking for
* @param position The ElementPosition of the desired element relative to input element
*/
static findElementFromAncestorTrapDFS(element, condition, position) {
const ancestor = Dom.getAncestorTrap(element);
const allElements = Dom.getAllElements(ancestor, condition);
return Dom.getElement(allElements, element, position);
}
/**
* find an element in a particular position with a specific condition relative to input element
* Does a DFS for this element relative the root of the graph
* @param element The current element
* @param condition The function to check the kind of element we are looking for
* @param position The ElementPosition of the desired element relative to input element
*/
static findElementFromRootDFS(element, condition, position) {
const root = Dom.getRootElement();
const allElements = Dom.getAllElements(root, condition);
return Dom.getElement(allElements, element, position);
}
/**
* find an element in a particular position with a specific condition relative to input element
* Does a DFS for this element relative the input element
* @param element The current element
* @param condition The function to check the kind of element we are looking for
* @param position The ElementPosition of the desired element relative to input element
*/
static findChildElementDFS(element, condition, position) {
const allElements = Dom.getAllElements(element, condition);
return Dom.getElement(allElements, element, position);
}
/**
* gets a element from a list of elements in the position relative to the current element
* @param elements the list of elements
* @param currentElement the current element
* @param position the ElementPosition we want relative to the current element
*/
static getElement(elements, currentElement, position) {
if (elements && elements.length > 0) {
let currentIndex = 0;
switch (position) {
case ElementPosition.Next:
currentIndex = elements.findIndex(x => x.isSameNode(currentElement));
return currentIndex + 1 < elements.length ? elements[currentIndex + 1] : currentElement;
case ElementPosition.Previous:
currentIndex = elements.findIndex(x => x.isSameNode(currentElement));
return currentIndex - 1 >= 0 ? elements[currentIndex - 1] : currentElement;
case ElementPosition.First:
return elements.first();
case ElementPosition.Last:
return elements.last();
default:
return currentElement;
}
}
return null;
}
static getAllElements(element, condition) {
return Dom.searchAllElements(element, condition);
}
/**
* gets the first element that meets a condition
* @param rootElement the element we start with
* @param condition the condition we want to find an element meeting
* @param stopLookingCondition a condition used to stop looking down a certain path
* (ie stop looking down a particular path once we hit a zone)
* @param includeRootElement a condition to include the root element in the search
*/
static getFirstElement(rootElement, condition, stopLookingCondition, includeRootElement = true) {
const firstElements = Dom.searchAllElements(rootElement, condition, stopLookingCondition, true, includeRootElement);
// return first element
return MsftSme.first(firstElements);
}
/**
* finds all elements starting at the input element that meet the given condition
* @param rootElement the element from which to start the depth first search
* @param condition the function that determines whether the desired condition has been met
* @param stopLookingCondition a condition used to stop looking down a certain path
* @param includeRootElement a condition to include the root element in the search
*/
static searchAllElements(rootElement, condition, stopLookingCondition, stopAtFirstResult = false, includeRootElement = true) {
if (!rootElement) {
return null;
}
// depth first search starting at the root element
const allElements = [];
const conditionalElements = [];
allElements.push(rootElement);
while (allElements.length > 0) {
const currentElement = allElements.pop();
if (currentElement.tagName !== 'SVG' && currentElement.tagName !== 'svg') {
if (condition(currentElement)) {
// If root element meets the condition, add to conditionalElements
if ((currentElement === rootElement && includeRootElement) || currentElement !== rootElement) {
conditionalElements.push(currentElement);
if (stopAtFirstResult) {
return conditionalElements;
}
}
}
if (currentElement === rootElement || !stopLookingCondition || !stopLookingCondition(currentElement)) {
for (let i = currentElement.childElementCount - 1; i >= 0; i--) {
const child = currentElement.children.item(i);
allElements.push(child);
}
}
// if the current element is an iframe, start traversing the iframe's body
try {
if (currentElement.contentDocument && currentElement.contentDocument.body) {
allElements.push(currentElement.contentDocument.body);
}
}
catch (error) {
// if we can't grab the content document, then we are very likely sideloading a tool in chrome
// you can disable same origin security policy to test accessibility or try in edge
// if this happens, we want to just get as much information as we can about the available elements
// TODO: log this when this code is moved to different file
}
}
}
// we need to reverse to get the actual order of elements on the page
return conditionalElements;
}
/**
* returns the root of the DOM graph
*/
static getRootElement() {
// we want to try to grab the document body from the window because document.body gives us the body of the current iframe only
try {
if (window.parent && window.parent.document && window.parent.document.body) {
return window.parent.document.body;
}
}
catch (error) {
// if we can't grab the document from the window, then we are very likely sideloading a tool in chrome
// you can disable same origin security policy to test accessibility or try in edge
// if this happens, we want to just get as much information as we can about the available elements
// TODO: log this when this code is moved to different file
}
return document.body;
}
/**
* Finds the next zone
* @param element the current zone or an element in the current zone
*/
static getNextZone(element) {
return Dom.findElementFromRootDFS(Dom.getAncestorZone(element) || element, Dom.isZone, ElementPosition.Next);
}
/**
* gets the first focusable element in the next zone
* if a zone has no focusable elements, it is skipped
* @param element the current element
*/
static getNextZoneElement(element) {
if (!element) {
return null;
}
// we are at the end of the page
const nextZone = Dom.getNextZone(element);
if (element.isSameNode(nextZone)) {
return null;
}
const firstFocusableElement = Dom.getFirstFocusableDescendent(nextZone);
return firstFocusableElement ? firstFocusableElement : Dom.getNextZoneElement(nextZone);
}
/**
* Finds the previous zone
* @param element the current zone or an element in the current zone
*/
static getPreviousZone(element) {
return Dom.findElementFromRootDFS(Dom.getAncestorZone(element), Dom.isZone, ElementPosition.Previous);
}
/**
* gets the first focusable element in the previous zone
* if a zone has no focusable elements, it is skipped
* @param element the current element
* @param originalElement the element from which we begin the search. Set automatically if unset by user
*/
static getPreviousZoneElement(element, originalElement) {
if (!element) {
return null;
}
// save the first element we see so we can skip empty zones later on
if (!originalElement) {
return Dom.getPreviousZoneElement(element, element);
}
// we are at the beginning of the page
const previousZone = Dom.getPreviousZone(element);
if (element.isSameNode(previousZone)) {
return null;
}
const firstFocusableElement = Dom.getFirstFocusableDescendent(previousZone);
return firstFocusableElement && firstFocusableElement !== originalElement ?
firstFocusableElement : Dom.getPreviousZoneElement(previousZone, originalElement);
}
/**
* gets the first ancestor that is disabled
* @param element the element
*/
static getAncestor(element, condition) {
if (!element) {
return null;
}
if (condition(element)) {
return element;
}
if (element.tagName === 'HTML') {
const iFrameElement = Dom.getParentIframe(element);
return iFrameElement ? Dom.getAncestor(iFrameElement, condition) : null;
}
return Dom.getAncestor(element.parentElement, condition);
}
static getParentIframe(element) {
const elementFrameName = element && element.getAttribute('sme-frame-name');
if (!elementFrameName) {
return null;
}
// we want to try to grab the document body from the window because document.body gives us the body of the current iframe only
try {
const iFrames = MsftSme.isShell() ?
Array.from(document.getElementsByTagName('iframe'))
:
Array.from(window.parent.document.getElementsByTagName('iframe'));
let iFrameElement;
if (iFrames && elementFrameName) {
iFrameElement = iFrames.first(frame => frame.id === elementFrameName);
}
return iFrameElement || null;
}
catch (error) {
// if we can't grab the document from the window, then we are very likely side-loading a tool in chrome or chromium edge
// you can disable same origin security policy to test accessibility or try in edge
// if this happens, we want to just get as much information as we can about the available elements
return null;
}
}
/**
* gets all ancestors that match a given condition
* @param element the element
*/
static getAllAncestors(element, condition) {
if (!element) {
return [];
}
const ancestor = Dom.getAncestor(element, condition);
if (!ancestor) {
return [];
}
return [ancestor].concat(Dom.getAllAncestors(ancestor.parentElement, condition));
}
/**
* gets the zone that the current element is in
* @param element the element
*/
static getAncestorZone(element) {
return Dom.getAncestor(element, e => Dom.isZone(e));
}
/**
* determine if an element is in a trap, if so return the trap element
* @param element HTML element to check
*/
static getAncestorTrap(element) {
return Dom.getAncestor(element, e => Dom.isTrap(e));
}
/**
* gets the ancestor form of an element
* @param element the element
*/
static getAncestorForm(element) {
return Dom.getAncestor(element, e => Dom.isForm(e));
}
/**
* Find ancestors that are disabled, hidden, or not displayed
* @param element the element
*/
static getDisabledHiddenOrNotDisplayedAncestor(element) {
return Dom.getAncestor(element, x => Dom.isDisabled(x) || Dom.isNotDisplayed(x) || Dom.isHidden(x));
}
/**
* gets the first ancestor that is disabled
* @param element the element
*/
static getDisabledAncestor(element) {
return Dom.getAncestor(element, e => Dom.isDisabled(e));
}
/**
* returns ancestor table of current element
* @param element the current element
*/
static getAncestorTable(element) {
return Dom.getAncestor(element, e => e.tagName === 'TABLE');
}
/**
* gets the next child zone of the current zone
* @param element the current zone or an element in the current zone
*/
static getDescendentZone(element) {
// if there is no parent zone, just look from the current element forward
return Dom.findChildElementDFS(Dom.getAncestorZone(element) || element, Dom.isZone, ElementPosition.First);
}
/**
* gets the first focusable descendent of the current element
* @param element the current element
*/
static getFirstFocusableDescendent(element) {
if (!element) {
return null;
}
return Dom.isFocusable(element) ?
element : Dom.getFirstFocusableDescendent(Dom.findChildElementDFS(element, Dom.isFocusable || Dom.isZone, ElementPosition.First));
}
/**
* gets the last element in a zone
* @param element the element
*/
static getLastElementInZone(element) {
return Dom.findElementFromAncestorZoneDFS(element, Dom.isFocusable, ElementPosition.Last);
}
/**
* gets the first element in a zone
* @param element the element
*/
static getFirstElementInZone(element) {
return Dom.findElementFromAncestorZoneDFS(element, Dom.isFocusable, ElementPosition.First);
}
/**
* gets the next focusable element in the current zone
* @param element the current element
*/
static getNextFocusableElement(element) {
return Dom.findElementFromAncestorZoneDFS(element, Dom.isFocusable, ElementPosition.Next);
}
/**
* gets the previous focusable element in the current zone
* @param element the current element
*/
static getPreviousFocusableElement(element) {
return Dom.findElementFromAncestorZoneDFS(element, Dom.isFocusable, ElementPosition.Previous);
}
/**
* gets the ancestor of an element that has overflow
* @param element the current element
*/
static getOverflowAncestor(element) {
if (!element) {
return null;
}
return element.clientHeight < element.scrollHeight || element.clientWidth < element.scrollWidth ?
element : Dom.getOverflowAncestor(element.offsetParent);
}
/**
* gets the ancestor of an element that meets the specified condition
* @param element the current element
* @param condition the function that will check if element meets the desired condition
*/
static getSpecificAncestor(element, condition) {
if (!element) {
return null;
}
return condition(element) ? element : Dom.getSpecificAncestor(element.parentElement, condition);
}
/**
* gets the next focusable element in the current trap
* @param element the current element
*/
static getNextFocusableElementInTrap(element) {
return Dom.findElementFromAncestorTrapDFS(element, Dom.isFocusable, ElementPosition.Next);
}
/**
* gets the previous focusable element in the current trap
* @param element the current element
*/
static getPreviousFocusableElementInTrap(element) {
return Dom.findElementFromAncestorTrapDFS(element, Dom.isFocusable, ElementPosition.Previous);
}
/**
* true if given element is a body element
* @param element the element
*/
static isBody(element) {
return element.tagName === 'BODY';
}
/**
* true if the given element is a zone
* @param element the element
*/
static isZone(element) {
if (!element) {
return false;
}
return Dom.hasZoneRole(element)
|| Dom.isSmeFocusZone(element)
|| Dom.hasZoneTag(element)
|| Dom.isGrowlWithChild(element)
|| (Dom.isFocusableFormElement(element) && !Dom.isInZoneWithinForm(element));
}
/**
* true if the element is a focusable element that is not a zone
* @param element the element
*/
static isFocusableNonZone(element) {
return !Dom.isZone(element) && Dom.isFocusable(element);
}
/**
* true if the element is an input, select, or textarea without a form parent
* @param element the element
*/
static isInputWithoutForm(element) {
const inputTags = ['INPUT', 'SELECT', 'TEXTAREA'];
return inputTags.some(tag => tag === element.tagName) && Dom.getAncestorForm(element) === null;
}
/**
* true if the element has a role that qualifies as a zone
* @param element the element
*/
static hasZoneRole(element) {
const role = element.getAttribute('role');
const zoneRoles = ['grid', 'tablist', 'table', 'menubar', 'navigation', 'dialog'];
return zoneRoles.some(zoneRole => zoneRole === role);
}
/**
* true if the element has class="sme-focus-zone"
* @param element the element
*/
static isSmeFocusZone(element) {
return element.classList.contains('sme-focus-zone');
}
/**
* true if the element has a tag that is a zone
* @param element the element
*/
static hasZoneTag(element) {
// TODO: utilities should not know about specific sme tags.
// These tags should instead use the appropriate roles to identify them as focus zones.
const tag = element.tagName;
const zoneTags = ['SME-BREADCRUMB-HEADER', 'SME-DETAILS', 'SME-SETTINGS-FOOTER'];
return zoneTags.some(zoneTag => zoneTag === tag);
}
/**
* true if element has role 'tablist'
* @param element the html element
*/
static isTablist(element) {
if (!element) {
return false;
}
const role = element.getAttribute('role');
return role === 'tablist';
}
/**
* Returns true if element is active
* An element is active if it aria-selected attribute is set as true or has active or sme-active classes
* @param element the html element
*/
static isActiveOrSelected(element) {
const ariaSelected = element.getAttribute('aria-selected') === 'true';
const activeClasses = ['active', 'sme-active'];
return ariaSelected || activeClasses.some(className => element.classList.contains(className));
}
/**
* Returns first active or selected descendant or null if none is found
* @param element the html element
*/
static getFirstActiveOrSelectedDescendant(element) {
return Dom.findChildElementDFS(element, Dom.isActiveOrSelected, ElementPosition.First);
}
/**
* true if the element is a growl with a child
* @param element the element
*/
static isGrowlWithChild(element) {
return element.classList.contains('sme-layout-notification-popup-list') && element.childElementCount > 0;
}
/**
* true if element is focusable element within a form
* @param element the element
*/
static isFocusableFormElement(element) {
return !!Dom.getAncestorForm(element) && Dom.isFocusable(element);
}
/**
* true is element is within a zone that is within a form
* @param element the element
*/
static isInZoneWithinForm(element) {
return Dom.getAncestorForm(Dom.getAncestorZone(element.parentElement)) !== null;
}
/**
* true is element is within a trap that is within a form
* @param element the element
*/
static isInTrapWithinForm(element) {
return Dom.getAncestorForm(Dom.getAncestorTrap(element.parentElement)) !== null;
}
/**
* true if the given element is a trap
* @param element the element
*/
static isTrap(element) {
if (!element) {
return false;
}
const role = element.getAttribute('role');
const trapRoles = ['dialog', 'alertdialog'];
return trapRoles.some(trapRole => trapRole === role) || element.classList.contains('sme-focus-trap');
}
/**
* return true if element is a form
* @param element the element
*/
static isForm(element) {
if (!element) {
return false;
}
return element.tagName === 'FORM';
}
/**
* return true if we are inside a search box that has its own arrow key controls
* @param element the element
* @param isRightArrow the right arrow was clicked
*/
static useArrowKeysWithinSearchbox(element, isRightArrow) {
if (!element) {
return false;
}
if (Dom.isSearchBox(element)) {
const inputElement = element;
const innerTextLength = inputElement.value ? inputElement.value.length : 0;
return (!isRightArrow && inputElement.selectionStart !== null && inputElement.selectionStart > 0)
|| (isRightArrow && inputElement.selectionEnd !== null && inputElement.selectionEnd < innerTextLength);
}
return false;
}
/**
* true if given element is a search box
* @param element the element
*/
static isSearchBox(element) {
if (!element) {
return false;
}
const inputElement = element;
return element.tagName === 'INPUT' && inputElement && inputElement.type === 'search';
}
/**
* true if given element is a textbox in a combobox
* @param element the element
*/
static isTextBoxInComboBox(element) {
if (!element) {
return false;
}
return !!(Dom.getAncestor(element, htmlElement => {
return htmlElement.classList.contains('sme-combobox-header');
}));
}
/**
* returns the next row in the current table
* @param element the current element
*/
static getNextRowInTable(element) {
return Dom.findElementFromAncestorZoneDFS(element, Dom.isTableRow, ElementPosition.Next);
}
/**
* returns the previous row in the current table
* @param element the current element
*/
static getPreviousRowInTable(element) {
return Dom.findElementFromAncestorZoneDFS(element, Dom.isTableRow, ElementPosition.Previous);
}
/**
* returns true if the current element is a table row
* @param element the current element
*/
static isTableRow(element) {
return element.tagName === 'TR';
}
/**
* returns true if the current element is a table cell
* @param element the current element
*/
static isTableCell(element) {
return element.tagName === 'TD';
}
/**
* returns true if the current element is inside a table cell
* @param element the current element
*/
static isInTableCell(element) {
if (!element) {
return false;
}
return Dom.isTableCell(element) ? true : Dom.isInTableCell(element.parentElement);
}
/**
* Gets the first action bar on the screen.
* @param element The HTML element.
* @returns The first action bar on the screen.
*/
static getFirstActionBar(element) {
return this.getActionBar(element, ElementPosition.First);
}
/**
* Gets the next action bar on the screen.
* @param element The HTML element.
* @returns The first action bar on the screen.
*/
static getNextActionBar(element) {
return this.getActionBar(element, ElementPosition.Next);
}
/**
* Gets a specified action bar.
* @param element The HTML element.
* @param position The position of the desired action bar.
* @returns The specified action bar, if possible.
*/
static getActionBar(element, position) {
const actionBar = Dom.findElementFromRootDFS(Dom.getAncestorZone(element), (x) => Dom.isActionBar(x) && !MsftSme.isNullOrUndefined(Dom.getFirstFocusableDescendent(x)), position);
return Dom.getFirstFocusableDescendent(actionBar);
}
/**
* Determines if the HTML element is inside of an action bar.
* @param element The HTML element.
* @returns True if the HTML element is in an action bar and false if not.
*/
static isInActionBar(element) {
return MsftSme.isNullOrUndefined(Dom.getSpecificAncestor(element, (x) => Dom.isActionBar(x))) ? false : true;
}
/**
* Determines if the HTML element is an action bar.
* @param element The HTML element.
* @returns True if the element is an action bar and false if not.
*/
static isActionBar(element) {
return MsftSme.isNullOrUndefined(element) ? false : element.getAttribute('role') === 'menubar'
&& !MsftSme.isNullOrUndefined(element.parentElement) && element.parentElement.tagName === 'SME-ACTION-BAR';
}
/**
* Determines if we should treat enter as click for a certain element
* @param element The HTML element to check
*/
static shouldTreatEnterAsClick(element) {
if (!element) {
return false;
}
const inputElement = element;
// TODO: More types of elements may be added here
const isFileUploadControl = element.tagName === 'INPUT' && inputElement && inputElement.type === 'file';
const isInDataTable = !!Dom.getAncestor(element, e => e.tagName === 'SME-DATA-TABLE');
return isFileUploadControl || isInDataTable;
}
/**
* Check tab list aria-selected with active status
*/
static checkActiveTab() {
const tablists = document.querySelectorAll('[role=\'tablist\']');
for (const tablist of Array.from(tablists)) {
// As all controls should, the <sme-pivot> handles accessibility internally.
if (tablist.parentElement.tagName !== 'SME-PIVOT') {
Dom.updateAriaSelect(tablist, false);
}
}
}
/**
* Update tab aria-selected status
* @param element The HTML element.
* @param isActive The HTML element is active or inactive.
*/
static updateAriaSelect(currentElement, isActive) {
if (!currentElement) {
return;
}
if (currentElement.classList.contains('active') || currentElement.classList.contains('sme-active')) {
isActive = true;
}
if (currentElement.getAttribute('aria-selected') && !isActive) {
currentElement.setAttribute('aria-selected', 'false');
}
if (currentElement.getAttribute('role') === 'tab' && isActive) {
currentElement.setAttribute('aria-selected', 'true');
}
for (const childElement of Array.from(currentElement.children)) {
Dom.updateAriaSelect(childElement, isActive);
}
}
/**
* @param element Element whose focus origin we are trying to determine
* @returns The element to focus on
*/
static getFocusOrigin(element) {
if (!element) {
return;
}
if (Dom.isFocusable(element)) {
return element;
}
// return previous focusable element in zone if it exist
return Dom.getPreviousFocusableElement(element) ||
// return next focusable element in zone if it exists and there is no previous element
Dom.getNextFocusableElement(element) ||
// return the first focusable element in the previous zone if it exists and there is not a next zone
Dom.getPreviousZoneElement(element) ||
// return the first focusable element in the next zone if it exists
Dom.getNextZoneElement(element);
}
}
/**
* describes the position of the desired element in a list of elements
*/
export var ElementPosition;
(function (ElementPosition) {
ElementPosition[ElementPosition["First"] = 0] = "First";
ElementPosition[ElementPosition["Previous"] = 1] = "Previous";
ElementPosition[ElementPosition["Next"] = 2] = "Next";
ElementPosition[ElementPosition["Last"] = 3] = "Last";
})(ElementPosition || (ElementPosition = {}));
//# sourceMappingURL=dom.js.map