undoing euiButtonIcon change and fixing euiButtonGroup styling

elastic · Mar 31, 2020 · 65fef52 · 65fef52
1 parent 8402c4e
commit 65fef52
Show file tree

Hide file tree

Showing 49 changed files with 616 additions and 760 deletions.
diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -123,7 +123,7 @@ export class GuidePageChrome extends Component {
       <EuiButtonIcon
         iconType="gear"
         onClick={this.onButtonClick.bind(this)}
-        label="Open EUI options menu"
+        aria-label="Open EUI options menu"
         color="text"
       />
     );

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
@@ -194,8 +194,6 @@ import { ToastExample } from './views/toast/toast_example';
 
 import { ToolTipExample } from './views/tool_tip/tool_tip_example';
 
-// import { ToggleExample } from './views/toggle/toggle_example';
-
 import { WindowEventExample } from './views/window_event/window_event_example';
 
 import { Changelog } from './views/package/changelog';
@@ -423,7 +421,6 @@ const navigation = [
       PortalExample,
       ResizeObserverExample,
       ResponsiveExample,
-      // ToggleExample,
       WindowEventExample,
     ].map(example => createExample(example)),
   },

diff --git a/src-docs/src/views/accordion/accordion_form.js b/src-docs/src/views/accordion/accordion_form.js
@@ -72,7 +72,7 @@ const extraAction = (
     iconType="cross"
     color="danger"
     className="euiAccordionForm__extraAction"
-    label="Delete"
+    aria-label="Delete"
   />
 );
 

diff --git a/src-docs/src/views/button/button_as_link.js b/src-docs/src/views/button/button_as_link.js
@@ -25,7 +25,7 @@ export default () => (
         <EuiButtonIcon
           href="http://www.elastic.co"
           iconType="link"
-          label="This is a link"
+          aria-label="This is a link"
         />
       </EuiFlexItem>
     </EuiFlexGroup>
@@ -47,7 +47,7 @@ export default () => (
         <EuiButtonIcon
           href="http://www.elastic.co"
           iconType="link"
-          label="This is a link"
+          aria-label="This is a link"
           isDisabled
         />
       </EuiFlexItem>

diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
@@ -62,7 +62,7 @@ export default class extends Component {
             color="ghost"
             iconType="user"
             onClick={() => window.alert('Button clicked')}
-            label="Your account"
+            aria-label="Your account"
           />
         </EuiFlexItem>
 

diff --git a/src-docs/src/views/button/button_icon.js b/src-docs/src/views/button/button_icon.js
@@ -24,7 +24,7 @@ export default () => (
           color={color}
           onClick={() => window.alert('Button clicked')}
           iconType="arrowRight"
-          label="Next"
+          aria-label="Next"
           disabled={color === 'disabled' ? true : false}
         />
       </EuiFlexItem>

diff --git a/src-docs/src/views/button/button_toggle.js b/src-docs/src/views/button/button_toggle.js
@@ -48,13 +48,13 @@ export default class extends Component {
         </EuiButton>
         &emsp;
         <EuiButtonIcon
-          label={this.state.toggle2On ? 'Play' : 'Pause'}
+          aria-label={this.state.toggle2On ? 'Play' : 'Pause'}
           iconType={this.state.toggle2On ? 'play' : 'pause'}
           onClick={this.onToggle2Change}
         />
         &emsp;
         <EuiButtonIcon
-          label="Autosave"
+          aria-label="Autosave"
           iconType="save"
           aria-pressed={this.state.onToggle3Change}
           onClick={this.onToggle3Change}

diff --git a/src-docs/src/views/datagrid/control_columns.js b/src-docs/src/views/datagrid/control_columns.js
@@ -105,7 +105,7 @@ const SelectionButton = () => {
             <EuiFlexGroup alignItems="center" component="span" gutterSize="s">
               <EuiFlexItem grow={false}>
                 <EuiButtonIcon
-                  label="Pin selected items"
+                  aria-label="Pin selected items"
                   iconType="pin"
                   color="text"
                 />
@@ -118,7 +118,7 @@ const SelectionButton = () => {
             <EuiFlexGroup alignItems="center" component="span" gutterSize="s">
               <EuiFlexItem grow={false}>
                 <EuiButtonIcon
-                  label="Delete selected items"
+                  aria-label="Delete selected items"
                   iconType="trash"
                   color="text"
                 />
@@ -220,7 +220,7 @@ const FlyoutRowCell = rowIndex => {
         color="text"
         iconType="eye"
         iconSize="s"
-        label="View details"
+        aria-label="View details"
         onClick={() => setIsFlyoutOpen(!isFlyoutOpen)}
       />
       {flyout}
@@ -258,7 +258,7 @@ const trailingControlColumns = [
             panelPaddingSize="s"
             button={
               <EuiButtonIcon
-                label="show actions"
+                aria-label="show actions"
                 iconType="boxesHorizontal"
                 color="text"
                 onClick={() => setIsPopoverOpen(!isPopoverOpen)}
@@ -275,7 +275,7 @@ const trailingControlColumns = [
                   gutterSize="s">
                   <EuiFlexItem grow={false}>
                     <EuiButtonIcon
-                      label="Pin selected items"
+                      aria-label="Pin selected items"
                       iconType="pin"
                       color="text"
                     />
@@ -291,7 +291,7 @@ const trailingControlColumns = [
                   gutterSize="s">
                   <EuiFlexItem grow={false}>
                     <EuiButtonIcon
-                      label="Delete selected items"
+                      aria-label="Delete selected items"
                       iconType="trash"
                       color="text"
                     />

diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
@@ -33,7 +33,7 @@ const columns = [
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButtonIcon
-            label="Column header email"
+            aria-label="Column header email"
             iconType="gear"
             color="text"
             onClick={() => alert('Email Icon Clicked!')}
@@ -103,7 +103,7 @@ const trailingControlColumns = [
             anchorPosition="upCenter"
             button={
               <EuiButtonIcon
-                label="show actions"
+                aria-label="show actions"
                 iconType="boxesHorizontal"
                 color="text"
                 onClick={() => setIsPopoverOpen(!isPopoverOpen)}
@@ -120,7 +120,7 @@ const trailingControlColumns = [
                   gutterSize="s">
                   <EuiFlexItem grow={false}>
                     <EuiButtonIcon
-                      label="Pin selected items"
+                      aria-label="Pin selected items"
                       iconType="pin"
                       color="text"
                     />
@@ -136,7 +136,7 @@ const trailingControlColumns = [
                   gutterSize="s">
                   <EuiFlexItem grow={false}>
                     <EuiButtonIcon
-                      label="Delete selected items"
+                      aria-label="Delete selected items"
                       iconType="trash"
                       color="text"
                     />

diff --git a/src-docs/src/views/datagrid/schema.js b/src-docs/src/views/datagrid/schema.js
@@ -152,7 +152,7 @@ export default class DataGridSchema extends Component {
 
   dummyIcon = () => (
     <EuiButtonIcon
-      label="dummy icon"
+      aria-label="dummy icon"
       iconType={iconTypes[Math.floor(Math.random() * iconTypes.length)]}
     />
   );

diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js b/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js
@@ -103,7 +103,7 @@ export default () => {
                         ) : (
                           <EuiButtonIcon
                             iconType="cross"
-                            label="Remove"
+                            aria-label="Remove"
                             onClick={() => remove('DROPPABLE_AREA_COPY_2', idx)}
                           />
                         )}

diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js
@@ -75,7 +75,7 @@ export default () => {
               <EuiPanel paddingSize="s">
                 <EuiButtonIcon
                   iconType="grab"
-                  label="Drag Handle"
+                  aria-label="Drag Handle"
                   {...provided.dragHandleProps}
                 />
                 <EuiDroppable

diff --git a/src-docs/src/views/form_controls/prepend_append.js b/src-docs/src/views/form_controls/prepend_append.js
@@ -93,7 +93,7 @@ export default () => {
       <EuiFieldText
         placeholder="Icon & button icon"
         prepend={<EuiIcon type="vector" />}
-        append={<EuiButtonIcon iconType="gear" label="Gear this" />}
+        append={<EuiButtonIcon iconType="gear" aria-label="Gear this" />}
         compressed={isCompressed}
         disabled={isDisabled}
         readOnly={isReadOnly}
@@ -103,11 +103,11 @@ export default () => {
         placeholder="Icons in buttons and popovers and tooltips"
         prepend={[
           <EuiIcon type="vector" />,
-          <EuiButtonIcon iconType="gear" label="Gear this" />,
+          <EuiButtonIcon iconType="gear" aria-label="Gear this" />,
         ]}
         append={[
           <EuiPopover
-            button={<EuiButtonIcon iconType="gear" label="Gear this" />}
+            button={<EuiButtonIcon iconType="gear" aria-label="Gear this" />}
             closePopover={() => {}}
           />,
           <EuiIconTip content="content" />,
@@ -127,7 +127,7 @@ export default () => {
         }
         prepend={
           <EuiToolTip content="content">
-            <EuiButtonIcon iconType="gear" label="Gear this" />
+            <EuiButtonIcon iconType="gear" aria-label="Gear this" />
           </EuiToolTip>
         }
         compressed={isCompressed}
@@ -138,7 +138,10 @@ export default () => {
       <EuiFieldText
         placeholder="Icon and string & string and icon button"
         prepend={[<EuiIcon type="vector" />, 'String']}
-        append={['String', <EuiButtonIcon iconType="gear" label="Gear this" />]}
+        append={[
+          'String',
+          <EuiButtonIcon iconType="gear" aria-label="Gear this" />,
+        ]}
         compressed={isCompressed}
         disabled={isDisabled}
         readOnly={isReadOnly}
@@ -149,12 +152,12 @@ export default () => {
         prepend={[
           'String',
           <EuiToolTip content="content">
-            <EuiButtonIcon iconType="gear" label="Gear this" />
+            <EuiButtonIcon iconType="gear" aria-label="Gear this" />
           </EuiToolTip>,
         ]}
         append={[
           <EuiPopover
-            button={<EuiButtonIcon iconType="gear" label="Gear this" />}
+            button={<EuiButtonIcon iconType="gear" aria-label="Gear this" />}
             closePopover={() => {}}
           />,
           'String',

diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js
@@ -104,7 +104,7 @@ export default () => (
             color="danger"
             onClick={() => window.alert('Button clicked')}
             iconType="trash"
-            label="Next"
+            aria-label="Next"
           />
         </div>
       </EuiFlexItem>
@@ -264,9 +264,9 @@ export default () => (
         panel={false}
         frame="frame">
         <div>
-          <EuiButtonIcon size="s" iconType="pencil" label="Edit" />
+          <EuiButtonIcon size="s" iconType="pencil" aria-label="Edit" />
           &nbsp;&nbsp;&nbsp;&nbsp;
-          <EuiButtonIcon size="s" iconType="expand" label="Expand" />
+          <EuiButtonIcon size="s" iconType="expand" aria-label="Expand" />
         </div>
       </GuideRuleExample>
       <GuideRuleExample
@@ -475,7 +475,7 @@ export default () => (
               size="s"
               color="danger"
               iconType="trash"
-              label="delete"
+              aria-label="delete"
             />
           </EuiTableRowCell>
 
@@ -492,7 +492,7 @@ export default () => (
               size="s"
               color="danger"
               iconType="cross"
-              label="Remove"
+              aria-label="Remove"
             />
           </EuiTableRowCell>
           <EuiTableRowCell>

diff --git a/src-docs/src/views/suggest/global_filter_options.js b/src-docs/src/views/suggest/global_filter_options.js
@@ -106,7 +106,7 @@ export default class GlobalFilterOptions extends Component {
             onClick={this.togglePopover}
             color="text"
             iconType="filter"
-            label="Change all filters"
+            aria-label="Change all filters"
             title="Change all filters"
           />
         }

diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js
@@ -527,7 +527,7 @@ export default class extends Component {
                 id={`${item.id}-actions`}
                 button={
                   <EuiButtonIcon
-                    label="Actions"
+                    aria-label="Actions"
                     iconType="gear"
                     size="s"
                     color="text"

diff --git a/src-docs/src/views/tables/expanding_rows/expanding_rows.js b/src-docs/src/views/tables/expanding_rows/expanding_rows.js
@@ -186,7 +186,7 @@ export class Table extends Component {
         render: item => (
           <EuiButtonIcon
             onClick={() => this.toggleDetails(item)}
-            label={itemIdToExpandedRowMap[item.id] ? 'Collapse' : 'Expand'}
+            aria-label={itemIdToExpandedRowMap[item.id] ? 'Collapse' : 'Expand'}
             iconType={itemIdToExpandedRowMap[item.id] ? 'arrowUp' : 'arrowDown'}
           />
         ),

diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`CollapsedItemActions render 1`] = `
       class="euiToolTipAnchor"
     >
       <button
+        aria-label="All actions"
         class="euiButtonIcon euiButtonIcon--text"
         data-test-subj="euiCollapsedItemActionsButton"
         type="button"
@@ -21,11 +22,6 @@ exports[`CollapsedItemActions render 1`] = `
           class="euiButtonIcon__icon"
           data-euiicon-type="boxesHorizontal"
         />
-        <span
-          class="euiScreenReaderOnly"
-        >
-          All actions
-        </span>
       </button>
     </span>
   </div>

diff --git a/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap b/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap
@@ -43,10 +43,10 @@ exports[`DefaultItemAction render - icon 1`] = `
   position="top"
 >
   <EuiButtonIcon
+    aria-label="action1"
     color="primary"
     iconType="trash"
     isDisabled={false}
-    label="action1"
     onClick={[Function]}
   />
 </EuiToolTip>