\href{https://travis-ci.org/A11yance/aria-query}{\texttt{ }}

CDN URL\+: \href{https://npm-cdn.com/pkg/aria-query/}{\texttt{ https\+://npm-\/cdn.\+com/pkg/aria-\/query/}}\hypertarget{md_sfcode_node_modules_aria_query_README_autotoc_md3145}{}\doxysection{ARIA Query}\label{md_sfcode_node_modules_aria_query_README_autotoc_md3145}
Programmatic access to the \href{https://www.w3.org/TR/wai-aria-1.1/\#roles}{\texttt{ WAI-\/\+ARIA 1.\+1 Roles Model}}.\hypertarget{md_sfcode_node_modules_aria_query_README_autotoc_md3146}{}\doxysubsection{Utilities}\label{md_sfcode_node_modules_aria_query_README_autotoc_md3146}
\hypertarget{md_sfcode_node_modules_aria_query_README_autotoc_md3147}{}\doxysubsubsection{Roles}\label{md_sfcode_node_modules_aria_query_README_autotoc_md3147}

\begin{DoxyCode}{0}
\DoxyCodeLine{import \{ roles \} from 'aria-\/query'; }

\end{DoxyCode}


A \href{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map}{\texttt{ Map}} of role names to the role definition. For example\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{let alertRole = roles.get('alert');}
\DoxyCodeLine{/**}
\DoxyCodeLine{ * Value of alertRole}
\DoxyCodeLine{ * \{}
\DoxyCodeLine{ *   "{}requiredProps"{}: [],}
\DoxyCodeLine{ *   "{}props"{}: [}
\DoxyCodeLine{ *     "{}aria-\/expanded"{},}
\DoxyCodeLine{ *     "{}aria-\/atomic"{},}
\DoxyCodeLine{ *     "{}aria-\/busy"{},}
\DoxyCodeLine{ *     "{}aria-\/controls"{},}
\DoxyCodeLine{ *     "{}aria-\/describedby"{},}
\DoxyCodeLine{ *     "{}aria-\/disabled"{},}
\DoxyCodeLine{ *     "{}aria-\/dropeffect"{},}
\DoxyCodeLine{ *     "{}aria-\/flowto"{},}
\DoxyCodeLine{ *     "{}aria-\/grabbed"{},}
\DoxyCodeLine{ *     "{}aria-\/haspopup"{},}
\DoxyCodeLine{ *     "{}aria-\/hidden"{},}
\DoxyCodeLine{ *     "{}aria-\/invalid"{},}
\DoxyCodeLine{ *     "{}aria-\/label"{},}
\DoxyCodeLine{ *     "{}aria-\/labelledby"{},}
\DoxyCodeLine{ *     "{}aria-\/live"{},}
\DoxyCodeLine{ *     "{}aria-\/owns"{},}
\DoxyCodeLine{ *     "{}aria-\/relevant"{}}
\DoxyCodeLine{ *   ],}
\DoxyCodeLine{ *   "{}abstract"{}: false,}
\DoxyCodeLine{ *   "{}interactive"{}: false,}
\DoxyCodeLine{ *   "{}childrenPresentational"{}: false,}
\DoxyCodeLine{ *   "{}baseConcepts"{}: [],}
\DoxyCodeLine{ *   "{}relatedConcepts"{}: [ \{}
\DoxyCodeLine{ *     "{}module"{}: "{}XForms"{},}
\DoxyCodeLine{ *     "{}concept"{}: \{}
\DoxyCodeLine{ *       "{}name"{}: "{}alert"{}}
\DoxyCodeLine{ *     \}}
\DoxyCodeLine{ *   \}]}
\DoxyCodeLine{ * \} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_aria_query_README_autotoc_md3148}{}\doxysubsubsection{Elements to Roles}\label{md_sfcode_node_modules_aria_query_README_autotoc_md3148}

\begin{DoxyCode}{0}
\DoxyCodeLine{import \{ elementRoles \} from 'aria-\/query'; }

\end{DoxyCode}


HTML Elements with inherent roles are mapped to those roles. In the case of an element like {\ttfamily $<$input$>$}, the element often requires a {\ttfamily type} attribute to map to an ARIA role.


\begin{DoxyCode}{0}
\DoxyCodeLine{Map \{}
\DoxyCodeLine{  '\{"{}name"{}: "{}article"{}\}' => Set \{ 'article' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}button"{}\}' => Set \{ 'button' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}td"{}\}' => Set \{ 'cell', 'gridcell' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}input"{}, "{}attributes"{}: [ \{"{}name"{}: "{}type"{}, "{}value"{}: "{}checkbox"{}\}] \}' => Set \{ 'checkbox' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}th"{}\}' => Set \{ 'columnheader' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}select"{}\}' => Set \{ 'combobox', 'listbox' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}menuitem"{}\}' => Set \{ 'command', 'menuitem' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}dd"{}\}' => Set \{ 'definition' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}dfn"{}\}' => Set \{ 'definition' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}figure"{}\}' => Set \{ 'figure' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}form"{}\}' => Set \{ 'form' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}table"{}\}' => Set \{ 'grid', 'table' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}fieldset"{}\}' => Set \{ 'group' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}h1"{}\}' => Set \{ 'heading' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}h2"{}\}' => Set \{ 'heading' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}h3"{}\}' => Set \{ 'heading' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}h4"{}\}' => Set \{ 'heading' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}h5"{}\}' => Set \{ 'heading' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}h6"{}\}' => Set \{ 'heading' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}img"{}\}' => Set \{ 'img' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}a"{}\}' => Set \{ 'link' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}link"{}\}' => Set \{ 'link' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}ol"{}\}' => Set \{ 'list' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}ul"{}\}' => Set \{ 'list' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}li"{}\}' => Set \{ 'listitem' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}nav"{}\}' => Set \{ 'navigation' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}option"{}\}' => Set \{ 'option' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}input"{}, "{}attributes"{}: [ \{"{}name"{}: "{}type"{}, "{}value"{}: "{}radio"{}\}] \}' => Set \{ 'radio' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}frame"{}\}' => Set \{ 'region' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}rel"{}\}' => Set \{ 'roletype' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}tr"{}\}' => Set \{ 'row' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}tbody"{}\}' => Set \{ 'rowgroup' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}tfoot"{}\}' => Set \{ 'rowgroup' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}thead"{}\}' => Set \{ 'rowgroup' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}th"{}, "{}attributes"{}: [ \{"{}name"{}: "{}scope"{}, "{}value"{}: "{}row"{}\}] \}' => Set \{ 'rowheader' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}input"{}, "{}attributes"{}: [ \{"{}name"{}: "{}type"{}, "{}value"{}: "{}search"{}\}] \}' => Set \{ 'searchbox' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}hr"{}\}' => Set \{ 'separator' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}dt"{}\}' => Set \{ 'term' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}textarea"{}\}' => Set \{ 'textbox' \},}
\DoxyCodeLine{  '\{"{}name"{}: "{}input"{}, "{}attributes"{}: [ \{"{}name"{}: "{}type"{}, "{}value"{}: "{}text"{}\}] \}' => Set \{ 'textbox' \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


The map of elements to roles is keyed by an HTML concept. An HTML concept corresponds to the {\ttfamily base\+Concepts} and {\ttfamily related\+Concepts} of an ARIA role. Concepts exist in the context of a {\ttfamily module}\+: HTML, XForms, Dublin Core, for example. The concept representation is an object literal with a name property (the element name) and an optional attributes array.

The roles are provided in a \href{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set}{\texttt{ Set}}.\hypertarget{md_sfcode_node_modules_aria_query_README_autotoc_md3149}{}\doxysubsubsection{Role to element}\label{md_sfcode_node_modules_aria_query_README_autotoc_md3149}

\begin{DoxyCode}{0}
\DoxyCodeLine{import \{ roleElements \} from 'aria-\/query'; }

\end{DoxyCode}


ARIA roles are mapped to the HTML Elements with the same inherent role. Some roles, such as {\ttfamily columnheader} are only mapped to an HMTL element that expresses specific attributes. In the case of {\ttfamily $<$input$>$}, the element often requires a {\ttfamily type} attribute to map to an ARIA role.


\begin{DoxyCode}{0}
\DoxyCodeLine{Map \{}
\DoxyCodeLine{  'article' => Set \{ '\{"{}name"{}: "{}article"{}\}' \},}
\DoxyCodeLine{  'button' => Set \{ '\{"{}name"{}: "{}button"{}\}' \},}
\DoxyCodeLine{  'cell' => Set \{ '\{"{}name"{}: "{}td"{}\}' \},}
\DoxyCodeLine{  'checkbox' => Set \{ '\{"{}name"{}: "{}input"{}, "{}attributes"{}: [ \{"{}name"{}: "{}type"{}, "{}value"{}: "{}checkbox"{}\}] \}' \},}
\DoxyCodeLine{  'columnheader' => Set \{ '\{"{}name"{}: "{}th"{}\}' \},}
\DoxyCodeLine{  'combobox' => Set \{ '\{"{}name"{}: "{}select"{}\}' \},}
\DoxyCodeLine{  'command' => Set \{ '\{"{}name"{}: "{}menuitem"{}\}' \},}
\DoxyCodeLine{  'definition' => Set \{ '\{"{}name"{}: "{}dd"{}\}', '\{"{}name"{}: "{}dfn"{}\}' \},}
\DoxyCodeLine{  'figure' => Set \{ '\{"{}name"{}: "{}figure"{}\}' \},}
\DoxyCodeLine{  'form' => Set \{ '\{"{}name"{}: "{}form"{}\}' \},}
\DoxyCodeLine{  'grid' => Set \{ '\{"{}name"{}: "{}table"{}\}' \},}
\DoxyCodeLine{  'gridcell' => Set \{ '\{"{}name"{}: "{}td"{}\}' \},}
\DoxyCodeLine{  'group' => Set \{ '\{"{}name"{}: "{}fieldset"{}\}' \},}
\DoxyCodeLine{  'heading' => Set \{ '\{"{}name"{}: "{}h1"{}\}', '\{"{}name"{}: "{}h2"{}\}', '\{"{}name"{}: "{}h3"{}\}', '\{"{}name"{}: "{}h4"{}\}',  '\{"{}name"{}: "{}h5"{}\}', '\{"{}name"{}: "{}h6"{}\}' \},}
\DoxyCodeLine{  'img' => Set \{ '\{"{}name"{}: "{}img"{}\}' \},}
\DoxyCodeLine{  'link' => Set \{ '\{"{}name"{}: "{}a"{}\}', '\{"{}name"{}: "{}link"{}\}' \},}
\DoxyCodeLine{  'list' => Set \{ '\{"{}name"{}: "{}ol"{}\}', '\{"{}name"{}: "{}ul"{}\}' \},}
\DoxyCodeLine{  'listbox' => Set \{ '\{"{}name"{}: "{}select"{}\}' \},}
\DoxyCodeLine{  'listitem' => Set \{ '\{"{}name"{}: "{}li"{}\}' \},}
\DoxyCodeLine{  'menuitem' => Set \{ '\{"{}name"{}: "{}menuitem"{}\}' \},}
\DoxyCodeLine{  'navigation' => Set \{ '\{"{}name"{}: "{}nav"{}\}' \},}
\DoxyCodeLine{  'option' => Set \{ '\{"{}name"{}: "{}option"{}\}' \},}
\DoxyCodeLine{  'radio' => Set \{ '\{"{}name"{}: "{}input"{}, "{}attributes"{}: [ \{"{}name"{}: "{}type"{}, "{}value"{}: "{}radio"{}\}] \}' \},}
\DoxyCodeLine{  'region' => Set \{ '\{"{}name"{}: "{}frame"{}\}' \},}
\DoxyCodeLine{  'roletype' => Set \{ '\{"{}name"{}: "{}rel"{}\}' \},}
\DoxyCodeLine{  'row' => Set \{ '\{"{}name"{}: "{}tr"{}\}' \},}
\DoxyCodeLine{  'rowgroup' => Set \{ '\{"{}name"{}: "{}tbody"{}\}', '\{"{}name"{}: "{}tfoot"{}\}', '\{"{}name"{}: "{}thead"{}\}' \},}
\DoxyCodeLine{  'rowheader' => Set \{ '\{"{}name"{}: "{}th"{}, "{}attributes"{}: [ \{"{}name"{}: "{}scope"{}, "{}value"{}: "{}row"{}\}] \}' \},}
\DoxyCodeLine{  'searchbox' => Set \{ '\{"{}name"{}: "{}input"{}, "{}attributes"{}: [ \{"{}name"{}: "{}type"{}, "{}value"{}: "{}search"{}\}] \}' \},}
\DoxyCodeLine{  'separator' => Set \{ '\{"{}name"{}: "{}hr"{}\}' \},}
\DoxyCodeLine{  'table' => Set \{ '\{"{}name"{}: "{}table"{}\}' \},}
\DoxyCodeLine{  'term' => Set \{ '\{"{}name"{}: "{}dt"{}\}' \},}
\DoxyCodeLine{  'textbox' => Set \{ '\{"{}name"{}: "{}textarea"{}\}', '\{"{}name"{}: "{}input"{}, "{}attributes"{}: [ \{"{}name"{}: "{}type"{}, "{}value"{}: "{}text"{}\}] \}' \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


The HTML concept values are provided in a \href{https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set}{\texttt{ Set}}. 