fix(pagination): remove invalid aria role

packages/modals/README.md

@@ -43,7 +43,7 @@ import { Button } from '@zendeskgarden/react-buttons';
         </Button>
       </FooterItem>
     </Footer>
-    <Close />
+    <Close aria-label="Close modal" />
   </Modal>
 </ThemeProvider>
 ```

packages/modals/src/containers/ModalContainer.example.md

@@ -46,7 +46,7 @@ const onModalClose = () => setState({ isModalVisible: false });
                 </Button>
               </FooterItem>
             </Footer>
-            <Close {...getCloseProps()} />
+            <Close {...getCloseProps({ 'aria-label': 'Close modal' })} />
           </ModalView>
         </Backdrop>
       )}

packages/modals/src/elements/Modal.example.md

@@ -55,7 +55,7 @@ const onModalClose = () => setState({ isModalVisible: false });
           </Button>
         </FooterItem>
       </Footer>
-      <Close />
+      <Close aria-label="Close modal" />
     </Modal>
   )}
 </div>;
@@ -110,7 +110,7 @@ const onModalClose = () => setState({ isModalVisible: false });
           </Button>
         </FooterItem>
       </Footer>
-      <Close />
+      <Close aria-label="Close modal" />
     </Modal>
   )}
 </div>;
@@ -160,7 +160,7 @@ const onModalClose = () => setState({ isModalVisible: false });
         passages, and more recently with desktop publishing software like Aldus PageMaker including
         versions of Lorem Ipsum.
       </Body>
-      <Close />
+      <Close aria-label="Close modal" />
     </Modal>
   )}
 </div>;

packages/modals/src/views/ModalView.example.md

@@ -27,7 +27,7 @@ const ExampleModalContainer = styled.div`
           <Button primary>Submit</Button>
         </FooterItem>
       </Footer>
-      <Close />
+      <Close aria-label="Close modal" />
     </ModalView>
   </Backdrop>
 </ExampleModalContainer>;

packages/notifications/src/Alert.example.md

@@ -1,3 +1,6 @@
+**Accessibility Warning:** All usages of `<Close />` must contain an `aria-label`
+or other assistive technique to have discernible text.
+
 ```jsx
 <Grid>
   <Row>
@@ -6,23 +9,23 @@
         <Title>Success Alert</Title>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
         labore et dolore magna aliqua.
-        <Close onClick={() => alert('closing alert')} />
+        <Close onClick={() => alert('closing alert')} aria-label="Close Alert" />
       </Alert>
     </Col>
     <Col size={12}>
       <Alert type="warning">
         <Title>Warning Alert</Title>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
         labore et dolore magna aliqua.
-        <Close onClick={() => alert('closing alert')} />
+        <Close onClick={() => alert('closing alert')} aria-label="Close Alert" />
       </Alert>
     </Col>
     <Col size={12}>
       <Alert type="error">
         <Title>Error Alert</Title>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
         labore et dolore magna aliqua.
-        <Close onClick={() => alert('closing alert')} />
+        <Close onClick={() => alert('closing alert')} aria-label="Close Alert" />
       </Alert>
     </Col>
   </Row>

packages/notifications/src/Notification.example.md

@@ -1,3 +1,6 @@
+**Accessibility Warning:** All usages of `<Close />` must contain an `aria-label`
+or other assistive technique to have discernible text.
+
 ```jsx
 <Grid>
   <Row>
@@ -10,31 +13,31 @@
           ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         </Paragraph>
-        <Close onClick={() => alert('closing notification')} />
+        <Close onClick={() => alert('closing notification')} aria-label="Close Notification" />
       </Notification>
     </Col>
     <Col size={12}>
       <Notification type="success">
         <Title>Success Notification</Title>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
         labore et dolore magna aliqua.
-        <Close onClick={() => alert('closing notification')} />
+        <Close onClick={() => alert('closing notification')} aria-label="Close Notification" />
       </Notification>
     </Col>
     <Col size={12}>
       <Notification type="warning">
         <Title>Warning Notification</Title>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
         labore et dolore magna aliqua.
-        <Close onClick={() => alert('closing notification')} />
+        <Close onClick={() => alert('closing notification')} aria-label="Close Notification" />
       </Notification>
     </Col>
     <Col size={12}>
       <Notification type="error">
         <Title>Error Notification</Title>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
         labore et dolore magna aliqua.
-        <Close onClick={() => alert('closing notification')} />
+        <Close onClick={() => alert('closing notification')} aria-label="Close Notification" />
       </Notification>
     </Col>
   </Row>

packages/pagination/src/containers/PaginationContainer.js

@@ -51,11 +51,10 @@ export default class PaginationContainer extends ControlledComponent {
     };
   }
 
-  getContainerProps = ({ role = 'navigation', ...otherProps } = {}) => {
+  getContainerProps = (props = {}) => {
     return {
-      role,
-      'aria-label': 'Pagination',
-      ...otherProps
+      'aria-label': 'Pagination navigation',
+      ...props
     };
   };
 

packages/pagination/src/containers/PaginationContainer.spec.js

@@ -71,8 +71,8 @@ describe('PaginationContainer', () => {
     it('applies correct accessibility attributes', () => {
       const container = findContainer(wrapper);
 
-      expect(container).toHaveProp('role', 'navigation');
-      expect(container).toHaveProp('aria-label', 'Pagination');
+      expect(container).toHaveProp('role', 'listbox');
+      expect(container).toHaveProp('aria-label', 'Pagination navigation');
     });
   });
 

packages/tables/src/examples/overflow-menu.md

@@ -5,6 +5,9 @@ package.
 Based on `Table` positioning and other implementation specific details you may need
 to apply manual positioning against the `Menu` to ensure a standard look and feel.
 
+**Accessibility Warning:** All usages of `<OverflowButton />` must contain an `aria-label`
+or other assistive technique to have discernible text.
+
 ```jsx
 const {
   zdFontSizeBeta,
@@ -42,7 +45,7 @@ const OverflowMenu = ({ isHeader = false }) => (
       }
     }}
     trigger={({ ref, isOpen }) => {
-      const buttonProps = { innerRef: ref, active: isOpen };
+      const buttonProps = { innerRef: ref, active: isOpen, 'aria-label': 'Row Actions' };
 
       if (isOpen) {
         buttonProps.focused = false;

packages/tables/src/examples/paginated-table.md

@@ -4,7 +4,7 @@ const { Avatar } = require('@zendeskgarden/react-avatars/src');
 const {
   zdFontSizeBeta,
   zdFontSizeEpsilon,
-  zdColorGrey500,
+  zdColorGrey600,
   zdFontWeightSemibold,
   zdSpacingSm
 } = require('@zendeskgarden/css-variables');
@@ -33,7 +33,7 @@ initialState = {
 };
 
 const CurrentPages = styled.div`
-  color: ${zdColorGrey500};
+  color: ${zdColorGrey600};
   font-size: ${zdFontSizeEpsilon};
 `;