Skip to content

Home

Jump to bottom
JWB edited this page Dec 8, 2024 · 3 revisions

PicoCSS Developing

I put this list together, thanks to ClaudeAI and ChatGPT, with a list of available role values that we can use on our elements. I wanted to put this list somewhere that would be easy to find for reference as we expand on the capabilities.

[role="???"]

Role Usable Element Notes Allowed HTML5 Elements Disallowed HTML5 Elements Example of Use Description
alert Yes Alerts are for dynamic content updates and should not be interactive. <div>, <section>, <span> All interactive elements (e.g., <button>, <input>) A message about critical information, such as an error. Represents an important message that should be presented to the user.
alertdialog Yes Represents a modal for alerts; it should be implemented using non-interactive containers. <div> All interactive elements A confirmation dialog showing a warning message. Represents a dialog box that contains an alert.
application Yes Denotes a widget or application; disrupts semantics elsewhere. <div>, <section> All semantic elements Used in apps like Google Maps or a music player interface. Represents a complex web application, such as a media player or a map interface.
article Yes Matches <article> for independent content distribution. <article> Non-semantic elements (e.g., <div>, <span>) A blog post or a news article on a website. Represents a self-contained piece of content that could be distributed independently.
banner Yes Intended for site-oriented content like headers. <header> All elements outside of landmarks The top navigation bar or logo section of a website. Represents the site-oriented content at the top of a page, typically the header.
button Yes Use <button> or styled <a> for button behavior. <button>, <a> All others A clickable button to submit a form or trigger an action. Represents a button.
cell Yes Designed for table cells; cannot be applied elsewhere. <td> All non-table elements A cell in a data table, such as one containing a name or value. Represents a cell in a table.
checkbox Yes Matches <input> with type="checkbox"; invalid elsewhere. <input type="checkbox"> All others A checkbox for agreeing to terms or selecting options in a form. Represents a checkbox input control.
code Yes Represents computer code or script segments <code> All others A snippet of programming code displayed in documentation Represents a section of computer code or script.
columnheader Yes Specific to table headers; unrelated elsewhere. <th> All non-table elements A header for a column in a table such as "Name" or "Price". Represents a header for a column in a table.
combobox Yes Represents a dropdown or autocomplete widget; limited to such contexts. <select>, <input> <textarea>, other interactive elements A dropdown list to select a country, with an option to type. Represents a combo box, a dropdown list with a text input.
complementary Yes Provides additional but non-primary content. <aside> All non-landmark elements A sidebar with related articles on a blog post. Represents content that is complementary to the primary content.
contentinfo Yes Used for content summaries or metadata. <footer> All non-landmark elements The footer with copyright and contact information. Represents information about the content, typically in the footer.
definition Yes Matches content in definition lists. <dl> All others A term and its definition within a glossary or dictionary. Represents a definition of a term or concept.
dialog Yes Represents a dialog box. <dialog> All others A modal dialog asking for user input or feedback. Represents a dialog box or a window for user interaction.
directory Yes Matches the semantics of a directory-style list. <ul> All others A file explorer or directory list for organizing content. Represents a list of links to directories or files.
document Yes Represents the main document. <html>, <body> All others A standalone PDF viewer or an article displayed on a webpage. Represents a document that stands on its own (e.g., an article).
feed Yes Represents a dynamic feed of content updates. <div>, <section> All interactive and non-content elements Used for blog or social media feeds, like a live news section. Represents a section of a document that is updated dynamically, like a news feed.
figure Yes Matches figures with optional captions. <figure> All others Used for an image with a caption or a graph in an article. Represents a self-contained content unit, such as an image, chart, or diagram.
form Yes Matches the <form> element only. <form> All others A form for submitting personal information, like a registration form. Represents an HTML form element.
generic Yes Semantic neutralizer similar to none <div>, <span> All semantic elements Used for elements where no specific semantic meaning is required Indicates a generic container with no inherent semantic meaning
grid Yes Represents a 2D data grid. <div> with role attributes or ARIA widgets All non-interactive elements A photo grid on an image gallery page. Represents a grid, a two-dimensional collection of cells.
gridcell Yes Designed for use within grid or table structures. <td> All others A cell in a grid layout, for example, in a calendar app. Represents a single cell in a grid.
group Yes Groups form controls or widgets. <fieldset>, <div> All others Grouping form inputs for related data, like "Personal Info". Represents a group of related elements.
heading Yes Denotes headings; corresponds to <h1>-<h6>. <h1>-<h6> All others A section title or heading in an article or blog post. Represents a heading for a section of content.
img Yes Matches the semantics of images and illustrations. <img>, <figure> All others An image element, such as a logo or an illustration in a post. Represents an image.
input Yes Matches the <input> element; invalid elsewhere. <input> All others A text field for entering a name or email. Represents an input element, such as a text box or checkbox.
link Yes Represents anchors or links; invalid outside these contexts. <a>, <link> All others A hyperlink leading to another page or an external site. Represents a link to an external resource.
list Yes Represents a list container only. <ul>, <ol> All others An unordered list of features or items, such as a menu list. Represents a list of items.
listitem Yes Represents list items; invalid outside lists. <li> All others A single item in a list, such as a list of products in an eCommerce site. Represents an item in a list.
log Yes Represents dynamic log content. <div> All non-dynamic content A live log of system events or real-time data in an admin panel. Represents a log or live region that updates automatically.
main Yes Denotes the main content area. <main> All others The main body of an article or the primary section of a webpage. Represents the main content of the document.
mark Yes Matches highlighted content; invalid elsewhere. <mark> All others Highlighted search results or key terms in an article. Represents highlighted or marked text.
math Yes Represents mathematical expressions. <math> All others Used for displaying mathematical formulas in content. Represents mathematical content.
menu Yes Represents a list of interactive menu items. <menu> All others Navigation menu, like the top navigation bar of a website. Represents a list of commands or options.
menubar Yes Represents a horizontal or vertical menu bar for navigation. <div> with role attributes All others A horizontal menu bar with dropdowns in a web application. Represents a menu containing a list of commands or options.
menuitem Yes Represents menu items; valid only within menus. <li> inside a <menu> All others An option in a navigation menu, like "Home" or "About". Represents an item in a menu.
navigation Yes Matches navigation regions. <nav> All others The main menu or navigation bar in a website. Represents navigation links.
none Yes Removes default semantics for presentation purposes. <div>, <span> All semantic elements Used for elements where no specific role is required. Indicates that no role is applied to the element.
note Yes Represents side notes or annotations. <aside> All non-landmark elements A warning or suggestion in a document or form. Represents a side note, such as a caution or a tip.
option Yes Matches options within a select or listbox. <option> All others A selection option in a dropdown list, like choosing a state. Represents an option in a select menu.
presentation Yes Removes semantic meaning for visual presentation <div>, <span> All semantic elements Used when an element's visual structure matters more than its semantics Alternative to none for removing an element's semantic implications
progressbar Yes Matches the progress bar element. <progress> All others A progress bar showing file upload or download progress. Represents a progress bar indicating the progress of a task.
radio Yes Matches the <input> with type="radio". <input type="radio"> All others A radio button for selecting a single option in a group. Represents a radio button.
radiogroup Yes Groups radio buttons. <fieldset>, <div> All others A set of radio buttons for selecting a single option. Represents a group of radio buttons.
region Yes Represents a significant section of content. <section> All others A dynamic content area that updates automatically, like a news feed. Represents a section of content that can be dynamically updated.
region Yes Represents a significant region of the document. <section> All others Used for key sections of a page, like a main navigation region. Represents a section of content that is important and can be navigated.
row Yes Matches table rows. <tr> All others A row of data in a table, like an item in a product list. Represents a row in a table.
rowgroup Yes Matches row grouping elements in tables. <tbody>, <thead>, <tfoot> All others Grouping rows in a table, such as for sorting data. Represents a group of rows in a table.
rowheader Yes Matches headers in table rows. <th> All others A header for a row in a data table, like the "Product" header. Represents a header for a row in a table.
scrollbar Yes Represents the visual and interactive scrollbar component. <div>, <span> All semantic and non-interactive elements A scrollbar for long content in a div or section. Represents a scrollbar for navigating content.
search Yes Matches regions intended for search functionality. <form> with search-specific inputs All others A search box for finding content on a website. Represents a search form or area for searching.
searchbox Yes Matches search-specific input fields. <input type="search"> All others Used for a search bar at the top of a website. Represents an input field for a search query.
select Yes Matches dropdowns. <select> All others A dropdown menu for selecting an option, like a country list. Represents a select element (dropdown list).
separator Yes Represents a thematic break or visual division. <hr> All others A divider between items in a menu or form. Represents a visual separator, like a line or divider.
slider Yes Matches sliders or range inputs. <input type="range"> All others A slider to adjust a setting, like volume or brightness. Represents a slider control for selecting a value from a range.
spinbutton Yes Matches number inputs with spinner behavior. <input type="number"> All others A number input field with up and down arrows for adjusting value. Represents a spin button, such as a number input with increment and decrement controls.
status Yes Represents a status message. <div> All others A message showing the status of a process, such as "Uploading..." Represents a status message or dynamic content.
switch Yes Matches toggle controls for binary states. <input type="checkbox"> All others A switch for enabling/disabling a feature in settings. Represents a toggle switch (on/off).
tab Yes Represents a tab in a tabbed interface. <button> All others A tab in a tabbed navigation menu for switching content. Represents a tab in a tabbed interface.
table Yes Matches table elements. <table> All others A table displaying data in rows and columns. Represents a table.
tablist Yes Contains and manages a group of tabs <div> with tab roles All non-tab related elements The container for a set of tabs in a tabbed interface Represents the collection of tabs in a tabbed navigation system
tabpanel Yes Represents a container for tabbed content. <div> inside a tab container All others The content panel for a tab in a tabbed interface. Represents a tabbed panel in a tabbed interface.
term Yes Matches terms in definition lists. <dt> All others A term and its description in a glossary or list. Represents a term in a description list.
textbox Yes Matches text input fields. <input type="text">, <textarea> All others A text box for user input, such as a comment box. Represents a text input field.
time Yes Matches the <time> element. <time> All others A date input or displayed timestamp, like a publication date. Represents a time or date.
timer Yes Represents a countdown or time-tracking element <div>, <span> All interactive elements A timer showing remaining time in a quiz or cooking process Represents an element that tracks or displays time progression
toolbar Yes Represents a container for tool buttons. <div> All others A toolbar with icons for actions in an editor or application. Represents a toolbar, typically containing a set of controls.
tooltip Yes Provides additional descriptive information about an element. <span>, <div> All others A tooltip appearing when hovering over an icon or button. Represents a popup providing additional information when hovering over an element.
tree Yes Represents a hierarchical structure. <ul> or <div> All others A file tree or directory structure in an explorer. Represents a tree structure, like a file system.
treeitem Yes Matches items in a tree structure. <li> inside a <tree> All others A single item within a tree, such as a file or folder. Represents a tree item in a tree structure.
Role Usable Element Notes Allowed HTML5 Elements Disallowed HTML5 Elements Example of Use Description

This was put here for safe keeping for easy reference and for when a role value is questioned.

There might be some missing, or some might have changed. If anyone finds any please let us know!

Clone this wiki locally