@performant-software/semantic-components 0.5.2 → 0.5.5

package/src/components/FileUploadModal.js

@@ -13,6 +13,7 @@ import {
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import FileUpload from './FileUpload';
+import ModalContext from '../context/ModalContext';
 import Toaster from './Toaster';
 
 type Props = {
@@ -195,44 +196,48 @@ class FileUploadModal extends Component<Props, State> {
           />
         )}
         { this.state.modal && (
-          <Modal
-            centered={false}
-            className='file-upload-modal'
-            open
-          >
-            <Dimmer
-              active={this.state.saving}
-              inverted
-            >
-              <Loader
-                content={i18n.t('FileUploadModal.loader')}
-              />
-            </Dimmer>
-            { this.renderErrors() }
-            <Modal.Header
-              content={this.props.title || i18n.t('FileUploadModal.title')}
-            />
-            <Modal.Content>
-              <FileUpload
-                onFilesAdded={this.onAddFiles.bind(this)}
-              />
-              { this.renderItems() }
-            </Modal.Content>
-            <Modal.Actions>
-              <Button
-                content={i18n.t('Common.buttons.save')}
-                disabled={!(this.state.items && this.state.items.length)}
-                primary
-                onClick={this.onSave.bind(this)}
-              />
-              <Button
-                content={i18n.t('Common.buttons.cancel')}
-                inverted
-                primary
-                onClick={this.onClose.bind(this)}
-              />
-            </Modal.Actions>
-          </Modal>
+          <ModalContext.Consumer>
+            { (mountNode) => (
+              <Modal
+                centered={false}
+                className='file-upload-modal'
+                mountNode={mountNode}
+                open
+              >
+                <Dimmer
+                  active={this.state.saving}
+                  inverted
+                >
+                  <Loader
+                    content={i18n.t('FileUploadModal.loader')}
+                  />
+                </Dimmer>
+                { this.renderErrors() }
+                <Modal.Header
+                  content={this.props.title || i18n.t('FileUploadModal.title')}
+                />
+                <Modal.Content>
+                  <FileUpload
+                    onFilesAdded={this.onAddFiles.bind(this)}
+                  />
+                  { this.renderItems() }
+                </Modal.Content>
+                <Modal.Actions>
+                  <Button
+                    content={i18n.t('Common.buttons.save')}
+                    disabled={!(this.state.items && this.state.items.length)}
+                    primary
+                    onClick={this.onSave.bind(this)}
+                  />
+                  <Button
+                    basic
+                    content={i18n.t('Common.buttons.cancel')}
+                    onClick={this.onClose.bind(this)}
+                  />
+                </Modal.Actions>
+              </Modal>
+            )}
+          </ModalContext.Consumer>
         )}
       </>
     );

package/src/components/FuzzyDate.js

@@ -14,6 +14,7 @@ import {
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import DateField from './DateInput';
+import ModalContext from '../context/ModalContext';
 import './FuzzyDate.css';
 
 type DateInput = {
@@ -334,110 +335,119 @@ class FuzzyDate extends Component<Props, State> {
           onClick={this.onEdit.bind(this)}
           onChange={this.onClear.bind(this)}
         />
-        <Modal
-          as={Form}
-          className='fuzzy-date-modal'
-          open={this.state.modal}
-          onClose={this.onClose.bind(this)}
-        >
-          <Modal.Header
-            content={this.props.title || i18n.t('FuzzyDate.title')}
-          />
-          <Modal.Content>
-            <Form.Input
-              className='accuracy-container'
-              label={i18n.t('FuzzyDate.labels.accuracy')}
+        <ModalContext.Consumer>
+          { (mountNode) => (
+            <Modal
+              as={Form}
+              className='fuzzy-date-modal'
+              mountNode={mountNode}
+              open={this.state.modal}
+              onClose={this.onClose.bind(this)}
             >
-              <Checkbox
-                checked={this.state.accuracy === ACCURACY_YEAR}
-                label={i18n.t('FuzzyDate.accuracy.year')}
-                name='accuracy'
-                onChange={this.onAccuracyChange.bind(this)}
-                radio
-                value={ACCURACY_YEAR}
+              <Modal.Header
+                content={this.props.title || i18n.t('FuzzyDate.title')}
               />
-              <Checkbox
-                checked={this.state.accuracy === ACCURACY_MONTH}
-                label={i18n.t('FuzzyDate.accuracy.month')}
-                name='accuracy'
-                onChange={this.onAccuracyChange.bind(this)}
-                radio
-                value={ACCURACY_MONTH}
-              />
-              <Checkbox
-                checked={this.state.accuracy === ACCURACY_DATE}
-                label={i18n.t('FuzzyDate.accuracy.date')}
-                name='accuracy'
-                onChange={this.onAccuracyChange.bind(this)}
-                radio
-                value={ACCURACY_DATE}
-              />
-            </Form.Input>
-            <Form.Group>
-              { this.renderYear('startDate') }
-              { this.renderMonth('startDate') }
-              { this.renderDate('startDate') }
-              { !this.state.range && (
-                <div
-                  className='button-container'
+              <Modal.Content>
+                <Form.Input
+                  className='accuracy-container'
+                  label={i18n.t('FuzzyDate.labels.accuracy')}
                 >
-                  <Button
-                    basic
-                    content={i18n.t('FuzzyDate.buttons.addRange')}
-                    icon='plus'
-                    onClick={this.onRangeChange.bind(this)}
+                  <Checkbox
+                    checked={this.state.accuracy === ACCURACY_YEAR}
+                    id='accuracy-year'
+                    label={i18n.t('FuzzyDate.accuracy.year')}
+                    name='accuracy'
+                    onChange={this.onAccuracyChange.bind(this)}
+                    radio
+                    value={ACCURACY_YEAR}
                   />
-                </div>
-              )}
-            </Form.Group>
-            { this.state.range && (
-              <Form.Group>
-                { this.renderYear('endDate') }
-                { this.renderMonth('endDate') }
-                { this.renderDate('endDate') }
-                <div
-                  className='button-container'
-                >
-                  <Button
-                    basic
-                    content={i18n.t('FuzzyDate.buttons.removeRange')}
-                    icon='times'
-                    onClick={this.onRangeChange.bind(this)}
+                  <Checkbox
+                    checked={this.state.accuracy === ACCURACY_MONTH}
+                    id='accuracy-month'
+                    label={i18n.t('FuzzyDate.accuracy.month')}
+                    name='accuracy'
+                    onChange={this.onAccuracyChange.bind(this)}
+                    radio
+                    value={ACCURACY_MONTH}
                   />
-                </div>
-              </Form.Group>
-            )}
-            { this.props.description && (
-              <Form.Input
-                label={i18n.t('FuzzyDate.labels.description')}
-              >
-                <TextArea
-                  onChange={this.onDescriptionChange.bind(this)}
-                  value={this.state.description}
-                />
-              </Form.Input>
-            )}
-          </Modal.Content>
-          <Modal.Actions>
-            <Button
-              onClick={this.onSave.bind(this)}
-              primary
-              size='medium'
-              type='submit'
-            >
-              { i18n.t('Common.buttons.save') }
-            </Button>
-            <Button
-              inverted
-              onClick={this.onClose.bind(this)}
-              primary
-              size='medium'
-              type='button'
-            >
-              { i18n.t('Common.buttons.cancel') }
-            </Button>
-          </Modal.Actions>
-        </Modal>
+                  <Checkbox
+                    checked={this.state.accuracy === ACCURACY_DATE}
+                    id='accuracy-date'
+                    label={i18n.t('FuzzyDate.accuracy.date')}
+                    name='accuracy'
+                    onChange={this.onAccuracyChange.bind(this)}
+                    radio
+                    value={ACCURACY_DATE}
+                  />
+                </Form.Input>
+                <Form.Group>
+                  { this.renderYear('startDate') }
+                  { this.renderMonth('startDate') }
+                  { this.renderDate('startDate') }
+                  { !this.state.range && (
+                    <div
+                      className='button-container'
+                    >
+                      <Button
+                        basic
+                        content={i18n.t('FuzzyDate.buttons.addRange')}
+                        icon='plus'
+                        onClick={this.onRangeChange.bind(this)}
+                      />
+                    </div>
+                  )}
+                </Form.Group>
+                { this.state.range && (
+                  <Form.Group>
+                    { this.renderYear('endDate') }
+                    { this.renderMonth('endDate') }
+                    { this.renderDate('endDate') }
+                    <div
+                      className='button-container'
+                    >
+                      <Button
+                        basic
+                        content={i18n.t('FuzzyDate.buttons.removeRange')}
+                        icon='times'
+                        onClick={this.onRangeChange.bind(this)}
+                      />
+                    </div>
+                  </Form.Group>
+                )}
+                { this.props.description && (
+                  <Form.Input
+                    id='description'
+                    label={i18n.t('FuzzyDate.labels.description')}
+                  >
+                    <TextArea
+                      id='description'
+                      onChange={this.onDescriptionChange.bind(this)}
+                      value={this.state.description}
+                    />
+                  </Form.Input>
+                )}
+              </Modal.Content>
+              <Modal.Actions>
+                <Button
+                  onClick={this.onSave.bind(this)}
+                  primary
+                  size='medium'
+                  type='submit'
+                >
+                  { i18n.t('Common.buttons.save') }
+                </Button>
+                <Button
+                  basic
+                  onClick={this.onClose.bind(this)}
+                  size='medium'
+                  type='button'
+                >
+                  { i18n.t('Common.buttons.cancel') }
+                </Button>
+              </Modal.Actions>
+            </Modal>
+          )}
+        </ModalContext.Consumer>
       </>
     );
   }
@@ -459,6 +469,7 @@ class FuzzyDate extends Component<Props, State> {
 
     return (
       <Form.Input
+        id='date-dropdown'
         label={i18n.t('FuzzyDate.labels.date')}
       >
         <Dropdown
@@ -486,9 +497,11 @@ class FuzzyDate extends Component<Props, State> {
 
     return (
       <Form.Input
+        id='month-dropdown'
         label={i18n.t('FuzzyDate.labels.month')}
       >
         <Dropdown
+          id='month-dropdown'
           onChange={this.onMonthChange.bind(this, property)}
           options={_.map(this.state.calendar.listMonths(), (m, i) => ({ key: i, value: i, text: m }))}
           selection
@@ -508,9 +521,11 @@ class FuzzyDate extends Component<Props, State> {
   renderYear(property: string) {
     return (
       <Form.Input
+        id='year'
         label={i18n.t('FuzzyDate.labels.year')}
       >
         <Input
+          id='year'
           onChange={this.onYearChange.bind(this, property)}
           type='number'
           value={this.state[property].year || ''}

package/src/components/HorizontalCards.js

@@ -170,6 +170,7 @@ const HorizontalCards = (props: Props) => {
     if (_.isString(image) || !image) {
       return (
         <Image
+          alt={item.alt}
           className='image-placeholder'
           src={image}
           style={{
@@ -201,12 +202,14 @@ const HorizontalCards = (props: Props) => {
             className='pagination'
           >
             <Button
+              aria-label='Left'
               basic
               circular
               icon='angle left'
               onClick={onPageChange.bind(this, -1)}
             />
             <Button
+              aria-label='Right'
               basic
               circular
               icon='angle right'

package/src/components/Items.css

@@ -6,10 +6,6 @@
   display: block;
 }
 
-.item-list .empty-list {
-  opacity: 0.8;
-}
-
 .item-list .ui.items > .item > .checkbox-container {
   display: flex;
   align-items: center;

package/src/components/Items.js

@@ -168,6 +168,7 @@ class Items extends Component<Props, {}> {
           >
             { _.map(this.getActions(item), (action, actionIndex) => (
               <Button
+                aria-label={action.name}
                 basic
                 color={action.resolveColor ? action.resolveColor(item) : action.color}
                 icon={action.resolveIcon ? action.resolveIcon(item) : action.icon}
@@ -177,6 +178,7 @@ class Items extends Component<Props, {}> {
             ))}
             { this.isSelectable() && (
               <Button
+                aria-label='Select'
                 basic
                 color={this.props.isRowSelected && this.props.isRowSelected(item) ? 'green' : undefined}
                 icon='checkmark'

package/src/components/ItemsToggle.js

@@ -118,12 +118,14 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
         <>
           <Button
             active={this.state.view === Views.list}
+            aria-label='List View'
             basic
             icon='list'
             onClick={() => this.setState({ view: Views.list })}
           />
           <Button
             active={this.state.view === Views.grid}
+            aria-label='Grid View'
             basic
             icon='grid layout'
             onClick={() => this.setState({ view: Views.grid })}
@@ -136,11 +138,13 @@ const useItemsToggle = (WrappedComponent: ComponentType<any>) => (
               }}
             >
               <Button
+                aria-label='Sort by'
                 content={this.getSortValue()}
                 icon={this.props.sortDirection === SORT_ASCENDING ? 'sort alphabet up' : 'sort alphabet down'}
                 onClick={(e) => this.sortDropdown.handleClick(e)}
               />
               <Dropdown
+                aria-label='Sort'
                 className='button icon'
                 floating
                 options={_.map(this.props.sort, (sort) => ({

package/src/components/List.js

@@ -544,6 +544,7 @@ const useList = (WrappedComponent: ComponentType<any>) => (
       return (
         <Button
           active={this.props.filters.active}
+          aria-label='Filter'
           basic
           icon='filter'
           onClick={this.onFilterButton.bind(this)}