I finally found a solution for this by making the following changes to the dash_core_components.min.js file. The modified sections of the code are copied below, but theyāll have to be manually modified after an update. Iāll pass this along to Plotly support as well. Who knows, maybe theyāll include something similar in a future update.
Tabs (Additional code):
onKeyPress:function(){u||s(g)},tabIndex:"0",role:"tab"
Tabs Before:
return u&&(m+=" tab--disabled ".concat(b||"")),r&&(m+=" tab--selected ".concat(c||"")),y=tn(Array,t)?t[0].props.children:t,i.a.createElement("div",{"data-dash-is-loading":f&&f.is_loading||void 0,id:n,style:h,onClick:function(){u||s(g)},className:nn.a.dynamic([["1358318571",[p.background,p.border,p.border,p.border,p.primary,d,p.border,A?"":"width: calc(100% / ".concat(C,");
Tabs After:
return u&&(m+=" tab--disabled ".concat(b||"")),r&&(m+=" tab--selected ".concat(c||"")),y=tn(Array,t)?t[0].props.children:t,i.a.createElement("div",{"data-dash-is-loading":f&&f.is_loading||void 0,id:n,style:h,onClick:function(){u||s(g)},onKeyPress:function(){u||s(g)},tabIndex:"0",role:"tab",className:nn.a.dynamic([["1358318571",[p.background,p.border,p.border,p.border,p.primary,d,p.border,A?"":"width: calc(100% / ".concat(C,");
Tabs Parent (Additional code):
role:"tablist"
Tabs Parent (Before):
return i.a.createElement("div",{"data-dash-is-loading":this.props.loading_state&&this.props.loading_state.is_loading||void 0,style:this.props.parent_style,id:"".concat(this.props.id,"-parent"),className:nn.a.dynamic([["2495343579",[this.props.mobile_breakpoint,this.props.colors.border,this.props.colors.border,this.props.colors.primary]]])+" "+"".concat(s," ").concat(this.props.parent_className||"")},i.a.createElement("div",{style:this.props.style,id:this.props.id,className:nn.a.dynamic([["2495343579",[this.props.mobile_breakpoint,this.props.colors.border,this.props.colors.border,this.props.colors.primary]]])+" "+"".concat(c," ").concat(this.props.className||"")},e),i.a.createElement("div",{style:this.props.content_style,className:nn.a.dynamic([["2495343579",[this.props.mobile_breakpoint,this.props.colors.border,this.props.colors.border,this.props.colors.primary]]])+" "+"".concat(l," ").concat(this.props.content_className||"")},a||""),i.a.createElement(nn.a,{id:"2495343579",dynamic:[this.props.mobile_breakpoint,this.props.colors.border,this.props.colors.border,this.props.colors.primary]},".tab-parent.__jsx-style-dynamic-selector{display:-webkit-box;
Tabs Parent (After):
return i.a.createElement("div",{"data-dash-is-loading":this.props.loading_state&&this.props.loading_state.is_loading||void 0,style:this.props.parent_style,id:"".concat(this.props.id,"-parent"),role:"tablist",className:nn.a.dynamic([["2495343579",[this.props.mobile_breakpoint,this.props.colors.border,this.props.colors.border,this.props.colors.primary]]])+" "+"".concat(s," ").concat(this.props.parent_className||"")},i.a.createElement("div",{style:this.props.style,id:this.props.id,className:nn.a.dynamic([["2495343579",[this.props.mobile_breakpoint,this.props.colors.border,this.props.colors.border,this.props.colors.primary]]])+" "+"".concat(c," ").concat(this.props.className||"")},e),i.a.createElement("div",{style:this.props.content_style,className:nn.a.dynamic([["2495343579",[this.props.mobile_breakpoint,this.props.colors.border,this.props.colors.border,this.props.colors.primary]]])+" "+"".concat(l," ").concat(this.props.content_className||"")},a||""),i.a.createElement(nn.a,{id:"2495343579",dynamic:[this.props.mobile_breakpoint,this.props.colors.border,this.props.colors.border,this.props.colors.primary]},".tab-parent.__jsx-style-dynamic-selector{display:-webkit-box;