Add tab focus & keyboard enter event to DrillDown & ViewDrd#802

Merged

barmac merged 17 commits intobpmn-io:developfrom BrianJVarley:feat/view-drd-and-drilldown-focus

Dec 7, 2023

+45-9

Commits on Dec 7, 2023

ViewDrdComp: Add tabIndex and include focus outline styling, DrillDownComp: Apply tabindex=o attribute to catch keyboard focus & change element from span -> button to capture enter enter key event…

BrianJVarley
authored and
barmac
committed
DrillDown: remove tabIndex as overlay button will receive focus natively

BrianJVarley
authored and
barmac
committed
ViewDrdComp: remove tabindex attr. since button natively receives focus, .view-drd-button: Remove outline: none style to allow browser native focus style to be applied to button

BrianJVarley
authored and
barmac
committed
view-drd-button: remove custom focus style, now provided by button element

BrianJVarley
authored and
barmac
committed
clean up unused code in PR

BrianJVarley
authored and
barmac
committed
fix: add type=button
barmac
committed
DrillDown: Add blue background & white color styling to button element @barmac

BrianJVarley
authored and
barmac
committed
drilldown: remove unused css class

BrianJVarley
authored and
barmac
committed
dmn-js-drd.css: remove background color on drilldown button so Browser tab focus style is visible (.djs-overlay .drill-down-overlay)

BrianJVarley
authored and
barmac
committed
dmn-js-drd.css: remove background color on drilldown button so Browser tab focus style is visible (.djs-overlay .drill-down-overlay)..remove style prop

BrianJVarley
authored and
barmac
committed
chore: improve colors
barmac
committed
fix: show outline for view-drd button
barmac
committed
feat: display span for non-interactive
barmac
committed
test: remove exclusive test
barmac
committed
test: revert unnecessary change
barmac
committed
increase outline offset
barmac
committed
lol
barmac
committed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add tab focus & keyboard enter event to DrillDown & ViewDrd#802

Commits on Dec 7, 2023

ViewDrdComp: Add tabIndex and include focus outline styling, DrillDownComp: Apply tabindex=o attribute to catch keyboard focus & change element from span -> button to capture enter enter key event…

DrillDown: remove tabIndex as overlay button will receive focus natively

ViewDrdComp: remove tabindex attr. since button natively receives focus, .view-drd-button: Remove outline: none style to allow browser native focus style to be applied to button

view-drd-button: remove custom focus style, now provided by button element

clean up unused code in PR

fix: add type=button

DrillDown: Add blue background & white color styling to button element @barmac

drilldown: remove unused css class

dmn-js-drd.css: remove background color on drilldown button so Browser tab focus style is visible (.djs-overlay .drill-down-overlay)

dmn-js-drd.css: remove background color on drilldown button so Browser tab focus style is visible (.djs-overlay .drill-down-overlay)..remove style prop

chore: improve colors

fix: show outline for view-drd button

feat: display span for non-interactive

test: remove exclusive test

test: revert unnecessary change

increase outline offset

lol