diff --git a/packages/modals/README.md b/packages/modals/README.md index 2d19685c4c9..5838388b28c 100644 --- a/packages/modals/README.md +++ b/packages/modals/README.md @@ -43,7 +43,7 @@ import { Button } from '@zendeskgarden/react-buttons'; - + ``` diff --git a/packages/modals/src/containers/ModalContainer.example.md b/packages/modals/src/containers/ModalContainer.example.md index 47081c19929..64cc5707879 100644 --- a/packages/modals/src/containers/ModalContainer.example.md +++ b/packages/modals/src/containers/ModalContainer.example.md @@ -46,7 +46,7 @@ const onModalClose = () => setState({ isModalVisible: false }); - + )} diff --git a/packages/modals/src/elements/Modal.example.md b/packages/modals/src/elements/Modal.example.md index c3ccb0ff4f5..07e506cecd5 100644 --- a/packages/modals/src/elements/Modal.example.md +++ b/packages/modals/src/elements/Modal.example.md @@ -55,7 +55,7 @@ const onModalClose = () => setState({ isModalVisible: false }); - + )} ; @@ -110,7 +110,7 @@ const onModalClose = () => setState({ isModalVisible: false }); - + )} ; @@ -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. - + )} ; diff --git a/packages/modals/src/views/ModalView.example.md b/packages/modals/src/views/ModalView.example.md index 8719e302bd5..967744a99f0 100644 --- a/packages/modals/src/views/ModalView.example.md +++ b/packages/modals/src/views/ModalView.example.md @@ -27,7 +27,7 @@ const ExampleModalContainer = styled.div` - + ; diff --git a/packages/notifications/src/Alert.example.md b/packages/notifications/src/Alert.example.md index 119abada051..aa7637045db 100644 --- a/packages/notifications/src/Alert.example.md +++ b/packages/notifications/src/Alert.example.md @@ -1,3 +1,6 @@ +**Accessibility Warning:** All usages of `` must contain an `aria-label` +or other assistive technique to have discernible text. + ```jsx @@ -6,7 +9,7 @@ Success Alert Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - alert('closing alert')} /> + alert('closing alert')} aria-label="Close Alert" /> @@ -14,7 +17,7 @@ Warning Alert Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - alert('closing alert')} /> + alert('closing alert')} aria-label="Close Alert" /> @@ -22,7 +25,7 @@ Error Alert Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - alert('closing alert')} /> + alert('closing alert')} aria-label="Close Alert" /> diff --git a/packages/notifications/src/Notification.example.md b/packages/notifications/src/Notification.example.md index 2548d57e13a..d89e21cbfaa 100644 --- a/packages/notifications/src/Notification.example.md +++ b/packages/notifications/src/Notification.example.md @@ -1,3 +1,6 @@ +**Accessibility Warning:** All usages of `` must contain an `aria-label` +or other assistive technique to have discernible text. + ```jsx @@ -10,7 +13,7 @@ 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. - alert('closing notification')} /> + alert('closing notification')} aria-label="Close Notification" /> @@ -18,7 +21,7 @@ Success Notification Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - alert('closing notification')} /> + alert('closing notification')} aria-label="Close Notification" /> @@ -26,7 +29,7 @@ Warning Notification Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - alert('closing notification')} /> + alert('closing notification')} aria-label="Close Notification" /> @@ -34,7 +37,7 @@ Error Notification Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - alert('closing notification')} /> + alert('closing notification')} aria-label="Close Notification" /> diff --git a/packages/pagination/src/containers/PaginationContainer.js b/packages/pagination/src/containers/PaginationContainer.js index a7a308a3c7a..ac0872b3933 100644 --- a/packages/pagination/src/containers/PaginationContainer.js +++ b/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 }; }; diff --git a/packages/pagination/src/containers/PaginationContainer.spec.js b/packages/pagination/src/containers/PaginationContainer.spec.js index 35f5194a3eb..760f4ad9782 100644 --- a/packages/pagination/src/containers/PaginationContainer.spec.js +++ b/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'); }); }); diff --git a/packages/tables/src/examples/overflow-menu.md b/packages/tables/src/examples/overflow-menu.md index 656d59fe7cb..a6da91fd089 100644 --- a/packages/tables/src/examples/overflow-menu.md +++ b/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 `` 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; diff --git a/packages/tables/src/examples/paginated-table.md b/packages/tables/src/examples/paginated-table.md index c813f6d0a49..a6fb5c06644 100644 --- a/packages/tables/src/examples/paginated-table.md +++ b/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}; `;