Commit f8ca49c1 authored by Stefan Probst's avatar Stefan Probst
Browse files

style: improve focus outlines

parent 0fa64d5f
Pipeline #288758 passed with stages
in 9 minutes and 57 seconds
......@@ -97,7 +97,7 @@ describe('Create dataset page', () => {
)
})
it.only('should dispatch filled out form as payload on submit', () => {
it('should dispatch filled out form as payload on submit', () => {
cy.get('input[name="label"]').type('The label')
cy.get('input[name="version"]').type('2.0')
cy.get('textarea[name="description"]').type('The description')
......@@ -133,9 +133,76 @@ describe('Create dataset page', () => {
cy.get('input[name="properties[1].value"]').type('123')
cy.get('input[name="properties[2].concept.uri"]').type('{downarrow}{downarrow}{enter}')
cy.get('input[name="properties[3].concept.uri"]').type('{downarrow}{downarrow}{enter}')
cy.get('input[name="properties[4].value"]').type('456')
cy.get('input[name="properties[4].value"]').type('http://see-also.com')
cy.get('input[name="properties[5].concept.uri"]').type('{downarrow}{downarrow}{enter}')
cy.get('input[name="properties[6].value"]').type('2022')
cy.intercept({ url: 'http://localhost:8080/api/datasets', method: 'POST' }).as(
'create-dataset',
)
cy.findByRole('button', { name: 'Submit' }).realClick()
cy.findByRole('status').contains('Successfully suggested new Dataset.')
cy.location('pathname').should('equal', '/success')
cy.wait('@create-dataset').then((interception) => {
assert.deepEqual(interception.request.body, {
label: 'The label',
version: '2.0',
description: 'The description',
accessibleAt: ['https://first.com', 'https://second.com'],
contributors: [
{ actor: { id: 1 }, role: { code: 'contributor' } },
{ actor: { id: 2 }, role: { code: 'contact' } },
],
properties: [
{
type: { code: 'activity', type: 'concept' },
concept: {
uri: 'http://dcu.gr/ontologies/scholarlyontology/instances/ActivityType-Collecting',
},
},
{
type: { code: 'keyword', type: 'string' },
value: '123',
},
{
type: { code: 'language', type: 'concept' },
concept: { uri: 'http://iso639-3.sil.org/code/eng' },
},
{
type: { code: 'object-format', type: 'concept' },
concept: { uri: 'http://www.iana.org/assignments/media-types/image/tiff' },
},
{
type: { code: 'see-also', type: 'url' },
value: 'http://see-also.com',
},
{
type: { code: 'license', type: 'concept' },
concept: { uri: 'http://spdx.org/licenses/Entessa' },
},
{
type: { code: 'year', type: 'int' },
value: '2022',
},
],
externalIds: [
{ identifier: 'abcdef', identifierService: { code: 'Wikidata' } },
{ identifier: '123', identifierService: { code: 'GitHub' } },
],
relatedItems: [],
})
})
})
it.only('should display field error message when property value has invalid type', () => {
cy.findByRole('button', { name: 'Add Property' }).click()
// "processed-at" date
// "deprecated-at-source" boolean
// "see-also" url
// "year" int
// "model-version" float
})
})
})
......@@ -182,8 +182,10 @@ export const dictionary: Dictionary = {
authentication: { description: 'Is authentication needed? Yes or no.' },
conference: { description: 'Name of the conference where paper was given.' },
discipline: { description: 'Describes the discipline covered by resource.' },
// extent: { description: '' },
'geographical-availability': { description: 'Locations where the Resource is offered.' },
'helpdesk-url': { description: 'URL to helpdesk for incidents & user requests.' },
// 'intended-audience': { description: '' },
issue: { description: 'A particular published issue of a journal.' },
journal: { description: 'The journal the work was published in.' },
keyword: { description: 'Concept or term related to MP entry.' },
......@@ -191,16 +193,21 @@ export const dictionary: Dictionary = {
license: { description: 'Select license pertaining to resource.' },
'life-cycle-status': { description: 'Status of the Resource life-cycle.' },
'mode-of-use': { description: 'Mode of use for the resource.' },
// 'model-version': { description: '' },
'object-format': { description: 'File format of the linked resource.' },
pages: { description: 'Page #s of a resource, separate by commas.' },
'privacy-policy-url': { description: 'Link to the privacy policy of resource.' },
// 'processed-at': { description: '' },
'publication-place': { description: 'The place of publication.' },
'publication-type': { description: 'The publication type, eg Book, article, etc.' },
publisher: { description: 'Entity responsible for making the resource available.' },
// 'resource-category': { description: '' },
'see-also': { description: 'Links to non-MP materials that are relevant.' },
'service-level-url': {
description: 'Info about performance levels provider expected to deliver.',
},
// 'source-last-update': { description: '' },
// standard: { description: '' },
'technical-readiness-level': { description: 'Technology Readiness Level of the Resource.' },
'terms-of-use': { description: 'If license unknown, fill in textbox.' },
'terms-of-use-url': { description: 'Webpage describing terms of use.' },
......
......@@ -8,6 +8,8 @@
background-color: var(--listbox-background-color, var(--color-neutral-0));
color: var(--listbox-color, var(--color-neutral-800));
box-shadow: var(--box-shadow);
outline: 2px solid transparent;
outline-offset: 0;
font-weight: var(--listbox-font-weight);
font-size: var(--listbox-font-size, var(--font-size-3-75));
user-select: none;
......@@ -53,8 +55,14 @@
&[data-focused] {
background-color: var(--listbox-option-background-color-focus);
color: var(--listbox-option-color-focus);
}
&:focus-visible {
outline: 2px solid transparent;
}
/* TODO: Hide outline when interaction modality is pointer device? */
&[data-focused] {
outline: 2px solid var(--color-primary-600);
outline-offset: -2px;
}
......
......@@ -46,7 +46,7 @@ export const ListBoxOption = forwardRef(function ListBoxOption<T extends object>
const { hoverProps, isHovered } = useHover({ ...props, isDisabled })
const isKeyboardModality = isFocusVisible()
const isOptionFocused = shouldUseVirtualFocus === true && isFocused && isKeyboardModality
const isOptionFocused = isFocused && isKeyboardModality
const isOptionSelectable = state.selectionManager.selectionMode !== 'none'
const isOptionHovered =
(isHovered && shouldFocusOnHover !== true) || (isFocused && !isKeyboardModality)
......
......@@ -39,7 +39,8 @@
}
}
&[data-focused] {
&[data-focused],
&:focus-visible {
border-color: var(--textfield-input-border-color-focus, var(--color-primary-600));
background-color: var(--textfield-input-background-color-focus);
color: var(--textfield-input-color-focus);
......
......@@ -43,7 +43,6 @@ export default async function handler(
response.status(200).end()
return
} catch (error) {
console.error(error)
response.status(500).end()
return
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment