fix: removed accessibility integration due to we have a couple of gra…

…y areas on it, will be on stand by
nexxtway · May 12, 2020 · 3520c69 · 3520c69
1 parent a00572d
commit 3520c69
Show file tree

Hide file tree

Showing 4 changed files with 2 additions and 26 deletions.
diff --git a/src/components/CodeInput/index.js b/src/components/CodeInput/index.js
@@ -8,7 +8,7 @@ import StyledTextError from '../Input/styled/errorText';
 import { useReduxForm, useUniqueIdentifier } from '../../libs/hooks';
 import { useFocusedIndexState, usePreviousIndex, useValueState } from './hooks';
 import { getNormalizedValue, getNumbersFromClipboard, setFocus } from './helpers';
-import { StyledFieldset, StyledHiddenLabel, StyledLabel } from './styled';
+import { StyledFieldset, StyledLabel } from './styled';
 
 /**
  * The CodeInput is an element that allows to fill a list of numbers, suitable for code validations.
@@ -41,7 +41,6 @@ const CodeInput = React.forwardRef((props, ref) => {
     const focusedIndex = useFocusedIndexState(value, length);
     const previousFocusedIndex = usePreviousIndex(focusedIndex);
     const inputId = useUniqueIdentifier('code-input');
-    const labelId = useUniqueIdentifier('code-input-label');
 
     useImperativeHandle(ref, () => ({
         focus: () => {
@@ -83,8 +82,6 @@ const CodeInput = React.forwardRef((props, ref) => {
                     <RequiredAsterisk required={required} />
                     {label}
                 </StyledLabel>
-
-                <StyledHiddenLabel id={labelId}>{label}</StyledHiddenLabel>
             </RenderIf>
 
             <InputItems
@@ -102,7 +99,6 @@ const CodeInput = React.forwardRef((props, ref) => {
                 id={inputId}
                 focusedIndex={focusedIndex}
                 ref={inputRef}
-                labelId={labelId}
             />
             <RenderIf isTrue={!!bottomHelpText}>
                 <HelpText>{bottomHelpText}</HelpText>

diff --git a/src/components/CodeInput/inputItem.js b/src/components/CodeInput/inputItem.js
@@ -20,7 +20,6 @@ const InputItem = React.forwardRef((props, ref) => {
         onPaste,
         id,
         isActive,
-        ariaLabelledBy,
     } = props;
 
     const handleOnKeyDown = (e, inputIndex) => {
@@ -51,8 +50,6 @@ const InputItem = React.forwardRef((props, ref) => {
             maxLength="1"
             id={id}
             isActive={isActive}
-            aria-label="Enter a number"
-            aria-labelledby={ariaLabelledBy}
         />
     );
 });
@@ -72,7 +69,6 @@ InputItem.propTypes = {
     onKeyDown: PropTypes.func,
     onPaste: PropTypes.func,
     isActive: PropTypes.bool,
-    ariaLabelledBy: PropTypes.string,
 };
 
 InputItem.defaultProps = {
@@ -90,7 +86,6 @@ InputItem.defaultProps = {
     onKeyDown: () => {},
     onPaste: () => {},
     isActive: false,
-    ariaLabelledBy: null,
 };
 
 export default InputItem;
diff --git a/src/components/CodeInput/inputItems.js b/src/components/CodeInput/inputItems.js
@@ -18,7 +18,6 @@ const InputItems = React.forwardRef((props, ref) => {
         onPaste,
         focusedIndex,
         id,
-        labelId,
     } = props;
 
     const inputs = value.map((inputValue, index) => {
@@ -27,7 +26,6 @@ const InputItems = React.forwardRef((props, ref) => {
         const inputRef = isActive ? ref : null;
         const inputId = isActive ? id : `${id}-${index}`;
         const inputTabIndex = isActive ? tabIndex : -1;
-        const ariaLabelledBy = isActive ? labelId : null;
 
         return (
             <InputItem
@@ -48,7 +46,6 @@ const InputItems = React.forwardRef((props, ref) => {
                 ref={inputRef}
                 id={inputId}
                 isActive={isActive}
-                ariaLabelledBy={ariaLabelledBy}
             />
         );
     });
@@ -71,7 +68,6 @@ InputItems.propTypes = {
     onPaste: PropTypes.func,
     focusedIndex: PropTypes.number,
     id: PropTypes.string,
-    labelId: PropTypes.string,
 };
 
 InputItems.defaultProps = {
@@ -89,7 +85,6 @@ InputItems.defaultProps = {
     onPaste: () => {},
     focusedIndex: undefined,
     id: undefined,
-    labelId: undefined,
 };
 
 export default InputItems;
diff --git a/src/components/CodeInput/styled/index.js b/src/components/CodeInput/styled/index.js
@@ -98,16 +98,6 @@ const StyledFieldset = styled.fieldset`
     text-align: center;
 `;
 
-const StyledHiddenLabel = styled.label`
-    display: block;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    border: 0;
-    border-color: transparent;
-    margin: 0;
-`;
-
 const StyledLabel = attachThemeAttrs(styled.legend)`
     border: 0;
     padding: 0;
@@ -123,4 +113,4 @@ const StyledLabel = attachThemeAttrs(styled.legend)`
     }
 `;
 
-export { StyledInput, StyledFieldset, StyledHiddenLabel, StyledLabel };
+export { StyledInput, StyledFieldset, StyledLabel };