Tab. Tab
Donalvon Stilwell
An element with the tab role controls the visibility of an associated element with the tabpanel role. The common user experience pattern is a group of visual tabs above, or to the side of, a content area, and selecting a different tab changes the content and makes the selected tab more prominent than the other tabs.
Elements with the role tab must either be a child of an element with the tablist role, or have their id as part of the aria-owns property of a tablist. This combination identifies to assistive technology that the element is part of a group of related elements. Some assistive technology will provide a count of the number of tab role elements inside a tablist, and inform users of which tab they currently have targeted. Further, an element with the tab role should contain the aria-controls property identifying a corresponding tabpanel (that has a tabpanel role) by that element's id. When an element with the tabpanel role has focus, or a child of it has focus, that indicates that the connected element with the tab role is the active tab in a tablist.
When elements with the tab role are selected or active they should have their aria-selected attribute set to true. Otherwise, their aria-selected attribute should be set to false. When a single-selectable tablist is selected or active, the hidden attribute of the other tabpanels should be set to true until the user selects the tab associated with that tabpanel. When a multi-selectable tablist is selected or active, its corresponding controlled tabpanel should have its aria-expanded attribute set to true and its hidden attribute set to false, otherwise the reverse.
There are some types of user interface components that, when represented in a platform accessibility API, can only contain text. Accessibility APIs do not have a way of representing semantic elements contained in a tab. To deal with this limitation, browsers, automatically apply role presentation to all descendant elements of any tab element as it is a role that does not support semantic children.
Note: While there are ways to build tab-like functionality without JavaScript, there is no substitute combination using only HTML and CSS that will provide the same set of functionality that's required above for accessible tabs with content.
All of the tabpanel elements have tabindex="0" to make them tabbable, and all but the currently active one have the hidden attribute. The hidden attribute will be removed when a tabpanel becomes visible with JavaScript. There is some basic styling applied that restyles the buttons and changes the z-index of tab elements to give the illusion of it connecting to the tabpanel for active elements, and the illusion that inactive elements are behind the active tabpanel.
There are two things we need to do with JavaScript: we need to change focus and tab index of our tab elements with the right and left arrows, and we need to change the active tab and tabpanel when we click on a tab.
To accomplish the first, we listen for the keydown event on the tablist. If the event's key is ArrowRight or ArrowLeft, we react to the event. We start by setting the tabindex of the current tab element to -1, making it no longer tabbable. Then, if the right arrow is being pressed, we increase our tab focus counter by one. If the counter is greater than the number of tab elements we have, we circle back to the first tab by setting that counter to 0. If the left arrow is being pressed, we decrease our tab focus counter by one, and if it is then less than 0, we set it to the number of tab elements minus one (to get to the last element). Finally, we set focus to the tab element whose index is equal to the tab focus counter, and set its tabindex to 0 to make it tabbable.
To handle changing the active tab and tabpanel, we have a function that takes in the event, gets the element that triggered the event, the triggering element's parent element, and its grandparent element. We then find all tabs with aria-selected="true" inside the parent element and sets it to false, then sets the triggering element's aria-selected to true. After that, we find all tabpanel elements in the grandparent element, make them all hidden, and finally select the element whose id is equal to the triggering tab's aria-controls and removes the hidden attribute, making it visible.
It is recommended to use a element with the role tab for their built-in functional and accessible features instead, as opposed to needing to add them yourself. For controlling tab key functionality for elements with the role tab, it is recommended to set all non-active elements to tabindex="-1", and to set the active element to tabindex="0".
All of the tabpanel elements have tabindex=\"0\" to make them tabbable, and all but the currently active one have the hidden attribute. The hidden attribute will be removed when a tabpanel becomes visible with JavaScript. There is some basic styling applied that restyles the buttons and changes the z-index of tab elements to give the illusion of it connecting to the tabpanel for active elements, and the illusion that inactive elements are behind the active tabpanel.
To handle changing the active tab and tabpanel, we have a function that takes in the event, gets the element that triggered the event, the triggering element's parent element, and its grandparent element. We then find all tabs with aria-selected=\"true\" inside the parent element and sets it to false, then sets the triggering element's aria-selected to true. After that, we find all tabpanel elements in the grandparent element, make them all hidden, and finally select the element whose id is equal to the triggering tab's aria-controls and removes the hidden attribute, making it visible.
It is recommended to use a element with the role tab for their built-in functional and accessible features instead, as opposed to needing to add them yourself. For controlling tab key functionality for elements with the role tab, it is recommended to set all non-active elements to tabindex=\"-1\", and to set the active element to tabindex=\"0\".
Hi Olly,
Thanks for reaching out to the community. To give some clarification, after the Dev Mode beta ends, users who do not have a Full or Dev Mode seat will still be able to access information on designs through the Properties tab. This Properties tab is only visible to users viewing the file with view only access.
Users with editing access will be able to either use Dev Mode or inspect the design from the Design panel.
Viewer experience diagram.png28271590 213 KB
For more information on the view-only properties panel, you can check these following articles:
The design tab is far from what the properties tab is meant for. The properties tab is a list of the final attributes of a specific element. Nothing is hidden behind multiple clicks, colors are in hex values not hidden behind design-system names.
59fb9ae87f