How to Style CSS Role

How to style CSS role

Use CSS attribute selectors:

https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors

e.g.:

div[role=main]

CSS Attribute Selectors role*=user

The selector is targetting any anchor tag [a] which its href attribute doesn't start with stage [:not([href^=stage])]; that, is inside the an article, which is a direct child > of an element on which its role attribute contains user.

In the example bellow I styled the targets with a pinky color so that it can give an idea of what elements are selected by that:

[role*=user] > article a:not([href^=stage]) {     color: fuchsia;}

<div role="user">  <article>    <a href="stage">loren</a> ipsum dolor <a href="not-stage">sit amet</a>  </article></div>

CSS apply style for HTML elements on a CSS ROLE

It seems that you need to apply CSS rules for descendants of .TreeView:

.TreeView td,  .TreeView div, .TreeView table
{
    height: 20px !important;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0px;
    padding: 0px;
}

How to style an ARIA Role Table with aria-colspan

One way to fix this, is to change your layout from grid to flex, but this is not going to work if you want to use a different value in aria-colspan:

div[role="table"] {
  display: flex;
  flex-direction: column;
}

div[role="rowgroup"],div[role="row"] {
  display: flex;
}
div[role="row"]{
  flex: 1;
}

div[role="columnheader"],
div[role="cell"]{
  padding: 0.25em 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

The alternative is to actually build a HTML table and add the ARIA tags in each table element.

What is the purpose of the role attribute in HTML?

Most of the roles you see were defined as part of ARIA 1.0, and then later incorporated into HTML via supporting specs like HTML-AAM. Some of the new HTML5 elements (dialog, main, etc.) are even based on the original ARIA roles.

http://www.w3.org/TR/wai-aria/

While the First Rule of Aria states:

If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

there are a few primary reasons to use roles in addition to your native semantic element.

Reason #1. Overriding the role where no host language element is appropriate or, for various reasons, a less semantically appropriate element was used.

In this example, a link was used, even though the resulting functionality is more button-like than a navigation link.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>
<!-- Note: href="#" is just a shorthand here, not a recommended technique. Use progressive enhancement when possible. -->

Screen readers users will hear this as a button (as opposed to a link), and you can use a CSS attribute selector to avoid class-itis and div-itis.

[role="button"] {
  /* style these as buttons w/o relying on a .button class */
}

[Update 7 years later: removed the * selector to make some commenters happy, since the old browser quirk that required universal selector on attribute selectors is unnecessary in 2020.]

Reason #2. Backing up a native element's role, to support browsers that implemented the ARIA role but haven't yet implemented the native element's role.

For example, the "main" role has been supported in browsers for many years, but it's a relatively recent addition to HTML5, so many browsers don't yet support the semantic for <main>.

<main role="main">…</main>

This is technically redundant, but helps some users and doesn't harm any. In a few years, this technique will likely become unnecessary for main.

Reason #3.
Update 7 years later (2020): As at least one commenter pointed out, this is now very useful for custom elements, and some spec work is underway to define the default accessibility role of a web component. Even if/once that API is standardized, there may be need to override the default role of a component.

Note/Reply

You also wrote:

I see some people make up their own. Is that allowed or a correct use of the role attribute?

That's an allowed use of the attribute unless a real role is not included. Browsers will apply the first recognized role in the token list.

<span role="foo link note bar">...</a>

Out of the list, only link and note are valid roles, and so the link role will be applied in the platform accessibility API because it comes first. If you use custom roles, make sure they don't conflict with any defined role in ARIA or the host language you're using (HTML, SVG, MathML, etc.)

Wordpress how to apply specific CSS property based on user role on every page

"I need this to apply to all pages without having to use shortcode"

You could use the wp_head action hook to run the following code for every single page without using a shortcode.

add_action('wp_head', 'changing_color_of_top_navbar');

function changing_color_of_top_navbar()
{

    $current_user = wp_get_current_user();

    $user_roles = $current_user->roles;

    if (in_array("subscriber", $user_roles)) {
        ?>
        <style>
            .header-top {
                background-color: black;
            }
        </style>
    <?php
    } elseif (in_array("customer", $user_roles)) {
    ?>
        <style>
            .header-top {
                background-color: #00337f;
            }
        </style>
    <?php
    } elseif (in_array("administrator", $user_roles)) {
    ?>
        <style>
            .header-top {
                background-color: yellow;
            }
        </style>
    <?php
    }
}

Code goes into the functions.php file of your active theme or child theme.

Manipulate content # for all div elements (with role=tabpanel) - style=display: none; to display: block;

Run this in console

document.querySelectorAll('div.accordionItemContent.accordion.ui-reset.widget.uibottom[role="tabpanel"]').forEach(e => {
   e.style.display = "block";
});

Edited for edited question, only using class accordionItemContent

document.querySelectorAll('div.accordionItemContent[role="tabpanel"]').forEach(e => {
   e.style.display = "block";
});

To change the other attributes as mentioned in the update:

document.querySelectorAll('div.accordionItemContent[role="tabpanel"]').forEach(e => {
   e.style.display = "block";
   e.setAttribute(“tabindex”, 0) // Use this syntax to change all effected attributes
});

table alternating colored rows. Keep styles on table rows with attribute, skip other tr's. preferably done by CSS

Redo the table logic using your own elements and you can easily achieve this with nth-of-type if you insert a different type of element:

$('[role=row]').click(function () {
  if ($(this).attr('data-toggle') != 0) {
  $(this).after('<section><span >-</span></section>')
    .attr('data-toggle', 0);
  }
});

.myclass [role=row]:nth-of-type(odd) * {
    background-color: #fad;
}
.myclass {
  display:table;
  border-spacing:2px;
}
.myclass > * {
  display:table-row;
}
.myclass > * > * {
  display:table-cell;
}
header {
  font-weight:bold;
}

tbody > div {
  display:table-row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myclass">
    <header>
      <span>head 1</span>
      <span>head 2</span>
      <span>head 3</span>
      <span>head 4</span>
    </header>
    <div role="row">
      <span>should</span>
      <span>be</span>
      <span>colored</span>
      <span>!</span>
    </div>
    <div role="row">
      <span>no</span>
      <span>color</span>
      <span>-</span>
      <span>-</span>
    </div>
    <div role="row">
      <span>should</span>
      <span>be</span>
      <span>colored</span>
      <span>!</span>
    </div>
    <div role="row">
      <span>no</span>
      <span>color</span>
      <span>-</span>
      <span>-</span>
    </div>
</div>

---

Related Topics