From 03430b431c4bf60b262696f4b7217993c5b306f5 Mon Sep 17 00:00:00 2001 From: Sri Viswanathan Date: Tue, 22 Nov 2022 12:02:11 +0000 Subject: [PATCH] fix: Accessibility improvements --- src/autocomplete/Autocomplete.tsx | 21 ++- .../__tests__/Autocomplete.test.tsx | 27 ++++ stories/Autocomplete/Styled.stories.mdx | 2 +- stories/style.css | 148 +++++++++--------- 4 files changed, 119 insertions(+), 79 deletions(-) diff --git a/src/autocomplete/Autocomplete.tsx b/src/autocomplete/Autocomplete.tsx index bd06e393..7bbf0c14 100644 --- a/src/autocomplete/Autocomplete.tsx +++ b/src/autocomplete/Autocomplete.tsx @@ -285,8 +285,6 @@ export const Autocomplete = ({ } }; - const hidePrompt = () => setShowPrompt(false); - const delayResult = React.useMemo( () => debounce((value) => { @@ -349,11 +347,19 @@ export const Autocomplete = ({ }; const onKeyDown = (evt: React.KeyboardEvent) => { + if (!showOptions) { + return; + } + if (evt.code === 'Enter') { + evt.preventDefault(); setActiveOption(0); setShowOptions(false); - setUserInput(filterList[activeOption] || ''); - if (onSelected) onSelected(filterList[activeOption]); + + if (filterList.length > 0) { + setUserInput(filterList[activeOption]); + if (onSelected) onSelected(filterList[activeOption]); + } } else if (evt.code === 'ArrowUp') { if (activeOption === 0) { return; @@ -367,6 +373,11 @@ export const Autocomplete = ({ } }; + const onBlur = () => { + setShowOptions(false); + setShowPrompt(false); + }; + const formInput: JSX.Element = ( <> { expect(formSelect.name).toBe('selectName'); }); + it('should hide the results list if losing focus', async () => { + jest.spyOn(hooks, 'useHydrated').mockImplementation(() => true); + + const user = userEvent.setup(); + + render(); + + const input = screen.getByRole('textbox'); + + await act(() => user.click(input)); + + let resultList = screen.queryByRole('list'); + expect(resultList).toBe(null); + + await act(() => user.type(input, 'da')); + + resultList = screen.queryByRole('list'); + expect(resultList).not.toBeNull(); + + act(() => { + fireEvent.blur(input); + }); + + resultList = screen.queryByRole('list'); + expect(resultList).toBe(null); + }); + it('should display a prompt if receiving focus and the minimum number of characters have not yet been entered', async () => { jest.spyOn(hooks, 'useHydrated').mockImplementation(() => true); diff --git a/stories/Autocomplete/Styled.stories.mdx b/stories/Autocomplete/Styled.stories.mdx index 5d712902..187409fe 100644 --- a/stories/Autocomplete/Styled.stories.mdx +++ b/stories/Autocomplete/Styled.stories.mdx @@ -112,7 +112,7 @@ The list of available options are: resultUlClass="autocomplete__menu" resultlLiClass="autocomplete__option" resultNoOptionClass="resultNoOptionClass" - resultActiveClass="autocomplete__option" + resultActiveClass="autocomplete__option--active" notFoundText="No fruit found" onSelected={handleSelected} /> diff --git a/stories/style.css b/stories/style.css index 90d71a15..bfe016db 100644 --- a/stories/style.css +++ b/stories/style.css @@ -1166,6 +1166,7 @@ padding: 5px; } +.autocomplete__option--active, .autocomplete__option:hover { background-color: #1d70b8; border-color: #1d70b8; @@ -1472,16 +1473,16 @@ input::-webkit-inner-spin-button { } .govuk-tabs { - margin-top:5px; - margin-bottom:30px; + margin-top: 5px; + margin-bottom: 30px; } .govuk-tabs__title { font-family: sans-serif; - font-size:19px; + font-size: 19px; line-height: 1.31579; - font-family: "GDS Transport",arial,sans-serif; + font-family: 'GDS Transport', arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; @@ -1497,59 +1498,58 @@ input::-webkit-inner-spin-button { display: none; } - @media (min-width: 40.0625em) { .govuk-tabs__list { - margin-bottom:30px; - margin: 0; - padding: 0; - list-style: none; - margin-bottom: 20px; + margin-bottom: 30px; + margin: 0; + padding: 0; + list-style: none; + margin-bottom: 20px; - margin-bottom:0; - border-bottom: 1px solid #b1b4b6; + margin-bottom: 0; + border-bottom: 1px solid #b1b4b6; } } @media (min-width: 40.0625em) { .govuk-tabs__list-item { - font-size:19px; - line-height: 1.31579; + font-size: 19px; + line-height: 1.31579; - font-family: "GDS Transport",arial,sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-size: 16px; - line-height: 1.25; - margin-left: 25px; + font-family: 'GDS Transport', arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 400; + font-size: 16px; + line-height: 1.25; + margin-left: 25px; - position: relative; - margin-right: 5px; - margin-bottom: 0; - margin-left: 0; - padding: 10px 20px; - float: left; - background-color: #f3f2f1; - text-align: center; + position: relative; + margin-right: 5px; + margin-bottom: 0; + margin-left: 0; + padding: 10px 20px; + float: left; + background-color: #f3f2f1; + text-align: center; } } .govuk-tabs__list-item:before { color: #0b0c0c; - content: "\2014 "; + content: '\2014 '; margin-left: -25px; padding-right: 5px; content: none; } .govuk-tabs__tab { - font-family: "GDS Transport",arial,sans-serif; + font-family: 'GDS Transport', arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: underline; text-decoration-thickness: 1px; - text-underline-offset: .1em; + text-underline-offset: 0.1em; display: inline-block; margin-bottom: 10px; cursor: pointer; @@ -1567,8 +1567,8 @@ input::-webkit-inner-spin-button { outline: 3px solid transparent; color: #0b0c0c; background-color: #fd0; - -webkit-box-shadow: 0 -2px #fd0,0 4px #0b0c0c; - box-shadow: 0 -2px #fd0,0 4px #0b0c0c; + -webkit-box-shadow: 0 -2px #fd0, 0 4px #0b0c0c; + box-shadow: 0 -2px #fd0, 0 4px #0b0c0c; text-decoration: none; } @@ -1594,86 +1594,88 @@ input::-webkit-inner-spin-button { @media (min-width: 40.0625em) { .govuk-tabs__panel { - padding: 15px 10px; - border: 1px solid #b1b4b6; - border-top: 0; + padding: 15px 10px; + border: 1px solid #b1b4b6; + border-top: 0; } } @media (min-width: 40.0625em) { - .govuk-tabs__list:after { - content: ""; - display: block; - clear: both; + content: ''; + display: block; + clear: both; } .govuk-tabs__list-item--selected { - position: relative; - margin-top: -5px; - margin-bottom: -1px; - padding-top: 14px; - padding-right: 19px; - padding-bottom: 16px; - padding-left: 19px; - border: 1px solid #b1b4b6; - border-bottom: 0; - background-color: #fff; + position: relative; + margin-top: -5px; + margin-bottom: -1px; + padding-top: 14px; + padding-right: 19px; + padding-bottom: 16px; + padding-left: 19px; + border: 1px solid #b1b4b6; + border-bottom: 0; + background-color: #fff; } .govuk-tabs__list-item--selected .govuk-tabs__tab { - text-decoration: none; + text-decoration: none; } .govuk-tabs__tab { - margin-bottom: 0 + margin-bottom: 0; } - .govuk-tabs__tab:link,.govuk-tabs__tab:visited { - color: #0b0c0c; + .govuk-tabs__tab:link, + .govuk-tabs__tab:visited { + color: #0b0c0c; } } @media print and (min-width: 40.0625em) { - .govuk-tabs__tab:link,.govuk-tabs__tab:visited { - color:#000; + .govuk-tabs__tab:link, + .govuk-tabs__tab:visited { + color: #000; } } @media (min-width: 40.0625em) { .govuk-tabs__tab:hover { - color:rgba(11,12,12,0.99); + color: rgba(11, 12, 12, 0.99); } - .govuk-tabs__tab:active,.govuk-tabs__tab:focus { - color: #0b0c0c; + .govuk-tabs__tab:active, + .govuk-tabs__tab:focus { + color: #0b0c0c; } } @media print and (min-width: 40.0625em) { - .govuk-tabs__tab:active,.govuk-tabs__tab:focus { - color:#000; + .govuk-tabs__tab:active, + .govuk-tabs__tab:focus { + color: #000; } } @media (min-width: 40.0625em) { .govuk-tabs__tab:after { - content:""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } - } @media (min-width: 40.0625em) { - .govuk-tabs__panel>:last-child { - margin-bottom:0 + .govuk-tabs__panel > :last-child { + margin-bottom: 0; } .govuk-tabs__panel--hidden { - display: none; + display: none; } -} \ No newline at end of file +}