Extending the schema, fixing the Docsite accordingly (#2052)

* Checkbox, RadioGroupItem, ToolbarItem, PopupButton, various Docsite fixes.
2019-11-07 03:59:27 +01:00 · 2019-11-07 03:59:27 +01:00 · beb1913893
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add bounce animation to button clicks in Teams theme @notandrew ([#1724](https://github.com/stardust-ui/react/pull/1724))
 - Update Silver color scheme, adding `foregroundHover`, `foregroundPressed` and `background` definitions @pompomon ([#2078](https://github.com/microsoft/fluent-ui-react/pull/2078))
+- Expanding experimental accessibility schema to more components @mshoho ([#2052](https://github.com/stardust-ui/react/pull/2052))

 ### Performance
 - Add rendering performance telemetry @miroslavstastny ([#2079](https://github.com/microsoft/fluent-ui-react/pull/2079))
--- a/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx
+++ b/docs/src/examples/components/Attachment/Slots/AttachmentActionExample.shorthand.tsx
@ -9,11 +9,11 @@ class AttachmentActionExampleShorthand extends React.Component {
      <div>
        <Attachment
          header="Picture.jpg"
-          action={{ icon: 'close', onClick: this.handleClick('Remove') }}
+          action={{ icon: 'close', onClick: this.handleClick('Remove'), title: 'Close' }}
        />
        <Attachment
          header="Document.docx"
-          action={{ icon: 'more', onClick: this.handleClick('Show more') }}
+          action={{ icon: 'more', onClick: this.handleClick('Show more'), title: 'Show more' }}
        />
      </div>
    )
--- a/docs/src/examples/components/Attachment/Types/AttachmentProgressExample.shorthand.tsx
+++ b/docs/src/examples/components/Attachment/Types/AttachmentProgressExample.shorthand.tsx
@ -4,7 +4,7 @@ import { Attachment } from '@stardust-ui/react'
 const AttachmentProgressExampleShorthand = () => (
  <Attachment
    header="Photo.jpg"
-    action={{ icon: 'close', onClick: () => alert("'X' is clicked!") }}
+    action={{ icon: 'close', onClick: () => alert("'X' is clicked!"), title: 'Close' }}
    progress={33}
  />
 )
--- a/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx
+++ b/docs/src/examples/components/Attachment/Variations/AttachmentActionableExample.shorthand.tsx
@ -14,7 +14,7 @@ class AttachmentActionableExampleShorthand extends React.Component {
        icon="table"
        header="Document.docx"
        description="800 Kb"
-        action={{ icon: 'more', onClick: this.handleClick('More Action') }}
+        action={{ icon: 'more', onClick: this.handleClick('More Action'), title: 'More Action' }}
        progress={33}
        onClick={this.handleClick('Attachment')}
      />
--- a/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx
+++ b/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx
@ -5,9 +5,9 @@ const ButtonGroupCircularExampleShorthand = () => (
  <Button.Group
    circular
    buttons={[
-      { key: 'emoji', icon: 'emoji', primary: true },
-      { key: 'translation', icon: 'translation' },
-      { key: 'play', icon: 'play', primary: true },
+      { key: 'emoji', icon: 'emoji', primary: true, title: 'Emoji' },
+      { key: 'translation', icon: 'translation', title: 'Translation' },
+      { key: 'play', icon: 'play', primary: true, title: 'Play' },
    ]}
  />
 )
--- a/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx
+++ b/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx
@ -4,9 +4,9 @@ import { Button } from '@stardust-ui/react'
 const ButtonGroupExampleShorthand = () => (
  <Button.Group
    buttons={[
-      { key: 'emoji', icon: 'emoji', iconOnly: true },
-      { key: 'translation', icon: 'translation', iconOnly: true },
-      { key: 'play', icon: 'play', iconOnly: true },
+      { key: 'emoji', icon: 'emoji', iconOnly: true, title: 'Emoji' },
+      { key: 'translation', icon: 'translation', iconOnly: true, title: 'Translation' },
+      { key: 'play', icon: 'play', iconOnly: true, title: 'Play' },
    ]}
  />
 )
--- a/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx
+++ b/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx
@ -7,7 +7,7 @@ const ButtonExampleDisabled = () => (
      <Button disabled content="Default" />
      <Button disabled content="Primary" primary />
      <Button disabled icon="emoji" content="Click me" iconPosition="before" primary />
-      <Button disabled circular icon="translation" />
+      <Button disabled circular icon="translation" title="Translation" />
      <Button
        disabled
        text
--- a/docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx
+++ b/docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx
@ -12,7 +12,7 @@ const ButtonExampleDisabled = () => (
        <Icon name="emoji" xSpacing="after" />
        <Text content="Click me" />
      </Button>
-      <Button disabled circular>
+      <Button disabled circular title="Translation">
        <Icon name="translation" xSpacing="none" />
      </Button>
      <Button disabled text>
--- a/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.shorthand.tsx
@ -4,11 +4,11 @@ import { Button, Flex, Text } from '@stardust-ui/react'
 const ButtonExampleIconOnly = () => (
  <div>
    <Flex gap="gap.large" vAlign="center">
-      <Button icon="stardust-close" iconOnly />
+      <Button icon="stardust-close" iconOnly title="Close" />
      <Text content="AS A DEFAULT BUTTON" weight="bold" />
    </Flex>
    <Flex gap="gap.large" vAlign="center">
-      <Button icon="stardust-close" text iconOnly />
+      <Button icon="stardust-close" text iconOnly title="Close" />
      <Text content="AS A TEXT BUTTON" weight="bold" />
    </Flex>
  </div>
--- a/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.tsx
@ -4,13 +4,13 @@ import { Button, Flex, Text, Icon } from '@stardust-ui/react'
 const ButtonExampleIconOnly = () => (
  <div>
    <Flex gap="gap.large" vAlign="center">
-      <Button iconOnly>
+      <Button iconOnly title="Close">
        <Icon name="stardust-close" xSpacing="none" />
      </Button>
      <Text content="AS A DEFAULT BUTTON" weight="bold" />
    </Flex>
    <Flex gap="gap.large" vAlign="center">
-      <Button iconOnly text>
+      <Button iconOnly text title="Close">
        <Icon name="stardust-close" xSpacing="none" />
      </Button>
      <Text content="AS A TEXT BUTTON" weight="bold" />
--- a/docs/src/examples/components/Button/Types/ButtonExampleText.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleText.shorthand.tsx
@ -9,7 +9,7 @@ const ButtonExampleTextShorthand = () => (
    <Button icon="call-video" text content="A text button with an icon" />
    <br />
    <br />
-    <Button icon="team-create" text iconOnly />
+    <Button icon="team-create" text iconOnly title="Create" />
    <br />
    <br />
    <Button icon="call-video" text disabled content="A disabled text button with an icon" />
--- a/docs/src/examples/components/Button/Types/ButtonExampleText.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExampleText.tsx
@ -14,7 +14,7 @@ const ButtonExampleText = () => (
    </Button>
    <br />
    <br />
-    <Button text iconOnly>
+    <Button text iconOnly title="Video Call">
      <Icon name="call-video" />
    </Button>
    <br />
--- a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx
@ -4,8 +4,8 @@ import { Button, Flex } from '@stardust-ui/react'
 const ButtonExampleCircular = () => (
  <Flex gap="gap.smaller">
    <Button circular content="C" />
-    <Button circular icon="emoji" />
-    <Button circular icon="broadcast" primary />
+    <Button circular icon="emoji" title="Emoji" />
+    <Button circular icon="broadcast" primary title="Broadcast" />
  </Flex>
 )
 export default ButtonExampleCircular
--- a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx
@ -4,10 +4,10 @@ import { Button, Flex, Icon } from '@stardust-ui/react'
 const ButtonExampleCircular = () => (
  <Flex gap="gap.smaller">
    <Button circular>C</Button>
-    <Button circular icon>
+    <Button circular icon title="Emoji">
      <Icon name="emoji" xSpacing="none" />
    </Button>
-    <Button circular icon primary>
+    <Button circular icon primary title="Broadcast">
      <Icon name="broadcast" xSpacing="none" />
    </Button>
  </Flex>
--- a/docs/src/examples/components/Grid/Variations/GridExampleKeyboardNavigable.shorthand.tsx
+++ b/docs/src/examples/components/Grid/Variations/GridExampleKeyboardNavigable.shorthand.tsx
@ -51,7 +51,7 @@ const renderImages = () => {

 const renderImageButtons = () => {
  return _.map(imageNames, imageName => (
-    <Button key={imageName} styles={imageButtonStyles}>
+    <Button key={imageName} styles={imageButtonStyles} title={imageName}>
      <Image fluid src={`public/images/avatar/large/${imageName}.jpg`} />
    </Button>
  ))
--- a/docs/src/examples/components/Grid/Variations/GridExampleKeyboardNavigable.tsx
+++ b/docs/src/examples/components/Grid/Variations/GridExampleKeyboardNavigable.tsx
@ -51,7 +51,7 @@ const renderImages = () => {

 const renderImageButtons = () => {
  return _.map(imageNames, imageName => (
-    <Button key={imageName} styles={imageButtonStyles}>
+    <Button key={imageName} styles={imageButtonStyles} title={imageName}>
      <Image fluid src={`public/images/avatar/large/${imageName}.jpg`} />
    </Button>
  ))
--- a/docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx
+++ b/docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx
@ -9,11 +9,13 @@ const actions = (
        icon: 'stardust-checkmark',
        iconOnly: true,
        text: true,
+        title: 'Check',
      },
      {
        icon: 'stardust-close',
        iconOnly: true,
        text: true,
+        title: 'Close',
      },
    ]}
  />
--- a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
@ -16,7 +16,7 @@ class PopupExample extends React.Component {
        {/* CUSTOM DOM ELEMENT is used as target for Popup */}
        <Popup
          target={this.state.popupTarget}
-          trigger={<Button icon="qna" circular styles={{ cursor: 'pointer' }} />}
+          trigger={<Button icon="qna" circular styles={{ cursor: 'pointer' }} title="Q&amp;A" />}
          content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
          position="below"
        />
--- a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
@ -19,7 +19,7 @@ class PopupExample extends React.Component {
          content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
          position="below"
        >
-          <Button icon="qna" circular styles={{ cursor: 'pointer' }} />
+          <Button icon="qna" circular styles={{ cursor: 'pointer' }} title="Q&amp;A" />
        </Popup>

        <div style={{ marginLeft: 10 }}>
--- a/docs/src/examples/components/Popup/Types/PopupExample.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExample.shorthand.tsx
@ -1,6 +1,8 @@
 import * as React from 'react'
 import { Button, Popup } from '@stardust-ui/react'

-const PopupExample = () => <Popup trigger={<Button icon="more" />} content="Hello from popup!" />
+const PopupExample = () => (
+  <Popup trigger={<Button icon="more" title="Show popup" />} content="Hello from popup!" />
+)

 export default PopupExample
--- a/docs/src/examples/components/Popup/Types/PopupExample.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExample.tsx
@ -3,7 +3,7 @@ import { Button, Popup } from '@stardust-ui/react'

 const PopupExample = () => (
  <Popup content="Hello from popup!">
-    <Button icon="more" />
+    <Button icon="more" title="Show popup" />
  </Popup>
 )

--- a/docs/src/examples/components/Popup/Types/PopupExampleInline.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExampleInline.shorthand.tsx
@ -3,7 +3,7 @@ import { Button, Popup } from '@stardust-ui/react'

 const PopupExampleInline = () => (
  <Popup
-    trigger={<Button icon="more" />}
+    trigger={<Button icon="more" title="Show popup" />}
    content="This popup is rendered next to the trigger."
    inline
  />
--- a/docs/src/examples/components/Popup/Types/PopupExampleInline.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExampleInline.tsx
@ -3,7 +3,7 @@ import { Button, Popup } from '@stardust-ui/react'

 const PopupExampleInline = () => (
  <Popup content="This popup is rendered next to the trigger." inline>
-    <Button icon="more" />
+    <Button icon="more" title="Show popup" />
  </Popup>
 )

--- a/docs/src/examples/components/Popup/Types/PopupExamplePointing.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExamplePointing.shorthand.tsx
@ -18,6 +18,7 @@ const PopupWithButton = props => (
      <Button
        icon={props.icon}
        styles={{ padding: props.padding, height: '64px', minWidth: '64px' }}
+        title="Show popup"
      />
    }
  />
--- a/docs/src/examples/components/Popup/Variations/PopupExampleOffset.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Variations/PopupExampleOffset.shorthand.tsx
@ -10,6 +10,7 @@ const renderButton = () => (
      rotate: -45,
    }}
    styles={{ height: '80px', minWidth: '80px', padding: 0 }}
+    title="Show popup"
  />
 )

--- a/docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
@ -27,6 +27,7 @@ const PopupExamplePosition = () => {
          <Button
            icon={{ name: iconNames[position], circular: true, bordered: true }}
            styles={buttonStyles}
+            title="Show popup"
          />
        }
        content={
--- a/docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx
+++ b/docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx
@ -34,6 +34,7 @@ const PopupExamplePosition = () => {
        <Button
          icon={{ name: iconNames[position], circular: true, bordered: true }}
          styles={buttonStyles}
+          title="Show popup"
        />
      </Popup>
    </Grid>
--- a/docs/src/examples/components/Slider/Usage/SliderExampleAction.shorthand.tsx
+++ b/docs/src/examples/components/Slider/Usage/SliderExampleAction.shorthand.tsx
@ -56,6 +56,7 @@ const SliderExampleActionShorthand = () => {
        iconOnly
        icon={state.mute ? 'mic-off' : 'mic'}
        onClick={() => dispatch({ type: 'toggle_mute' })}
+        title="Toggle mute"
      />
      <Slider {...commonProps} vertical={vertical} />
      <Input type="number" input={{ styles: { width: '64px' } }} {...commonProps} />
--- a/docs/src/examples/components/Toolbar/Content/ToolbarExampleCustomContent.shorthand.tsx
+++ b/docs/src/examples/components/Toolbar/Content/ToolbarExampleCustomContent.shorthand.tsx
@ -5,7 +5,7 @@ const ToolbarExampleCustomContentShorthand = () => (
  <Toolbar
    aria-label="Toolbar can contain custom content"
    items={[
-      { key: 'bold', icon: 'bold' },
+      { key: 'bold', icon: 'bold', title: 'Bold' },
      {
        key: 'custom-text',
        content: <Text content="Text" />,
--- a/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenu.shorthand.tsx
+++ b/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenu.shorthand.tsx
@ -21,6 +21,7 @@ const ToolbarExampleMenuShorthand = () => {
          key: 'more',
          icon: 'more',
          active: menuOpen,
+          title: 'More',
          menu: {
            items: [
              { key: 'play', content: 'Play', icon: 'play' },
--- a/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuItemToggle.shorthand.tsx
+++ b/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuItemToggle.shorthand.tsx
@ -22,6 +22,7 @@ const ToolbarExampleMenuItemToggle = () => {
          key: 'more',
          active: menuOpen,
          icon: 'more',
+          title: 'More',
          menu: [
            {
              key: 'bold',
--- a/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuRadioGroup.shorthand.tsx
+++ b/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuRadioGroup.shorthand.tsx
@ -13,6 +13,7 @@ const ToolbarExampleMenuRadioGroup = () => {
          key: 'more',
          active: menuOpen,
          icon: 'more',
+          title: 'More',
          menu: [
            {
              key: 'group',
--- a/docs/src/examples/components/Toolbar/Content/ToolbarExampleOverflow.shorthand.tsx
+++ b/docs/src/examples/components/Toolbar/Content/ToolbarExampleOverflow.shorthand.tsx
@ -9,6 +9,7 @@ const ToolbarExampleOverflow = () => {
    key: `b${i}`,
    content: `${icons[i % icons.length]} #${i}`,
    icon: icons[i % icons.length],
+    title: `${icons[i % icons.length]} #${i}`,
  }))

  const toolbarItems = itemData.map(item => {
@ -22,6 +23,7 @@ const ToolbarExampleOverflow = () => {
      items={toolbarItems}
      overflow
      overflowOpen={overflowOpen}
+      overflowItem={{ title: 'More' }}
      onOverflowOpenChange={(e, { overflowOpen }) => {
        setOverflowOpen(overflowOpen)
      }}
--- a/docs/src/examples/components/Toolbar/Content/ToolbarExamplePopup.shorthand.tsx
+++ b/docs/src/examples/components/Toolbar/Content/ToolbarExamplePopup.shorthand.tsx
@ -37,6 +37,7 @@ const ToolbarExamplePopupShorthand = () => {
          key: 'highlight',
          icon: { name: 'highlight', outline: true },
          active: highlightOpen,
+          title: 'Highlight',
          popup: {
            content: (
              <HighlightPopup
@ -55,6 +56,7 @@ const ToolbarExamplePopupShorthand = () => {
          key: 'font-color',
          icon: { name: 'font-color', outline: true },
          active: fontColorActive,
+          title: 'Font color',
          popup: {
            content: <Input icon="search" placeholder="Search..." />,
            onOpenChange: () => {
--- a/docs/src/examples/components/Toolbar/Types/ToolbarExampleEditor.shorthand.tsx
+++ b/docs/src/examples/components/Toolbar/Types/ToolbarExampleEditor.shorthand.tsx
@ -80,6 +80,7 @@ const ToolbarExampleShorthand = () => {
            kind: 'toggle',
            active: isBold,
            icon: { name: 'bold', outline: true },
+            title: 'Toggle bold',
            onClick: () => {
              setBold(!isBold)
            },
@ -89,6 +90,7 @@ const ToolbarExampleShorthand = () => {
            kind: 'toggle',
            active: isItalic,
            icon: { name: 'italic', outline: true },
+            title: 'Toggle italic',
            onClick: () => {
              setItalic(!isItalic)
            },
@ -98,6 +100,7 @@ const ToolbarExampleShorthand = () => {
            kind: 'toggle',
            active: isUnderline,
            icon: { name: 'underline', outline: true },
+            title: 'Toggle underline',
            onClick: () => {
              setUnderline(!isUnderline)
            },
@ -108,6 +111,7 @@ const ToolbarExampleShorthand = () => {
            active: isStrike,
            disabled: true,
            icon: { name: 'strike', outline: true },
+            title: 'Toggle strike',
            onClick: () => {
              setStrike(!isStrike)
            },
@ -117,6 +121,7 @@ const ToolbarExampleShorthand = () => {
            key: 'highlight',
            icon: { name: 'highlight', outline: true },
            active: highlightOpen,
+            title: 'Highlight',
            popup: {
              content: (
                <HighlightPopup
@ -135,6 +140,7 @@ const ToolbarExampleShorthand = () => {
            key: 'font-color',
            icon: { name: 'font-color', outline: true },
            active: fontColorActive,
+            title: 'Font color',
            popup: {
              content: <Input icon="search" placeholder="Search..." />,
              onOpenChange: () => {
@ -142,8 +148,12 @@ const ToolbarExampleShorthand = () => {
              },
            },
          },
-          { key: 'font-size', icon: { name: 'font-size', outline: true } },
-          { key: 'remove-format', icon: { name: 'remove-format', outline: true } },
+          { key: 'font-size', icon: { name: 'font-size', outline: true }, title: 'Font size' },
+          {
+            key: 'remove-format',
+            icon: { name: 'remove-format', outline: true },
+            title: 'Remove formatting',
+          },
          { key: 'divider2', kind: 'divider' },
          {
            key: 'radiogroup',
@ -153,6 +163,7 @@ const ToolbarExampleShorthand = () => {
                key: 'bullets',
                icon: { name: 'bullets', outline: true },
                active: bulletListActive,
+                title: 'Bullets',
                onClick: () => {
                  setBulletListActive(!bulletListActive)

@ -160,12 +171,12 @@ const ToolbarExampleShorthand = () => {
                  setNumberListActive(false)
                  setToDoListActive(false)
                },
-                'aria-label': 'bullet list',
              },
              {
                key: 'number-list',
                icon: { name: 'number-list', outline: true },
                active: numberListActive,
+                title: 'Number list',
                onClick: () => {
                  setNumberListActive(!numberListActive)

@ -173,12 +184,12 @@ const ToolbarExampleShorthand = () => {
                  setBulletListActive(false)
                  setToDoListActive(false)
                },
-                'aria-label': 'number list',
              },
              {
                key: 'to-do-list',
                icon: { name: 'to-do-list', outline: true },
                active: toDoListActive,
+                title: 'ToDo list',
                onClick: () => {
                  setToDoListActive(!toDoListActive)

@ -186,18 +197,18 @@ const ToolbarExampleShorthand = () => {
                  setBulletListActive(false)
                  setNumberListActive(false)
                },
-                'aria-label': 'to do list',
              },
            ],
          },
          { key: 'divider3', kind: 'divider' },
-          { key: 'outdent', icon: { name: 'outdent', outline: true } },
-          { key: 'indent', icon: { name: 'indent', outline: true } },
+          { key: 'outdent', icon: { name: 'outdent', outline: true }, title: 'Outdent' },
+          { key: 'indent', icon: { name: 'indent', outline: true }, title: 'Indent' },
          { key: 'divider4', kind: 'divider' },
          {
            key: 'more',
            icon: { name: 'more', outline: true },
            active: moreMenuOpen,
+            title: 'More',
            menu: [
              {
                content: 'Quote',
--- a/docs/src/examples/components/Toolbar/Usage/ToolbarExampleActionPopupInMenu.shorthand.tsx
+++ b/docs/src/examples/components/Toolbar/Usage/ToolbarExampleActionPopupInMenu.shorthand.tsx
@ -35,6 +35,7 @@ const ToolbarExampleActionPopupInMenu = () => {
        {
          icon: 'more',
          active: menuOpen,
+          title: 'More',
          menu: [
            {
              content: 'Open Popup',
--- a/docs/src/examples/components/Toolbar/Usage/ToolbarExamplePopupInMenu.shorthand.tsx
+++ b/docs/src/examples/components/Toolbar/Usage/ToolbarExamplePopupInMenu.shorthand.tsx
@ -13,6 +13,7 @@ const ToolbarExamplePopupInMenu = () => {
          key: 'menu1',
          icon: 'more',
          active: menu1Open,
+          title: 'More',
          menu: [
            {
              key: 'popup',
@ -29,11 +30,13 @@ const ToolbarExamplePopupInMenu = () => {
          key: 'italic',
          kind: 'toggle' as ToolbarItemShorthandKinds,
          icon: { name: 'italic', outline: true },
+          title: 'Italic',
        },
        {
          key: 'menu2',
          icon: 'more',
          active: menu2Open,
+          title: 'More',
          menu: [
            {
              key: 'popup',
--- a/packages/ability-attributes/package.json
+++ b/packages/ability-attributes/package.json
@ -5,10 +5,10 @@
  "author": "Marat Abdullin <marata@microsoft.com>",
  "bugs": "https://github.com/stardust-ui/react/issues",
  "dependencies": {
-    "ability-attributes": "^0.0.5"
+    "ability-attributes": "^0.0.8"
  },
  "devDependencies": {
-    "ability-attributes-generator": "^0.0.5"
+    "ability-attributes-generator": "^0.0.8"
  },
  "files": [
    "dist"
--- a/packages/ability-attributes/schema.json
+++ b/packages/ability-attributes/schema.json
@ -2,12 +2,12 @@
  "version": "1.0",
  "constraints": {
    "$atomic": {
-      "xpath": "not(boolean((.//*[@role and @role != 'none' and @role != 'presentation'] | .//a | .//area | .//button | .//input | .//object | .//select | .//textarea)[ancestor-or-self::*[@aria-hidden != 'true']]))",
-      "description": "Component cannot contain other accessible components"
+      "xpath": "not(boolean((.//*[@role and @role != 'none' and @role != 'presentation'] | .//a | .//area | .//button | .//input | .//object | .//select | .//textarea)[not(ancestor-or-self::*/@aria-hidden = 'true')]))",
+      "description": "Element cannot contain other accessible elements"
    },
-    "$hasText": {
-      "xpath": ".//text()[normalize-space(.) != '']",
-      "description": "Component must contain text nodes"
+    "$hasTitleOrText": {
+      "xpath": "boolean(@title and @title != '') or boolean(.//text()[normalize-space(.) != ''])",
+      "description": "Element must contain text nodes or title attribute"
    },
    "$existingIDs": {
      "js": "checkIdentifiers",
@ -15,13 +15,37 @@
    }
  },
  "parameters": {
+    "$title": {
+      "name": "title",
+      "attributes": [
+        {
+          "name": "title",
+          "constraints": [
+            {
+              "xpath": "normalize-space(@title) != ''",
+              "description": "title attribute value cannot be empty"
+            },
+            {
+              "js": "equalsToAccessibilityLabelIfAny",
+              "description": "In order to not confuse the users, the title attribute value should be equal to the accessibility label value"
+            }
+          ]
+        }
+      ]
+    },
    "$label": {
      "one": [
        {
          "name": "label",
          "attributes": [
            {
-              "name": "aria-label"
+              "name": "aria-label",
+              "constraints": [
+                {
+                  "xpath": "normalize-space(@aria-label) != ''",
+                  "description": "aria-label attribute value cannot be empty"
+                }
+              ]
            }
          ]
        },
@ -97,7 +121,7 @@
            },
            {
              "parameter": false,
-              "attribute": false
+              "attribute": [false, "false"]
            }
          ]
        },
@ -140,16 +164,116 @@
      "attributes": [
        {
          "name": "aria-haspopup",
+          "value": [
+            {
+              "parameter": true,
+              "attribute": ["true", "menu"]
+            },
+            {
+              "parameter": false,
+              "attribute": [false, "false"]
+            }
+          ]
+        }
+      ]
+    },
+    "$isExpanded": {
+      "name": "isExpanded",
+      "attributes": [
+        {
+          "name": "aria-expanded",
          "value": [
            {
              "parameter": true,
              "attribute": "true"
            },
+            {
+              "parameter": false,
+              "attribute": [false, "false"]
+            }
+          ]
+        }
+      ]
+    },
+    "$isPressed": {
+      "name": "isPressed",
+      "attributes": [
+        {
+          "name": "aria-pressed",
+          "value": [
+            {
+              "parameter": true,
+              "attribute": "true"
+            },
+            {
+              "parameter": false,
+              "attribute": [false, "false"]
+            }
+          ]
+        }
+      ]
+    },
+    "$checked": {
+      "name": "checked",
+      "attributes": [
+        {
+          "name": "checked",
+          "value": [
+            {
+              "parameter": true,
+              "attribute": true
+            },
            {
              "parameter": false,
              "attribute": false
            }
          ]
+        },
+        {
+          "name": "aria-checked",
+          "value": [
+            {
+              "parameter": true,
+              "attribute": "true"
+            },
+            {
+              "parameter": false,
+              "attribute": [false, "false"]
+            }
+          ],
+          "optional": true
+        }
+      ]
+    },
+    "$checked-custom": {
+      "name": "checked",
+      "attributes": [
+        {
+          "name": "aria-checked",
+          "value": [
+            {
+              "parameter": true,
+              "attribute": "true"
+            },
+            {
+              "parameter": false,
+              "attribute": [false, "false"]
+            }
+          ]
+        },
+        {
+          "name": "checked",
+          "value": [
+            {
+              "parameter": true,
+              "attribute": true
+            },
+            {
+              "parameter": false,
+              "attribute": false
+            }
+          ],
+          "optional": true
        }
      ]
    }
@ -194,7 +318,7 @@
        {
          "ref": "$label",
          "optional": {
-            "ref": "$hasText"
+            "ref": "$hasTitleOrText"
          }
        }
      ],
@ -235,6 +359,10 @@
        }
      ],
      "parameters": [
+        {
+          "ref": "$title",
+          "optional": true
+        },
        {
          "rel": "@label"
        },
@ -246,10 +374,20 @@
          "rel": "@tabbable"
        },
        {
-          "rel": "@disabled"
+          "rel": "@disabled",
+          "overridable": "disabled"
        },
        {
          "ref": "$hasPopup",
+          "optional": true,
+          "overridable": "hasPopup"
+        },
+        {
+          "ref": "$isExpanded",
+          "optional": true
+        },
+        {
+          "ref": "$isPressed",
          "optional": true
        }
      ],
@ -259,7 +397,7 @@
            "@label": {
              "ref": "$label",
              "optional": {
-                "ref": "$hasText"
+                "ref": "$hasTitleOrText"
              }
            },
            "@tabbable": {
@ -275,7 +413,8 @@
            {
              "name": "role",
              "value": "button",
-              "optional": true
+              "optional": true,
+              "overridable": "role"
            }
          ]
        },
@ -285,7 +424,7 @@
              "ref": "$label",
              "optional": {
                "xpath": "normalize-space(@value) != ''",
-                "description": "Component must contain value attribute"
+                "description": "Element must contain value attribute"
              }
            },
            "@tabbable": {
@ -300,12 +439,14 @@
          "attributes": [
            {
              "name": "type",
-              "value": ["button", "submit", "reset"]
+              "value": ["button", "submit", "reset"],
+              "overridable": "type"
            },
            {
              "name": "role",
              "value": "button",
-              "optional": true
+              "optional": true,
+              "overridable": "role"
            }
          ]
        },
@ -314,7 +455,7 @@
            "@label": {
              "ref": "$label",
              "optional": {
-                "ref": "$hasText"
+                "ref": "$hasTitleOrText"
              }
            },
            "@tabbable": {
@ -329,7 +470,8 @@
          "attributes": [
            {
              "name": "role",
-              "value": "button"
+              "value": "button",
+              "overridable": "role"
            },
            {
              "ref": "$tabindex"
@ -337,6 +479,181 @@
          ]
        }
      }
+    },
+    "LoadingButton": {
+      "inherits": "Button",
+      "parameters": [
+        {
+          "overrides": "disabled",
+          "rel": "@disabled"
+        }
+      ],
+      "tags": {
+        "<button>": {
+          "parameters": {
+            "@disabled": {
+              "optional": true,
+              "name": "disabled",
+              "attributes": [
+                {
+                  "name": "aria-disabled",
+                  "value": [
+                    {
+                      "parameter": true,
+                      "attribute": "true"
+                    },
+                    {
+                      "parameter": false,
+                      "attribute": [false, "false"]
+                    }
+                  ]
+                }
+              ]
+            }
+          }
+        }
+      }
+    },
+    "PopupButton": {
+      "inherits": "Button",
+      "parameters": [
+        {
+          "overrides": "hasPopup",
+          "ref": null
+        }
+      ],
+      "tags": {
+        "<button>": {
+          "attributes": [
+            {
+              "name": "aria-haspopup",
+              "value": "true"
+            }
+          ]
+        },
+        "<input>": {
+          "attributes": [
+            {
+              "name": "aria-haspopup",
+              "value": "true"
+            }
+          ]
+        },
+        "<div>, <span>": {
+          "attributes": [
+            {
+              "name": "aria-haspopup",
+              "value": "true"
+            }
+          ]
+        }
+      }
+    },
+    "ToolbarItem": {
+      "inherits": "Button"
+    },
+    "Checkbox": {
+      "inherits": "Button",
+      "parameters": [
+        {
+          "rel": "@checked"
+        }
+      ],
+      "tags": {
+        "<button>": {
+          "parameters": {
+            "@checked": {
+              "ref": "$checked",
+              "optional": true
+            }
+          },
+          "attributes": [
+            {
+              "name": "role",
+              "value": "checkbox",
+              "overrides": "role",
+              "overridable": "role"
+            }
+          ]
+        },
+        "<input>": {
+          "parameters": {
+            "@checked": {
+              "ref": "$checked",
+              "optional": true
+            }
+          },
+          "attributes": [
+            {
+              "name": "type",
+              "value": "checkbox",
+              "overrides": "type",
+              "overridable": "type"
+            },
+            {
+              "name": "role",
+              "value": "checkbox",
+              "optional": true,
+              "overrides": "role",
+              "overridable": "role"
+            }
+          ]
+        },
+        "<div>, <span>": {
+          "parameters": {
+            "@checked": {
+              "ref": "$checked-custom",
+              "optional": true
+            }
+          },
+          "attributes": [
+            {
+              "name": "role",
+              "value": "checkbox",
+              "overrides": "role",
+              "overridable": "role"
+            }
+          ]
+        }
+      }
+    },
+    "RadioGroupItem": {
+      "inherits": "Checkbox",
+      "tags": {
+        "<button>": {
+          "attributes": [
+            {
+              "name": "role",
+              "value": "radio",
+              "overrides": "role"
+            }
+          ]
+        },
+        "<input>": {
+          "attributes": [
+            {
+              "name": "type",
+              "value": "radio",
+              "overrides": "type"
+            },
+            {
+              "name": "role",
+              "value": "radio",
+              "optional": true,
+              "overrides": "role"
+            }
+          ]
+        },
+        "<div>, <span>": {
+          "attributes": [
+            {
+              "name": "role",
+              "value": "radio",
+              "overrides": "role"
+            }
+          ]
+        }
+      }
    }
  }
 }
--- a/packages/accessibility/src/behaviors/Button/buttonBehavior.ts
+++ b/packages/accessibility/src/behaviors/Button/buttonBehavior.ts
@ -1,5 +1,5 @@
 import * as keyboardKey from 'keyboard-key'
-import { Accessibility } from '../../types'
+import { Accessibility, AccessibilityDefinition } from '../../types'

 /**
 * @specification
@ -9,26 +9,37 @@ import { Accessibility } from '../../types'
 * Adds attribute 'aria-disabled=true' based on the property 'loading'.
 * Triggers 'performClick' action with 'Enter' or 'Spacebar' on 'root'.
 */
-const buttonBehavior: Accessibility<ButtonBehaviorProps> = props => ({
-  attributes: {
-    root: {
-      role: props.as === 'button' ? undefined : 'button',
-      tabIndex: props.as === 'button' ? undefined : 0,
-      'aria-disabled': props.disabled || props.loading,
+const buttonBehavior: Accessibility<ButtonBehaviorProps> = props => {
+  const definition: AccessibilityDefinition = {
+    attributes: {
+      root: {
+        role: props.as === 'button' ? undefined : 'button',
+        tabIndex: props.as === 'button' ? undefined : 0,
+        disabled:
+          props.disabled && !props.loading ? (props.as === 'button' ? true : undefined) : undefined,
+        'aria-disabled': props.disabled || props.loading,
+      },
    },
-  },

-  keyActions: {
-    root: {
-      ...(props.as !== 'button' &&
-        props.as !== 'a' && {
-          performClick: {
-            keyCombinations: [{ keyCode: keyboardKey.Enter }, { keyCode: keyboardKey.Spacebar }],
-          },
-        }),
+    keyActions: {
+      root: {
+        ...(props.as !== 'button' &&
+          props.as !== 'a' && {
+            performClick: {
+              keyCombinations: [{ keyCode: keyboardKey.Enter }, { keyCode: keyboardKey.Spacebar }],
+            },
+          }),
+      },
    },
-  },
-})
+  }
+
+  if (process.env.NODE_ENV !== 'production' && props.loading) {
+    // Override the default trigger's accessibility schema class.
+    definition.attributes.root['data-aa-class'] = 'LoadingButton'
+  }
+
+  return definition
+}

 export default buttonBehavior

--- a/packages/accessibility/src/behaviors/Popup/popupBehavior.ts
+++ b/packages/accessibility/src/behaviors/Popup/popupBehavior.ts
@ -14,12 +14,23 @@ import { Accessibility } from '../../types'
 */
 const popupBehavior: Accessibility<PopupBehaviorProps> = props => {
  const onAsArray = _.isArray(props.on) ? props.on : [props.on]
+  const tabbableTriggerProps = props.tabbableTrigger
+    ? { tabIndex: getAriaAttributeFromProps('tabIndex', props, 0) }
+    : undefined
+
+  if (tabbableTriggerProps) {
+    tabbableTriggerProps['aria-haspopup'] = 'true'
+
+    if (process.env.NODE_ENV !== 'production') {
+      // Override the default trigger's accessibility schema class.
+      tabbableTriggerProps['data-aa-class'] = 'PopupButton'
+    }
+  }
+
  return {
    attributes: {
      trigger: {
-        ...(props.tabbableTrigger
-          ? { tabIndex: getAriaAttributeFromProps('tabIndex', props, 0) }
-          : undefined),
+        ...tabbableTriggerProps,
        'aria-disabled': props.disabled,
      },
      popup: {
--- a/packages/accessibility/src/behaviors/Toolbar/toolbarRadioGroupItemBehavior.ts
+++ b/packages/accessibility/src/behaviors/Toolbar/toolbarRadioGroupItemBehavior.ts
@ -1,4 +1,4 @@
-import { Accessibility } from '../../types'
+import { Accessibility, AccessibilityDefinition } from '../../types'
 import buttonBehavior, { ButtonBehaviorProps } from '../Button/buttonBehavior'

 /**
@ -8,16 +8,25 @@ import buttonBehavior, { ButtonBehaviorProps } from '../Button/buttonBehavior'
 *  Adds attribute 'aria-disabled=true' based on the property 'disabled'. This can be overriden by providing 'aria-disabled' property directly to the component.
 *  Triggers 'performClick' action with 'Enter' or 'Spacebar' on 'root'.
 */
-const toolbarRadioGroupItemBehavior: Accessibility<ToolbarRadioGroupItemBehaviorProps> = props => ({
-  attributes: {
-    root: {
-      role: 'radio',
-      'aria-checked': props.active,
-      'aria-disabled': props.disabled,
+const toolbarRadioGroupItemBehavior: Accessibility<ToolbarRadioGroupItemBehaviorProps> = props => {
+  const definition: AccessibilityDefinition = {
+    attributes: {
+      root: {
+        role: 'radio',
+        'aria-checked': props.active,
+        'aria-disabled': props.disabled,
+      },
    },
-  },
-  keyActions: buttonBehavior(props).keyActions,
-})
+    keyActions: buttonBehavior(props).keyActions,
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    // Override the default trigger's accessibility schema class.
+    definition.attributes.root['data-aa-class'] = 'RadioGroupItem'
+  }
+
+  return definition
+}

 export default toolbarRadioGroupItemBehavior

--- a/packages/accessibility/src/types.ts
+++ b/packages/accessibility/src/types.ts
@ -128,7 +128,15 @@ export interface AriaRelationshipAttributes {
  'aria-rowspan'?: number
 }

-export interface AccessibilityAttributes extends AriaWidgetAttributes, AriaRelationshipAttributes {
+export interface ElementStateAttributes {
+  disabled?: boolean
+  checked?: boolean
+}
+
+export interface AccessibilityAttributes
+  extends AriaWidgetAttributes,
+    AriaRelationshipAttributes,
+    ElementStateAttributes {
  role?: AriaRole
  tabIndex?: number
  id?: string
--- a/packages/code-sandbox/src/knobComponents.tsx
+++ b/packages/code-sandbox/src/knobComponents.tsx
@ -6,6 +6,7 @@ const knobComponents: Partial<KnobComponents> = {
  KnobBoolean: props => (
    <Checkbox
      checked={props.value}
+      title="Toggle"
      onChange={(e, data) => {
        props.setValue(data.checked)
      }}
--- a/packages/react/src/lib/renderComponent.tsx
+++ b/packages/react/src/lib/renderComponent.tsx
@ -91,9 +91,12 @@ const getAccessibility = (
          definition.attributes[slotName] = {}
        }

-        definition.attributes[slotName]['data-aa-class'] = `${displayName}${
-          slotName === 'root' ? '' : `__${slotName}`
-        }`
+        const slotAttributes = definition.attributes[slotName]
+        if (!('data-aa-class' in slotAttributes)) {
+          definition.attributes[slotName]['data-aa-class'] = `${displayName}${
+            slotName === 'root' ? '' : `__${slotName}`
+          }`
+        }
      })
    }
  }
--- a/yarn.lock
+++ b/yarn.lock
@ -2206,19 +2206,26 @@ abbrev@1:
  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==

-ability-attributes-generator@^0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/ability-attributes-generator/-/ability-attributes-generator-0.0.5.tgz#bb3ab4afad5f3a10fb1ebb1fb138efc6e3e9d488"
-  integrity sha512-YJg/3m/sMjTKp4BaBxBguefpvjIoNxTALAJuIPjMbalrBtCDQ4epIm7t6+opmag1k2L2OPC7kWWV2bBTP/4UTA==
+ability-attributes-generator@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ability-attributes-generator/-/ability-attributes-generator-0.0.8.tgz#e2065ed6978ed2acd350aa90cad2fcb86882a978"
+  integrity sha512-GN7lfbyOnpYXBEH2BT6e9gsXwna3v+nOfojzHTKJKuo6HiT8seCSLxqWGbxLW/RMNacqIjJ2OA04d4ufzPx9yw==
  dependencies:
-    ability-attributes "^0.0.5"
-    ajv "^6.10.0"
+    ability-attributes "^0.0.8"
+    ajv "^6.10.2"
    commander "^2.20.0"

-ability-attributes@^0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/ability-attributes/-/ability-attributes-0.0.5.tgz#9496e904b2701fbe98f487411d1cbdf6ab86137f"
-  integrity sha512-H4i+hTuIEiTh6dsFGCG+h0G7nnJdTdb0mr3q35+XgATRlEWJwUie8SsDZhq7dKzc2UrgS1goVoYwMuHOWDHq2g==
+ability-attributes-js-constraints@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ability-attributes-js-constraints/-/ability-attributes-js-constraints-0.0.8.tgz#f954ae16a90c92bc2d25a7e20c1ec292749658e0"
+  integrity sha512-+TjS0GcQnFaX0thTs+sXiGtNelPcy6odeN8hKntd1KxsnFtqyrC3l2i55s+z3rRzei6BvkoSHvkKEOjk0E5UjA==
+
+ability-attributes@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ability-attributes/-/ability-attributes-0.0.8.tgz#b7fca379a5ba5147e4e867ba80187142db4d49ce"
+  integrity sha512-GU2Gd1nAUzvTEu4+615DKCf7OkWf+rL5kLmsi3Fg+nY7fhjrMT1ZwsU8MJ8hqilipspq1Q2yIuUYj4q8l2W8nQ==
+  dependencies:
+    ability-attributes-js-constraints "^0.0.8"

 accepts@~1.3.5, accepts@~1.3.7:
  version "1.3.7"
@ -2316,7 +2323,7 @@ ajv@^5.1.0:
    fast-json-stable-stringify "^2.0.0"
    json-schema-traverse "^0.3.0"

-ajv@^6.1.0, ajv@^6.10.0, ajv@^6.5.5, ajv@^6.9.1:
+ajv@^6.1.0, ajv@^6.10.2, ajv@^6.5.5, ajv@^6.9.1:
  version "6.10.2"
  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.2.tgz#d3cea04d6b017b2894ad69040fec8b623eb4bd52"
  integrity sha512-TXtUUEYHuaTEbLZWIKUr5pmBuhDLy+8KYtPYdcV8qC+pOZL+NKqYwvWSRrVXHn+ZmRRAu8vJTAznH7Oag6RVRw==