Extending the schema, fixing the Docsite accordingly

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))

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>
     )

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}
   />
 )

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')}
       />

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' },
     ]}
   />
 )

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' },
     ]}
   />
 )

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

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>

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>

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" />

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" />

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 />

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

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>

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>
   ))

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>
   ))

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',
       },
     ]}
   />

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"
         />

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 }}>

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

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>
 )
 

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
   />

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>
 )
 

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"
       />
     }
   />

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"
   />
 )
 

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={

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>

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} />

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" />,

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' },

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',

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',

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)
       }}

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: () => {