update

example/qml/TestWindow.qml

@@ -1,73 +0,0 @@
-import QtQuick
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Layouts
-import Qt.labs.platform
-import FluentUI
-import "qrc:///example/qml/global/"
-
-FluWindow {
-
-    id:window
-    title: "FluentUI"
-    width: 1000
-    height: 640
-    closeDestory:false
-    minimumWidth: 520
-    minimumHeight: 460
-    launchMode: FluWindow.SingleTask
-    visible: true
-
-    Component.onCompleted: {
-//        FluApp.init(window)
-    }
-
-    FluNavigationView2{
-        id:nav_view
-        anchors.fill: parent
-        items: ItemsOriginal
-        footerItems:ItemsFooter
-        z:11
-        displayMode:MainEvent.displayMode
-        logo: "qrc:/example/res/image/favicon.ico"
-        title:"FluentUI"
-        autoSuggestBox:FluAutoSuggestBox{
-            width: 280
-            anchors.centerIn: parent
-            iconSource: FluentIcons.Search
-            items: ItemsOriginal.getSearchData()
-            placeholderText: lang.search
-            onItemClicked:
-                (data)=>{
-                    ItemsOriginal.startPageByItem(data)
-                }
-        }
-        actionItem:Item{
-            height: 40
-            width: 148
-            RowLayout{
-                anchors.centerIn: parent
-                spacing: 5
-                FluText{
-                    text:lang.dark_mode
-                }
-                FluToggleSwitch{
-                    checked: FluTheme.dark
-                    onClicked: {
-                        if(FluTheme.dark){
-                            FluTheme.darkMode = FluDarkMode.Light
-                        }else{
-                            FluTheme.darkMode = FluDarkMode.Dark
-                        }
-                    }
-                }
-            }
-        }
-        Component.onCompleted: {
-            ItemsOriginal.navigationView = nav_view
-            ItemsFooter.navigationView = nav_view
-//            nav_view.setCurrentIndex(0)
-        }
-    }
-
-}

example/qml/component/CodeExpander.qml

@@ -6,19 +6,20 @@ import FluentUI
 
 FluExpander{
 
+    id:control
     property string code: ""
 
     headerText: "Source"
     contentHeight:content.height
+    focus: false
 
     FluMultilineTextBox{
         id:content
         width:parent.width
-        readOnly:true
         text:highlightQmlCode(code)
-        focus:false
         textFormat: FluMultilineTextBox.RichText
         KeyNavigation.priority: KeyNavigation.BeforeItem
+        enabled: false
         background:Rectangle{
             radius: 4
             color:FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(247/255,247/255,247/255,1)
@@ -40,6 +41,11 @@ FluExpander{
             rightMargin: 5
             topMargin: 5
         }
+        onActiveFocusChanged: {
+            if(activeFocus){
+                control.expand = true
+            }
+        }
         onClicked:{
             FluTools.clipText(content.text)
             showSuccess("复制成功")

example/src/main.cpp

@@ -39,7 +39,6 @@ int main(int argc, char *argv[])
     FramelessHelper::Quick::registerTypes(&engine);
     appInfo->init(&engine);
     const QUrl url(QStringLiteral("qrc:/example/qml/App.qml"));
-    //    const QUrl url(QStringLiteral("qrc:/example/qml/TestWindow.qml"));
     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
         &app, [url](QObject *obj, const QUrl &objUrl) {
             if (!obj && url == objUrl)

src/imports/FluentUI/Controls/FluButton.qml

@@ -5,6 +5,7 @@ import FluentUI
 
 Button {
     property bool disabled: false
+    property string contentDescription: ""
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
@@ -27,11 +28,13 @@ Button {
             return Qt.rgba(0,0,0,1)
         }
     }
+    Accessible.role: Accessible.Button
+    Accessible.name: control.text
+    Accessible.description: contentDescription
+    Accessible.onPressAction: control.clicked()
     id: control
     enabled: !disabled
-    focusPolicy:Qt.TabFocus
     horizontalPadding:12
-    Keys.onSpacePressed: control.visualFocus&&clicked()
     font:FluTextStyle.Body
     background: Rectangle{
         implicitWidth: 28
@@ -40,14 +43,8 @@ Button {
         border.width: 1
         radius: 4
         FluFocusRectangle{
-            visible: control.visualFocus
+            visible: control.activeFocus
-            radius:8
+            radius:4
-        }
-        color:{
-            if(disabled){
-                return disableColor
-            }
-            return hovered ? hoverColor :normalColor
         }
     }
     contentItem: FluText {

src/imports/FluentUI/Controls/FluCheckBox.qml

@@ -23,13 +23,11 @@ Button {
     }
     id:control
     enabled: !disabled
-    focusPolicy:Qt.TabFocus
-    Keys.onSpacePressed: control.visualFocus&&clicked()
     padding:0
     onClicked: clickListener()
     background: Item{
         FluFocusRectangle{
-            visible: control.visualFocus
+            visible: control.activeFocus
         }
     }
     contentItem: RowLayout{

src/imports/FluentUI/Controls/FluComboBox.qml

@@ -74,7 +74,7 @@ ComboBox {
         visible: !control.flat || control.down
         radius: 4
         FluFocusRectangle{
-            visible: control.visualFocus
+            visible: control.activeFocus
             radius:8
         }
         color:{

src/imports/FluentUI/Controls/FluContentDialog.qml

@@ -1,4 +1,4 @@
-import QtQuick
+import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Window
@@ -25,7 +25,7 @@ FluPopup {
             return 400
         return  Math.min(Window.window.width,400)
     }
-
+    focus: true
     Rectangle {
         id:layout_content
         anchors.fill: parent

src/imports/FluentUI/Controls/FluControl.qml

@@ -0,0 +1,22 @@
+import QtQuick
+import QtQuick.Controls.impl
+import FluentUI
+import QtQuick.Templates as T
+
+T.Button {
+    id: control
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+    padding: 0
+    horizontalPadding: 0
+    spacing: 0
+    contentItem: Item{}
+    background: Item{
+        FluFocusRectangle{
+            visible: control.activeFocus
+            radius:8
+        }
+    }
+}

src/imports/FluentUI/Controls/FluDropDownButton.qml

@@ -6,6 +6,7 @@ import FluentUI
 
 Button {
     property bool disabled: false
+    property string contentDescription: ""
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
@@ -30,12 +31,14 @@ Button {
     }
     property var window : Window.window
     property alias items: menu.content
+    Accessible.role: Accessible.Button
+    Accessible.name: control.text
+    Accessible.description: contentDescription
+    Accessible.onPressAction: control.clicked()
     id: control
     rightPadding:35
     enabled: !disabled
-    focusPolicy:Qt.TabFocus
     horizontalPadding:12
-    Keys.onSpacePressed: control.visualFocus&&clicked()
     background: Rectangle{
         implicitWidth: 28
         implicitHeight: 28
@@ -43,7 +46,7 @@ Button {
         border.width: 1
         radius: 4
         FluFocusRectangle{
-            visible: control.visualFocus
+            visible: control.activeFocus
             radius:8
         }
         color:{

src/imports/FluentUI/Controls/FluFilledButton.qml

@@ -5,6 +5,7 @@ import FluentUI
 
 Button {
     property bool disabled: false
+    property string contentDescription: ""
     property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
     property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
     property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
@@ -19,10 +20,13 @@ Button {
             return Qt.rgba(1,1,1,1)
         }
     }
+    Accessible.role: Accessible.Button
+    Accessible.name: control.text
+    Accessible.description: contentDescription
+    Accessible.onPressAction: control.clicked()
     id: control
     enabled: !disabled
     Keys.onSpacePressed: control.visualFocus&&clicked()
-    focusPolicy:Qt.TabFocus
     font:FluTextStyle.Body
     horizontalPadding:12
     background: Rectangle{
@@ -31,7 +35,7 @@ Button {
         radius: 4
         FluFocusRectangle{
             visible: control.visualFocus
-            radius:8
+            radius:4
         }
         color:{
             if(disabled){

src/imports/FluentUI/Controls/FluFocusRectangle.qml

@@ -4,16 +4,15 @@ import FluentUI
 
 Item {
     property int radius: 4
-    id:root
+    id:control
     anchors.fill: parent
-    anchors.margins: -3
     Rectangle{
-        width: root.width
+        width: control.width
-        height: root.height
+        height: control.height
         anchors.centerIn: parent
         color: "#00000000"
-        border.width: 3
+        border.width: 2
-        radius: root.radius
+        radius: control.radius
         border.color: FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
         z: 65535
     }

src/imports/FluentUI/Controls/FluIconButton.qml

@@ -8,6 +8,7 @@ Button {
     property int iconSource
     property bool disabled: false
     property int radius:4
+    property string contentDescription: ""
     property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
     property color pressedColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.06)
     property color normalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
@@ -34,6 +35,10 @@ Button {
             return Qt.rgba(0,0,0,1)
         }
     }
+    Accessible.role: Accessible.Button
+    Accessible.name: control.text
+    Accessible.description: contentDescription
+    Accessible.onPressAction: control.clicked()
     id:control
     width: 30
     height: 30
@@ -41,13 +46,11 @@ Button {
     implicitHeight: height
     padding: 0
     enabled: !disabled
-    focusPolicy:Qt.TabFocus
-    Keys.onSpacePressed: control.visualFocus&&clicked()
     background: Rectangle{
         radius: control.radius
         color:control.color
         FluFocusRectangle{
-            visible: control.visualFocus
+            visible: control.activeFocus
         }
     }
     contentItem: Item{

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -155,8 +155,8 @@ Item {
         Item{
             height: 38
             width: layout_list.width
-            Rectangle{
+            FluControl{
-                radius: 4
+                id:item_control
                 anchors{
                     top: parent.top
                     bottom: parent.bottom
@@ -167,141 +167,141 @@ Item {
                     leftMargin: 6
                     rightMargin: 6
                 }
+                onClicked: {
+                    if(d.isCompactAndNotPanel){
+                        control_popup.showPopup(Qt.point(50,mapToItem(control,0,0).y),model.children)
+                        return
+                    }
+                    model.isExpand = !model.isExpand
+                }
                 Rectangle{
-                    width: 3
+                    radius: 4
-                    height: 18
-                    radius: 1.5
-                    color: FluTheme.primaryColor.dark
-                    visible: {
-                        for(var i=0;i<model.children.length;i++){
-                            var item = model.children[i]
-                            if(item.idx === nav_list.currentIndex && !model.isExpand){
-                                return true
-                            }
-                        }
-                        return false
-                    }
-                    anchors{
-                        verticalCenter: parent.verticalCenter
-                    }
-                }
-                FluIcon{
-                    rotation: model.isExpand?0:180
-                    iconSource:FluentIcons.ChevronUp
-                    iconSize: 15
-                    anchors{
-                        verticalCenter: parent.verticalCenter
-                        right: parent.right
-                        rightMargin: 12
-                    }
-                    opacity: {
-                        if(d.isCompactAndNotPanel){
-                            return false
-                        }
-                        return true
-                    }
-                    visible:opacity
-                    Behavior on opacity {
-                        NumberAnimation{
-                            duration: 83
-                        }
-                    }
-                    Behavior on rotation {
-                        NumberAnimation{
-                            duration: 83
-                        }
-                    }
-                }
-                MouseArea{
-                    id:item_mouse
-                    hoverEnabled: true
                     anchors.fill: parent
-                    onClicked: {
+                    Rectangle{
-                        if(d.isCompactAndNotPanel){
+                        width: 3
-                            control_popup.showPopup(Qt.point(50,mapToItem(control,0,0).y),model.children)
+                        height: 18
-                            return
+                        radius: 1.5
-                        }
+                        color: FluTheme.primaryColor.dark
-                        model.isExpand = !model.isExpand
+                        visible: {
-                    }
+                            for(var i=0;i<model.children.length;i++){
-                }
+                                var item = model.children[i]
-                color: {
+                                if(item.idx === nav_list.currentIndex && !model.isExpand){
-                    if(FluTheme.dark){
+                                    return true
-                        if((nav_list.currentIndex === idx)&&type===0){
+                                }
-                            return Qt.rgba(1,1,1,0.06)
-                        }
-                        if(item_mouse.containsMouse){
-                            return Qt.rgba(1,1,1,0.03)
-                        }
-                        return Qt.rgba(0,0,0,0)
-                    }else{
-                        if(nav_list.currentIndex === idx&&type===0){
-                            return Qt.rgba(0,0,0,0.06)
-                        }
-                        if(item_mouse.containsMouse){
-                            return Qt.rgba(0,0,0,0.03)
-                        }
-                        return Qt.rgba(0,0,0,0)
-                    }
-                }
-                Component{
-                    id:com_icon
-                    FluIcon{
-                        iconSource: {
-                            if(model.icon){
-                                return model.icon
                             }
-                            return 0
-                        }
-                        iconSize: 15
-                    }
-                }
-                Item{
-                    id:item_icon
-                    width: 30
-                    height: 30
-                    anchors{
-                        verticalCenter: parent.verticalCenter
-                        left:parent.left
-                        leftMargin: 3
-                    }
-                    Loader{
-                        anchors.centerIn: parent
-                        sourceComponent: {
-                            if(model.cusIcon){
-                                return model.cusIcon
-                            }
-                            return com_icon
-                        }
-                    }
-                }
-                FluText{
-                    id:item_title
-                    text:model.title
-                    opacity: {
-                        if(d.isCompactAndNotPanel){
                             return false
                         }
-                        return true
+                        anchors{
-                    }
+                            verticalCenter: parent.verticalCenter
-                    visible:opacity
-                    Behavior on opacity {
-                        NumberAnimation{
-                            duration: 83
                         }
                     }
-                    anchors{
+                    FluIcon{
-                        verticalCenter: parent.verticalCenter
+                        rotation: model.isExpand?0:180
-                        left:item_icon.right
+                        iconSource:FluentIcons.ChevronUp
-                    }
+                        iconSize: 15
-                    color:{
+                        anchors{
-                        if(item_mouse.pressed){
+                            verticalCenter: parent.verticalCenter
-                            return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
+                            right: parent.right
+                            rightMargin: 12
+                        }
+                        opacity: {
+                            if(d.isCompactAndNotPanel){
+                                return false
+                            }
+                            return true
+                        }
+                        visible:opacity
+                        Behavior on opacity {
+                            NumberAnimation{
+                                duration: 83
+                            }
+                        }
+                        Behavior on rotation {
+                            NumberAnimation{
+                                duration: 83
+                            }
+                        }
+                    }
+                    color: {
+                        if(FluTheme.dark){
+                            if((nav_list.currentIndex === idx)&&type===0){
+                                return Qt.rgba(1,1,1,0.06)
+                            }
+                            if(item_control.hovered){
+                                return Qt.rgba(1,1,1,0.03)
+                            }
+                            return Qt.rgba(0,0,0,0)
+                        }else{
+                            if(nav_list.currentIndex === idx&&type===0){
+                                return Qt.rgba(0,0,0,0.06)
+                            }
+                            if(item_control.hovered){
+                                return Qt.rgba(0,0,0,0.03)
+                            }
+                            return Qt.rgba(0,0,0,0)
+                        }
+                    }
+                    Component{
+                        id:com_icon
+                        FluIcon{
+                            iconSource: {
+                                if(model.icon){
+                                    return model.icon
+                                }
+                                return 0
+                            }
+                            iconSize: 15
+                        }
+                    }
+                    Item{
+                        id:item_icon
+                        width: 30
+                        height: 30
+                        anchors{
+                            verticalCenter: parent.verticalCenter
+                            left:parent.left
+                            leftMargin: 3
+                        }
+                        Loader{
+                            anchors.centerIn: parent
+                            sourceComponent: {
+                                if(model.cusIcon){
+                                    return model.cusIcon
+                                }
+                                return com_icon
+                            }
+                        }
+                    }
+                    FluText{
+                        id:item_title
+                        text:model.title
+                        opacity: {
+                            if(d.isCompactAndNotPanel){
+                                return false
+                            }
+                            return true
+                        }
+                        visible:opacity
+                        Behavior on opacity {
+                            NumberAnimation{
+                                duration: 83
+                            }
+                        }
+                        anchors{
+                            verticalCenter: parent.verticalCenter
+                            left:item_icon.right
+                        }
+                        color:{
+                            if(item_control.pressed){
+                                return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
+                            }
+                            return FluTheme.dark ? FluColors.White : FluColors.Grey220
                         }
-                        return FluTheme.dark ? FluColors.White : FluColors.Grey220
                     }
                 }
             }
         }
+
     }
     Component{
         id:com_panel_item
@@ -314,15 +314,16 @@ Item {
                 }
             }
             clip: true
-            height: {
+            height: visible ? 38 : 0
+            visible: {
                 if(model.parent){
-                    return model.parent.isExpand ? 38 : 0
+                    return model.parent.isExpand ? true : false
                 }
-                return 38
+                return true
             }
             width: layout_list.width
-            Rectangle{
+            FluControl{
-                radius: 4
+                id:item_control
                 anchors{
                     top: parent.top
                     bottom: parent.bottom
@@ -333,120 +334,119 @@ Item {
                     leftMargin: 6
                     rightMargin: 6
                 }
-                MouseArea{
+                onClicked: {
-                    id:item_mouse
+                    if(type === 0){
-                    hoverEnabled: true
+                        if(model.tapFunc){
-                    anchors.fill: parent
+                            model.tapFunc()
-                    onClicked: {
-                        if(type === 0){
-                            if(model.tapFunc){
-                                model.tapFunc()
-                            }else{
-                                nav_list.currentIndex = idx
-                                layout_footer.currentIndex = -1
-                                if(d.isMinimal || d.isCompact){
-                                    d.enableNavigationPanel = false
-                                }
-                            }
                         }else{
-                            if(model.tapFunc){
+                            nav_list.currentIndex = idx
-                                model.tapFunc()
+                            layout_footer.currentIndex = -1
-                            }else{
+                            if(d.isMinimal || d.isCompact){
-                                nav_list.currentIndex = nav_list.count-layout_footer.count+idx
+                                d.enableNavigationPanel = false
-                                layout_footer.currentIndex = idx
-                                if(d.isMinimal || d.isCompact){
-                                    d.enableNavigationPanel = false
-                                }
                             }
                         }
-                    }
-                }
-                color: {
-                    if(FluTheme.dark){
-                        if(type===0){
-                            if(nav_list.currentIndex === idx){
-                                return Qt.rgba(1,1,1,0.06)
-                            }
-                        }else{
-                            if(nav_list.currentIndex === (nav_list.count-layout_footer.count+idx)){
-                                return Qt.rgba(1,1,1,0.06)
-                            }
-                        }
-                        if(item_mouse.containsMouse){
-                            return Qt.rgba(1,1,1,0.03)
-                        }
-                        return Qt.rgba(0,0,0,0)
                     }else{
-                        if(type===0){
+                        if(model.tapFunc){
-                            if(nav_list.currentIndex === idx){
+                            model.tapFunc()
-                                return Qt.rgba(0,0,0,0.06)
-                            }
                         }else{
-                            if(nav_list.currentIndex === (nav_list.count-layout_footer.count+idx)){
+                            nav_list.currentIndex = nav_list.count-layout_footer.count+idx
-                                return Qt.rgba(0,0,0,0.06)
+                            layout_footer.currentIndex = idx
+                            if(d.isMinimal || d.isCompact){
+                                d.enableNavigationPanel = false
                             }
                         }
-                        if(item_mouse.containsMouse){
-                            return Qt.rgba(0,0,0,0.03)
-                        }
-                        return Qt.rgba(0,0,0,0)
-                    }
-                }
-                Component{
-                    id:com_icon
-                    FluIcon{
-                        iconSource: {
-                            if(model.icon){
-                                return model.icon
-                            }
-                            return 0
-                        }
-                        iconSize: 15
-                    }
-                }
-                Item{
-                    id:item_icon
-                    width: 30
-                    height: 30
-                    anchors{
-                        verticalCenter: parent.verticalCenter
-                        left:parent.left
-                        leftMargin: 3
-                    }
-                    Loader{
-                        anchors.centerIn: parent
-                        sourceComponent: {
-                            if(model.cusIcon){
-                                return model.cusIcon
-                            }
-                            return com_icon
-                        }
                     }
                 }
-                FluText{
+                Rectangle{
-                    id:item_title
+                    radius: 4
-                    text:model.title
+                    anchors.fill: parent
-                    opacity: {
+                    color: {
-                        if(d.isCompactAndNotPanel){
+                        if(FluTheme.dark){
-                            return false
+                            if(type===0){
-                        }
+                                if(nav_list.currentIndex === idx){
-                        return true
+                                    return Qt.rgba(1,1,1,0.06)
-                    }
+                                }
-                    visible:opacity
+                            }else{
-                    Behavior on opacity {
+                                if(nav_list.currentIndex === (nav_list.count-layout_footer.count+idx)){
-                        NumberAnimation{
+                                    return Qt.rgba(1,1,1,0.06)
-                            duration: 83
+                                }
+                            }
+                            if(item_control.hovered){
+                                return Qt.rgba(1,1,1,0.03)
+                            }
+                            return Qt.rgba(0,0,0,0)
+                        }else{
+                            if(type===0){
+                                if(nav_list.currentIndex === idx){
+                                    return Qt.rgba(0,0,0,0.06)
+                                }
+                            }else{
+                                if(nav_list.currentIndex === (nav_list.count-layout_footer.count+idx)){
+                                    return Qt.rgba(0,0,0,0.06)
+                                }
+                            }
+                            if(item_control.hovered){
+                                return Qt.rgba(0,0,0,0.03)
+                            }
+                            return Qt.rgba(0,0,0,0)
                         }
                     }
-                    color:{
+                    Component{
-                        if(item_mouse.pressed){
+                        id:com_icon
-                            return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
+                        FluIcon{
+                            iconSource: {
+                                if(model.icon){
+                                    return model.icon
+                                }
+                                return 0
+                            }
+                            iconSize: 15
                         }
-                        return FluTheme.dark ? FluColors.White : FluColors.Grey220
                     }
-                    anchors{
+                    Item{
-                        verticalCenter: parent.verticalCenter
+                        id:item_icon
-                        left:item_icon.right
+                        width: 30
+                        height: 30
+                        anchors{
+                            verticalCenter: parent.verticalCenter
+                            left:parent.left
+                            leftMargin: 3
+                        }
+                        Loader{
+                            anchors.centerIn: parent
+                            sourceComponent: {
+                                if(model.cusIcon){
+                                    return model.cusIcon
+                                }
+                                return com_icon
+                            }
+                        }
+                    }
+                    FluText{
+                        id:item_title
+                        text:model.title
+                        opacity: {
+                            if(d.isCompactAndNotPanel){
+                                return false
+                            }
+                            return true
+                        }
+                        visible:opacity
+                        Behavior on opacity {
+                            NumberAnimation{
+                                duration: 83
+                            }
+                        }
+                        color:{
+                            if(item_control.pressed){
+                                return FluTheme.dark ? FluColors.Grey80 : FluColors.Grey120
+                            }
+                            return FluTheme.dark ? FluColors.White : FluColors.Grey220
+                        }
+                        anchors{
+                            verticalCenter: parent.verticalCenter
+                            left:item_icon.right
+                        }
                     }
                 }
             }
@@ -624,11 +624,11 @@ Item {
             }
             return "transparent"
         }
-
+        x: visible ? 0 : -width
-        x: {
+        visible: {
             if(d.displayMode !== FluNavigationView.Minimal)
-                return 0
+                return true
-            return d.isMinimalAndPanel  ? 0 : -width
+            return d.isMinimalAndPanel  ? true : false
         }
         FluAcrylic {
             sourceItem:nav_swipe
@@ -820,14 +820,9 @@ Item {
                 duration: 83
             }
         }
-        background: FluRectangle{
+        padding: 0
-            width: 160
+        focus: true
-            radius: [4,4,4,4]
+        contentItem: Item{
-            FluShadow{
-                radius: 4
-            }
-            color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
-            height: 38*Math.min(Math.max(list_view.count,1),8)
             ListView{
                 id:list_view
                 anchors.fill: parent
@@ -836,6 +831,7 @@ Item {
                 model: control_popup.childModel
                 ScrollBar.vertical: FluScrollBar {}
                 delegate:Button{
+                    id:item_button
                     width: 160
                     padding:10
                     background: Rectangle{
@@ -845,6 +841,10 @@ Item {
                             }
                             return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
                         }
+                        FluFocusRectangle{
+                            visible: item_button.activeFocus
+                            radius:4
+                        }
                     }
                     contentItem: FluText{
                         text:modelData.title
@@ -867,6 +867,16 @@ Item {
                 }
             }
         }
+        background: FluRectangle{
+            implicitWidth: 160
+            implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
+            radius: [4,4,4,4]
+            FluShadow{
+                radius: 4
+            }
+            color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
+
+        }
         function showPopup(pos,model){
             control_popup.x = pos.x
             control_popup.y = pos.y
@@ -906,19 +916,19 @@ Item {
             {
                 switch(page.pageMode)
                 {
-                    case FluNavigationView.SingleTask:
+                case FluNavigationView.SingleTask:
-                        while(nav_swipe.currentItem !== page)
+                    while(nav_swipe.currentItem !== page)
-                        {
+                    {
-                            nav_swipe.pop()
+                        nav_swipe.pop()
-                            d.stackItems.pop()
+                        d.stackItems.pop()
-                        }
+                    }
+                    return
+                case FluNavigationView.SingleTop:
+                    if (nav_swipe.currentItem.url === url)
                         return
-                    case FluNavigationView.SingleTop:
+                    break
-                        if (nav_swipe.currentItem.url === url)
+                case FluNavigationView.Standard:
-                            return
+                default:
-                        break
-                    case FluNavigationView.Standard:
-                    default:
                 }
             }
         }

src/imports/FluentUI/Controls/FluNavigationView2.qml

@@ -1,57 +0,0 @@
-import QtQuick
-import QtQuick.Window
-import QtQuick.Controls
-import QtQuick.Controls.Basic
-import QtQuick.Layouts
-import FluentUI
-
-Item {
-
-    property url logo
-    property string title: ""
-    property FluObject items
-    property FluObject footerItems
-    property int displayMode: FluNavigationView.Auto
-    property Component autoSuggestBox
-    property Component actionItem
-    id:control
-    Item {
-        id:nav_app_bar
-        width: parent.width
-        height: 40
-        RowLayout{
-            height:parent.height
-            spacing: 0
-            FluIconButton{
-                iconSource: FluentIcons.ChromeBack
-                Layout.leftMargin: 5
-                Layout.preferredWidth: 30
-                Layout.preferredHeight: 30
-                Layout.alignment: Qt.AlignVCenter
-                iconSize: 15
-            }
-            FluIconButton{
-                id:btn_nav
-                iconSource: FluentIcons.GlobalNavButton
-                iconSize: 15
-                Layout.preferredWidth: 30
-                Layout.preferredHeight: 30
-                Layout.alignment: Qt.AlignVCenter
-            }
-            Image{
-                Layout.preferredHeight: 20
-                Layout.preferredWidth: 20
-                source: control.logo
-                Layout.leftMargin: 12
-                sourceSize: Qt.size(40,40)
-                Layout.alignment: Qt.AlignVCenter
-            }
-            FluText{
-                Layout.alignment: Qt.AlignVCenter
-                text:control.title
-                Layout.leftMargin: 12
-                font: FluTextStyle.Body
-            }
-        }
-    }
-}

src/imports/FluentUI/Controls/FluRadioButton.qml

@@ -5,6 +5,7 @@ import QtQuick.Layouts
 import FluentUI
 
 Button {
+    property string contentDescription: ""
     property bool disabled: false
     property color borderNormalColor: checked ? FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark : FluTheme.dark ? Qt.rgba(161/255,161/255,161/255,1) : Qt.rgba(141/255,141/255,141/255,1)
     property color borderDisableColor:  FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(198/255,198/255,198/255,1)
@@ -15,17 +16,19 @@ Button {
     property var clickListener : function(){
         checked = !checked
     }
+    Accessible.role: Accessible.Button
+    Accessible.name: control.text
+    Accessible.description: contentDescription
+    Accessible.onPressAction: control.clicked()
     id:control
     enabled: !disabled
-    focusPolicy:Qt.TabFocus
     padding:0
     background: Item{
         FluFocusRectangle{
-            visible: control.visualFocus
+            visible: control.activeFocus
         }
     }
     font:FluTextStyle.Body
-    Keys.onSpacePressed: control.visualFocus&&clicked()
     onClicked: clickListener()
     contentItem: RowLayout{
         Rectangle{

src/imports/FluentUI/Controls/FluTextButton.qml

@@ -5,6 +5,7 @@ import FluentUI
 
 Button {
     property bool disabled: false
+    property string contentDescription: ""
     property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
     property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.15) : Qt.lighter(normalColor,1.15)
     property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.3) : Qt.lighter(normalColor,1.3)
@@ -20,19 +21,21 @@ Button {
         return hovered ? hoverColor :normalColor
     }
     id: control
-    topPadding:0
+    horizontalPadding:12
-    bottomPadding:0
-    leftPadding:0
-    rightPadding:0
     enabled: !disabled
-    focusPolicy:Qt.TabFocus
     Keys.onSpacePressed: control.visualFocus&&clicked()
     background: Item{
+        implicitWidth: 28
+        implicitHeight: 28
         FluFocusRectangle{
             visible: control.visualFocus
             radius:8
         }
     }
+    Accessible.role: Accessible.Button
+    Accessible.name: control.text
+    Accessible.description: contentDescription
+    Accessible.onPressAction: control.clicked()
     contentItem: FluText {
         id:btn_text
         text: control.text

src/imports/FluentUI/Controls/FluToggleButton.qml

@@ -6,6 +6,7 @@ import FluentUI
 Button {
 
     property bool disabled: false
+    property string contentDescription: ""
     property color normalColor: {
         if(checked){
            return FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
@@ -31,10 +32,12 @@ Button {
         checked = !checked
     }
     property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
+    Accessible.role: Accessible.Button
+    Accessible.name: control.text
+    Accessible.description: contentDescription
+    Accessible.onPressAction: control.clicked()
     id: control
     enabled: !disabled
-    Keys.onSpacePressed: control.visualFocus&&clicked()
-    focusPolicy:Qt.TabFocus
     horizontalPadding:12
     onClicked: clickListener()
     background: Rectangle{
@@ -44,7 +47,7 @@ Button {
         border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
         border.width: checked ? 0 : 1
         FluFocusRectangle{
-            visible: control.visualFocus
+            visible: control.activeFocus
             radius:8
         }
         color:{

src/imports/FluentUI/Controls/FluToggleSwitch.qml

@@ -22,8 +22,6 @@ Button {
     height: 20
     enabled: !disabled
     implicitHeight: height
-    focusPolicy:Qt.TabFocus
-    Keys.onSpacePressed: control.visualFocus&&clicked()
     onClicked: clickListener()
     contentItem: Item{}
     background : RowLayout{
@@ -34,7 +32,7 @@ Button {
             height: control.height
             radius: height / 2
             FluFocusRectangle{
-                visible: control.visualFocus
+                visible: control.activeFocus
                 radius: 20
             }
             color: {