FieldTimeSelect Field Label aria fix (#1567)

Author: dbchristopher

CHANGELOG.md

@@ -5,12 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## UNRELEASED
+## [UNRELEASED]
 
 ### Changed
 
 - InputDateRange allows you to specify a single day range by clicking on one of the date range endpoints
 
+### Fixed
+
+- Aria accessibily fixes for `FieldTimeSelect` label
+
 ## [0.9.18]
 
 ### Added

packages/components/snapshots/Dialog/Long Content-snap.png

@@ -24,31 +24,50 @@
 
  */
 import React, { useState } from 'react'
-import { ButtonToggle, FieldTimeSelect, Fieldset } from '@looker/components'
+import { Story } from '@storybook/react/types-6-0'
+import { ButtonToggle } from '../../../Button'
+import { Fieldset } from '../../Fieldset'
+import { FieldTimeSelect, FieldTimeSelectProps } from './'
 
 export default {
-  title: 'Forms/TimeSelect',
+  component: FieldTimeSelect,
+  title: 'FieldTimeSelect',
 }
 
-export const Basic = () => <FieldTimeSelect interval={10} label="Label" />
-
-export const Disabled = () => (
-  <FieldTimeSelect disabled label="Label" interval={10} />
+const Template: Story<FieldTimeSelectProps> = (args) => (
+  <FieldTimeSelect {...args} />
 )
 
-export const Required = () => (
-  <FieldTimeSelect interval={10} required label="Label" />
-)
+export const Basic = Template.bind({})
+Basic.args = {
+  defaultValue: '14:30',
+  interval: 10,
+  label: 'Select Time',
+}
 
-export const Error = () => (
-  <FieldTimeSelect
-    interval={10}
-    description="this is the description is a very long one"
-    detail="detail"
-    label="Label"
-    validationMessage={{ message: 'validation Message', type: 'error' }}
-  />
-)
+export const Disabled = Template.bind({})
+Disabled.args = {
+  disabled: true,
+  interval: 10,
+  label: 'Select Time',
+}
+
+export const Required = Template.bind({})
+Required.args = {
+  interval: 10,
+  label: 'Select Time',
+  required: true,
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  description: 'this is the description is a very long one',
+  detail: 'detail',
+  interval: 10,
+  label: 'Select Time',
+  required: true,
+  validationMessage: { message: 'validation Message', type: 'error' },
+}
 
 export const Controlled = () => {
   const [controlledTime, setControlledTime] = useState<any>('09:00')
@@ -85,3 +104,7 @@ export const Controlled = () => {
     </>
   )
 }
+
+Controlled.parameters = {
+  storyshots: { disable: true },
+}

packages/components/snapshots/Drawer/Open-snap.png

@@ -28,6 +28,17 @@ import React from 'react'
 import { mountWithTheme, renderWithTheme } from '@looker/components-test-utils'
 import { FieldTimeSelect } from './FieldTimeSelect'
 
+test('FieldTimeSelect should associate label and input field', () => {
+  const { getByLabelText } = renderWithTheme(
+    <FieldTimeSelect
+      label="Field Time Label"
+      id="field-time-select"
+      interval={10}
+    />
+  )
+  expect(getByLabelText('Field Time Label').tagName).toEqual('INPUT')
+})
+
 test('FieldTimeSelect should accept required attributes', () => {
   const { getByText } = renderWithTheme(
     <FieldTimeSelect